如何用JS实现2048

最新推荐文章于 2022-05-15 17:16:51 发布

香蕉芭辣

最新推荐文章于 2022-05-15 17:16:51 发布

阅读量1.1k

点赞数 4

文章标签： 2048小游戏

本文链接：https://blog.csdn.net/weixin_44049725/article/details/103348034

版权

这篇博客分享了作者在学习前端JS时制作2048小游戏的过程。首先通过HTML构建4x4的游戏界面和计分板，接着介绍了CSS和JS代码实现的具体细节，最后展示了游戏的页面效果。

摘要由CSDN通过智能技术生成

以下是我自己在学习前段技术的js阶段中，自己用js来写的一个2048的小游戏，具体的代码以及介绍如下：
首先我们得在页面中去将我们的游戏界面用html构建出来，创建一个4x4的九宫格，同时添加一个累计成绩的计分板。

效果链接入口

页面效果如下图：
在这里插入图片描述
HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2048小游戏</title>
	<link rel="stylesheet" href="index_2048.css">  //引入外部CSS文件
</head>
<body>
	<div class="marg">
		<p>SCORE:<span id="score01">0</span></p>  //创建累加分数的计分板
		<div class="main">                       //包裹整个界面的外层盒子，内部添加4行4列的格子
			<div class="cell" id="c00"></div>
			<div class="cell" id="c01"></div>
			<div class="cell" id="c02"></div>
			<div class="cell" id="c03"></div>

			<div class="cell" id="c10"></div>
			<div class="cell" id="c11"></div>
			<div class="cell" id="c12"></div>
			<div class="cell" id="c13"></div>
			
			<div class="cell" id="c20"></div>
			<div class="cell" id="c21"></div>
			<div class="cell" id="c22"></div>
			<div class="cell" id="c23"></div>

			<div class="cell" id="c30"></div>
			<div class="cell" id="c31"></div>
			<div class="cell" id="c32"></div>
			<div class="cell" id="c33"></div>
		</div>
		<div class="gameover" id="gameover">        //创建一个游戏结束时的遮罩层
			<div class="over">
				<p>GAME OVER!!!</p>
				<p>SCORE:<span id="score02"></span></p>
				<a href="javascript:game.start()">try again!</a>
			</div>
		</div>
	</div>
    <script src="index_2048.js"></script> //引入外部js文件
</body>
</html>

CSS代码如下：

//去掉浏览器缺省的样式
*{
     
	margin: 0;
	padding: 0;
	box-sizing:border-box;	
}

//设置最外层大盒子的样式
.marg

最低0.47元/天解锁文章

香蕉芭辣

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫