javascript+css实现俄罗斯方块小游戏

俄罗斯方块，一个很有趣的一个小游戏，此次基于html+css+javaScript实现，包含在一个方块落地后自动生成方块、操控方块的移动以及方块变形等。

部分代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>俄罗斯方块 — 经典版V10</title>
  <link rel="stylesheet" href="css/tetris.css" />
  <style>
   .playground{
    width: 525px; height: 550px;
    margin: 20px auto 0 auto;
    position: relative;
    background-image:url(../img/tetris.png);
   }
   .pause{width: 525px; height: 550px;
    position: absolute;
    top:0;left:0;
    background-image:url(../img/pause.png);
    z-index:100;
    display:none;
   }
   .playground img{
    position:absolute;z-index:10;width:26px;
   }
   .playground p{
    font-size: 30px;
    font-family: 'SimHei';
    font-weight: bold;
    color: #667799;
    position: absolute;
    left:305px;
    top:120px;
   }
   .playground p+p{top:176px;}
   .playground p+p+p{top:232px;}
  </style>
 </head>
 <body>
  <div class="playground">
   <p>SCORE:<span>0</span></p>
   <p>LINES:<span>0</span></p>
   <p>LEVEL:<span>1</span></p>
  </div>
 <script src="js/shape.js"></script>
 <script src="js/tetris.js"></script>
 </body>
</html>

游戏截图：

源码可参考：js俄罗斯方块

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript+css实现俄罗斯方块小游戏

    俄罗斯方块,一个很有趣的一个小游戏,此次基于html+css+javaScript实现,包含在一个方块落地后自动生成方块.操控方块的移动以及方块变形等. 部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>俄罗斯方块 - 经典版V10</title> <link rel="stylesheet" href=

  • Javascript实现贪吃蛇小游戏（含详细注释）

    本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

  • 使用Javascript写的2048小游戏

    最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri

  • JavaScript实现像素鸟小游戏的详细流程

    JavaScript实现像素鸟小游戏的详细流程

    目录 <像素鸟>游戏简单介绍 1.功能结构及流程 2.游戏实现效果展示 3.实现思路 代码展示介绍 css样式 js代码 随机背景移动 玩家控制像素鸟 生成随机柱子 积分增加 总结 <像素鸟>游戏简单介绍 游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍,而这只鸟其实是根本不会飞的……所以玩家每点击一下小鸟就会飞高一点,不点击就会下降,玩家必须控制节奏,拿捏点击屏幕的时间点,让小鸟能在落下的瞬间跳起来,恰好能够通过狭窄的水管缝隙,只要稍一分神,马上就会失败阵亡. 1.

  • 纯JavaScript 实现flappy bird小游戏实例代码

    纯JavaScript 实现flappy bird小游戏实例代码

    前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:

  • C语言实现俄罗斯方块小游戏

    C语言实现俄罗斯方块小游戏的制作代码,具体内容如下 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #define TTY_PATH "/dev/tty" #define STTY_ON "stty raw -echo -F" #define STTY_OFF "stty -raw echo -F" int map[21][14]; char

  • 基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编

  • pygame库实现俄罗斯方块小游戏

    pygame库实现俄罗斯方块小游戏

    本文实例为大家分享了pygame库实现俄罗斯方块小游戏的具体代码,供大家参考,具体内容如下 import random,time,pygame,sys from pygame.locals import *#导pygame内定义的一些常量 FPS=25#每秒传输帧数(刷新率),此处一秒内在屏幕上连续投射出24张静止画面 WINDOWWIDTH=640#窗口宽 WINDOWHEIGHT=480#窗口高 BOXSIZE=20#游戏框大小 BOARDWIDTH=10#游戏框宽度 BOARDHEIGHT

  • 原生javascript制作贪吃蛇小游戏的方法分析

    本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下: <!--1. 创建场景 --> <!-- 2.定义初始数据  以及随机食物 --> <!-- 3.控制贪吃蛇方向 --> <!-- 4.判断位置以及和随机食物的位置 增加贪吃蛇长度 --> HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char

  • 如何利用JavaScript编写一个格斗小游戏

    如何利用JavaScript编写一个格斗小游戏

    拖延症晚期的我原本计划趁着周末写个年终总结,但是一直没有什么思路,想来想去也没想到要写啥就胡乱写了这么一个小东西. 一直比较痴迷游戏行业,可能我不太适合做前端,应该去学C++.... 首先当然是选择一张背景图,作为整个场景中的地图,而且要大要高清.布局到页面中. 然后通过可视区值展示这张图片的一小部分.我这里用的是宽600,高420的,超出直接隐藏掉. width: 600px; height: 420px; 这样一个简单的场景就写好了,接着我们需要在这个场景中加入我们的人物.也就是游戏中的角色

随机推荐