2023-04-14 使用纯JS实现一个2048小游戏

VIP文章前端OnTheRun

已于 2023-05-19 17:29:03 修改

阅读量1.6k

点赞数 4

分类专栏：项目与应用 js 文章标签： javascript 前端 css 游戏 2048

于 2023-04-14 21:36:33 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/130162311

版权

文章目录

一.实现思路

1.2048的逻辑

一共有16个格子,开局5个随机格子上生成带数字的方块,2或者4
通过控制方向来使原有的方块移动并产生新的方块

2.移动操作的过程中会有三种情况

方块移动的方向没有其他方块
方块移动的方向有其他方块,但数字不同
方块移动的方向有其他方块,且数字相同

二.代码部分:分为初始化部分和移动部分

1.初始化部分

新建一个4X4二维数组,存储16个方块的值,
分两个步骤生成第一个和第二个方块

1.1.生成第一个方块:

用0-15的随机数代表第几个数组元素上面生成第一个方块块的值(值为2或者4),其余的值为0
具体生成2或者4,设置为随机,其中2的概率高一些,4的概率低一些,比如:
0-10之间,若随机值为0,生成2,否则生成4,比例:10:1

1.2.生成第二个方块:

为什么第二个方块(以及其他所有后续的方块)不能使用上述方法?
因为如果两次生成的随机数一样,那么就会出现bug:
同一位置产生两个值
第二个方块如何生成?
先获取16个格子中,空格的个数,也就是二维数组中0的个数
以空格的个数作为循环的次数

2.移动过程部分:

移动过程是根据输入的方向来控制方块的移动的

首先获取输入的状态,即玩家操作的上下左右键
其次,移动的控制逻辑是:
- 遍历二维数组,找到每一个方块(以左移动为例)
  由于第一列无需移动,只从每一行的第二个方块开始判断
  (若第一个方块不存在:交换值,并让交换的原位置的值清0
- 若当前方块的紧邻左方块和当前方块,两者的值相同,那么左边的值变为原来的两倍,当前方块的值清0
- 若当前方块的紧邻左方块看和当前方块,两者的值不同,不作处理,不移动

三.实现代码

1.HTML部分

结构:分数实时显示,4X4的2048游戏页面,如果游戏结束,则弹出结算框
快捷键:div#all>div.cell#n0$@0*4+div.cell#n1$@0*4+div.cell#n2$@0*4+div.cell#n3$@0*4
代码:2048.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>2048小游戏</title>
	<link rel="stylesheet" href="2048.css" />
</head>
<body>
	<!--分数-->
	<p class="header">SCORE: <span id="score01"></span></p>
	<!--游戏部分-->
	
	<div id="all">
		<!--第一行-->
		<div class="cell"  id="n00"></div>
		<div class="cell"  id="n01"></div>
		<div class="cell"  id="n02"></div>
		<div class="cell"  id="n03"></div>
		<!--第二行-->
		<div class="cell"  id="n10"></div>
		<div class="cell"  id="n11"></div>
		<div class="cell"  id="n12"></div>
		<div class="cell"  id="n13"></div>
		<!--第三行-->
		<div class="cell"  id="n20"></div>
		<div class="cell"  id="n21"></div>
		<div class="cell"  id="n22"></div>
		<div class="cell"  id="n23"></div>
		<!--第四行-->
		<div class="cell"  id="n30"></div>
		<div class="cell"  id="n31"></div>
		<div class="cell"  id="n32"></div>
		<div class="cell"  id="n33"></div>
	</div>
	<!--弹框-->
	<div id="gameover" >
		<p>
			GAME OVER
			<br />
			SCORE:<span id="score02"></span>
			<br />
			<a onclick="typeonce()">TYPE AGAIN</a>
		</p>
		
	</div>
	<script type="text/javascript" src="2048.js" ></script>
</body>
</html>

2.CSS部分

2038.css:每一个数量级的格子会获得相应的颜色

*{
   
  font-family: arial;
  /*	user-select: none;*/
  font-weight: bold;
  }
  
  .header{
   
  width: 480px;
  font-size:40px ;
  margin: 60px auto 5px auto;
  }
  
  #score01{
   
  color: #F00;
  }
  
  #all{
   
  width: 480px;
  height: 480px;
  background-color: #bbada0;
  margin: 0 auto;
  border-radius: 20px;
  }
  
  .cell{
   
  width: 100px;
  height: 100px;
  background-color: #ccc0b3;;
  border-radius: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  color: #fff;
  float: left;
  margin: 16px 0px 0px 16px;
  
  }
  
  .n2{
   
  background-color:#eee3da;
  color:#776e65;
  }
  .n4{
   
  background-color:#ede0c8;
  color:#776e65;
  }
  .n8{
   
  background-color:#f2b179;
  }
  .n16{
   
  background-color:#f59563;
  }
  .n32{
   
  background-color:#f67c5f;
  }
  .n64{
   
  background-color:#f65e3b;
  }
  .n128{
   
  background-color:#edcf72;

最低0.47元/天解锁文章

前端OnTheRun

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
2023-04-14 使用纯JS实现一个2048小游戏

一.实现思路1.2048的逻辑2.移动操作的过程中会有三种情况二.代码部分:分为初始化部分和移动部分1.初始化部分1.1.生成第一个方块:1.2.生成第二个方块:2.移动过程部分:三.实现代码1.HTML部分2.CSS部分3.JS部分3.1.game对象的属性3.2.game对象的start方法3.3.game对象的randomNum方法3.4.game对象的dataView方法3.5.game对象的isGameOver方法3.6.game对象中设置移动的方法(以左移动为例
复制链接

扫一扫