用html、css、js实现2048小游戏

最新推荐文章于 2024-03-29 12:03:24 发布

nfzhlk

最新推荐文章于 2024-03-29 12:03:24 发布

阅读量1.5k

点赞数

分类专栏：技术干货

本文链接：https://blog.csdn.net/nfzhlk/article/details/84015415

版权

用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:
					this.moveRight();
					break;
					case 40:

最低0.47元/天解锁文章

nfzhlk

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
用html、css、js实现2048小游戏

用html、css、js实现2048小游戏最近在学习H5的相关知识，为了检验下学习效果，尝试着对小游戏2048进行了实现，本来还觉得学的已经不错了，但是真是做的时候真是应了那句话–书到用时方恨少，绝知此事要躬行！
复制链接

扫一扫