⽤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
实现特效的代码js
[
{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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。