javascript实现2048小游戏

最新推荐文章于 2023-11-14 11:38:02 发布

周朝兵

最新推荐文章于 2023-11-14 11:38:02 发布

阅读量1.3k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/m0_45251955/article/details/103169545

版权

本文详细介绍了使用JavaScript实现2048小游戏的过程，包括分析界面构成和实现主要功能。首先，通过HTML创建4x4的游戏棋盘，并用CSS调整样式。接着，JavaScript部分涉及数据存储、分数计算和游戏状态判断，代码注释清晰易懂。最后，提及游戏可移植到移动端的可能性。

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

2048这种小游戏我相信大多数人都应该玩过，是一款非常经典的益智类小游戏。那么接下来，我们就来看看这款游戏是怎么实现的，如何才能写出这样的游戏。

1、分析界面构成

观察2048游戏的界面可以看出，整体是一个大盒子包裹着，在其中有4x4的小方格，每个方格还有间距，随着移动，还会出现不同的小方格，不同的数字对应的方格背景颜色也不同。当游戏结束时还会弹出一个遮罩层，阻止用户继续游戏。
基本上界面上的就这几种情况，现在我们来试着写一下HTML的界面：

<body>
	<div class="header">
		<div class="siz">
			<h1>2048</h1>
		</div>
		<div class="count">
			<span>SCORE:</span>
			<span class="score-1" id="score-01">0</span>
		</div>
		<!-- <div class="count-1">
			<span>BEST:</span>
			<span>0</span>
		</div> -->
		<div class="count-2">
			<a href="javascript:game.start()">新游戏</a>
		</div>
	</div>

	<div class="deom">
		<div class="cent" id="c00"></div>
		<div class="cent" id="c01"></div>
		<div class="cent" id="c02"></div>
		<div class="cent" id="c03"></div>

		<div class="cent" id="c10"></div>
		<div class="cent" id="c11"></div>
		<div class="cent" id="c12"></div>
		<div class="cent" id="c13"></div>

		<div class="cent" id="c20"></div>
		<div class="cent" id="c21"></div>
		<div class="cent" id="c22"></div>
		<div class="cent" id="c23"></div>

		<div class="cent" id="c30"></div>
		<div class="cent" id="c31"></div>
		<div class="cent" id="c32"></div>
		<div class="cent" id="c33"></div>
	</div>
	<div class="buttons" id="buttons1"></div>
	<div class="buttons-1" id="buttons2">
		<p>GAME OVER!</p>
		<p>SCORE:<span id="score-02">0</span></p>
		<a href="javascript:game.start()" class="cvcv">再来一次</a>
	</div>
<script type="text/javascript" src="2048.js"></script>
</body>

在这个界面中一个大的div将16个小的div包裹起来，采用二维数组的思想，将每个div都给个id，这样方便后面查找，最后出现的遮罩层也用一个div，将它设置为全屏半透明，最后给个提示，以及显示的分数，当然，这些可以根据自己的喜好来进行修改，方法并不是唯一的，只有更好的。
大致布局出来以后只需要在css中进行修改了，css代码如下：

body{
   
	overflow-y: hidden;
    overflow-x: hidden;
    background-color: #bbb0b3;
}
a{
   
	text-decoration: none;
	color: #ffffff;
}
.cvcv{
   
	color: #aaa;
}
.deom{
   
	width: 900px;
	height: 900px;
	/*border: 1px solid #333;*/
	background-color: #bbada0;
	margin: 0 auto;
	margin-top: 250px;
	/*position: absolute;*/
}
.cent{
   
	width: 200px;
	height: 200px;
	background-color: