2048小游戏逻辑代码（易懂）

王小喵打怪兽

于 2021-12-19 18:57:46 发布

阅读量3.1k

点赞数 1

文章标签： jquery css3 javascript

本文链接：https://blog.csdn.net/cmh1999_12_19/article/details/122027263

版权

本文通过jQuery详细讲解2048游戏的逻辑实现，包括HTML、CSS和JavaScript代码，虽然样式简单，但游戏逻辑清晰。提供完整代码，可直接运行，附带关键操作方法解释。

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

2048主要是逻辑清晰，我这个是jQuery写的，但是不管是什么用什么写，其实都是这个逻辑
代码没有删减，复制粘贴即可运行

这就是做好的样子：
在这里插入图片描述

样式有点丑，但是问题不大
这个游戏大家应该都玩过，在这我就不介绍2048的玩法了

首先上html代码

<div id="div1">
			<center>
			<input type="button" id="butt" value="新游戏"/>
			<p>分数:<span id="score"></span></p>
			</center>
		</div>
		<div class="game">
		    <div class="gride-cell" id="gride0"></div>
			<div class="gride-cell" id="gride1"></div>
			<div class="gride-cell" id="gride2"></div>
			<div class="gride-cell" id="gride3"></div>
			<div class="gride-cell" id="gride4"></div>
			<div class="gride-cell" id="gride5"></div>
			<div class="gride-cell" id="gride6"></div>
			<div class="gride-cell" id="gride7"></div>
		    <div class="gride-cell" id="gride8"></div>
		    <div class="gride-cell" id="gride9"></div>
		    <div class="gride-cell" id="gride10"></div>
		    <div class="gride-cell" id="gride11"></div>
		    <div class="gride-cell" id="gride12"></div>
		    <div class="gride-cell" id="gride13"></div>
		    <div class="gride-cell" id="gride14"></div>
		    <div class="gride-cell" id="gride15"></div>
		</div>

因为有少量的 jQuery 代码，记得引入jQuery.js

css样式

p{
   
	font-size: 30px;
}
input{
   
	width: 100px;
	padding: 10px 10px;
	background-color: #877360;
	color: white;
	border-radius: 10px;
	outline: none;
}