用html写游戏,Html5写一个简单的俄罗斯方块小游戏

导言

在一个风和日丽的一天，看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏，并做了一些改进，作为自己前端学习的第一站。

游戏效果：

制作思路

因为书里的俄罗斯方块比较普通，太常规了，不是很好看，所以我在网上找了上面那张图片，打算照着它来做。(请无视成品和原图的差距)

然后便是游戏界面和常规的俄罗斯方块游戏逻辑。

接着便是游戏结束界面了。

原本想做个弹出层，但觉得找图片有点麻烦，所以就在网上找了文字特效，套用了一下。

代码实现：

首先是html文件和css文件，主要涉及了布局方面。作为新手，在上面真的是翻来覆去的踩坑。o(╥﹏╥)o

index.html

俄罗斯方块

/*导入外部的字体文件*/

@font-face{

font-family:tmb;/*为字体命名为tmb*/

src:url("DS-DIGIB.TTF") format("TrueType");/*format为字体文件格式，TrueType为ttf*/

}

div>span{

font-family:tmb;

font-size:18pt;

color:green;

}

速度：1

当前分数：0

最高分数：0

teris.css

*{

margin:0;

padding:0;

}

html, body{

width:100%;

height:100%;

}

.bg{

font-size:13pt;

background-color:rgb(239, 239, 227);

/*好看的渐变色*/

background-image:radial-gradient(rgb(239, 239, 227), rgb(230, 220, 212));

/*阴影*/

box-shadow:#cdc8c1 -1px -1px 7px 0px;

padding-bottom:4px;

}

.ui_bg{

border-bottom:1px #a69e9ea3 solid;

padding-bottom:2px;

overflow:hidden;/*没有这句的话因为子div都设置了float，所以是浮在网页上的，所以父div就没有高度，这句清除了浮动，让父div有了子div的高度*/

}

然后是重头戏，teris.js

游戏变量

//游戏设定

var TETRIS_ROWS = 20;

var TETRIS_COLS = 14;

var CELL_SIZE = 24;

var NO_BLOCK=0;

var HAVE_BLOCK=1;

// 定义几种可能出现的方块组合

var blockArr = [

// Z

[

{x: TETRIS_COLS / 2 - 1 , y:0},

{x: TETRIS_COLS / 2 , y:0},

{x: TETRIS_COLS / 2 , y:1},

{x: TETRIS_COLS / 2 + 1 , y:1}

],

// 反Z

[

{x: TETRIS_COLS / 2 + 1 , y:0},

{x: TETRIS_COLS / 2 , y:0},

{x: TETRIS_COLS / 2 , y:1},

{x: TETRIS_COLS / 2 - 1 , y:1}

],

// 田

[

{x: TETRIS_COLS / 2 - 1 , y:0},

{x: TETRIS_COLS / 2 , y:0},

{x: TETRIS_COLS / 2 - 1 , y:1},

{x: TETRIS_COLS / 2 , y:1}

],

// L

[

{x: TETRIS_COLS / 2 - 1 , y:0},

{x: TETRIS_COLS / 2 - 1, y:1},

{x: TETRIS_COLS / 2 - 1 , y:2},

{x: TETRIS_COLS / 2 , y:2}

],

// J

[

{x: TETRIS_COLS / 2 , y:0},

{x: TETRIS_COLS / 2 , y:1},

{x: TETRIS_COLS / 2 , y:2},

{x: TETRIS_COLS / 2 - 1, y:2}

],

// □□□□

[

{x: TETRIS_COLS / 2 , y:0},

{x: TETRIS_COLS / 2 , y:1},

{x: TETRIS_COLS / 2 , y:2},

{x: TETRIS_COLS / 2 , y:3}

],

// ┴

[

{x: TETRIS_COLS / 2 , y:0},

{x: TETRIS_COLS / 2 - 1 , y:1},

{x: TETRIS_COLS / 2 , y:1},

{x: TETRIS_COLS / 2 + 1, y:1}

]

];

// 记录当前积分

var curScore=0;

// 记录曾经的最高积分

var maxScore=1;

var curSpeed=1;

//ui元素

var curSpeedEle=document.getElementById("cur_speed");

var curScoreEle=document.getElementById("cur_points");

var maxScore