用html、css、js实现2048小游戏
最近在学习H5的相关知识,为了检验下学习效果,尝试着对小游戏2048进行了实现,本来还觉得学的已经不错了,但是真是做的时候真是应了那句话–书到用时方恨少,绝知此事要躬行!?
为了测试下对基础知识的掌握程度,没有使用现成的框架,如jQuery等,这个小游戏只用了基础的html、css和js。
实现该游戏的思路是,首先将静态页面画出来,我只做了最基础的4 x 4版本的。然后对单元格的左移、右移、上移和下移添加响应事件。如下图所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048</title>
<link rel="stylesheet" href="my2048.css">
</head>
<body>
<header>
<h1 class="title">2048 Games</h1>
</header>
<p>SCORE:<span id="score">0</span></p>
<!--从左上角开始,前面是列,后面是行-->
<div id="game2048">
<div class="grid-cell" id="grid-cell-0-0"></div>
<div class="grid-cell" id="grid-cell-0-1"></div>
<div class="grid-cell" id="grid-cell-0-2"></div>
<div class="grid-cell" id="grid-cell-0-3"></div>
<div class="grid-cell" id="grid-cell-1-0"></div>
<div class="grid-cell" id="grid-cell-1-1"></div>
<div class="grid-cell" id="grid-cell-1-2"></div>
<div class="grid-cell" id="grid-cell-1-3"></div>
<div class="grid-cell" id="grid-cell-2-0"></div>
<div class="grid-cell" id="grid-cell-2-1"></div>
<div class="grid-cell" id="grid-cell-2-2"></div>
<div class="grid-cell" id="grid-cell-2-3"></div>
<div class="grid-cell" id="grid-cell-3-0"></div>
<div class="grid-cell" id="grid-cell-3-1"></div>
<div class="grid-cell" id="grid-cell-3-2"></div>
<div class="grid-cell" id="grid-cell-3-3"></div>
</div>
</body>
</html>
总共16个单元格,每个单元格定义自己的id号,id号是唯一的。这16个单元格属于同一个class
建一个样式表,如my2048.css文件,里面设置如下:
body{
margin:0;
padding:20px;
background-color:#5c5956;
}
header{
width:100%;
margin:0 auto;
display:block;
text-align:center;
}
.title{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
}
#game2048{
width: 460px;
height: 460px;
padding: 20px;
margin: 30px auto;
background-color: #d1ae8c;
border-radius: 10px;
position: relative;
}
.grid-cell{
width: 100px;
height: 100px;
border-radius: 12px;
background-color: #ccc0b3;
font-size:60px;
text-align:center;
position: absolute;
}
[id^="grid-cell-0"]{top:16px}
[id^="grid-cell-1"]{top:132px}
[id^="grid-cell-2"]{top:248px}
[id^="grid-cell-3"]{top:364px}
[id$="-0"]{left:16px}
[id$="-1"]{left:132px}
[id$="-2"]{left:248px}
[id$="-3"]{left:364px}
这样,打开上面的html文件,则可以看到2048小游戏的静态页面了。
对单元格的移动添加响应事件,在my2048.js中,如下图所示:
//keyCode 37 = Left keyCode 38 = Up keyCode 39 = Right keyCode 40 = Down
document.onkeydown = function (e){
if(this.state == this.RUNNING){
switch (e.keyCode){
case 37:
this.moveLeft();
break;
case 38:
this.moveUp();
break;
case 39: