2048小游戏

2048是前端开发必经的一个小游戏，2048小游戏包含了HTML，CSS和JavaScript。

简介

《2048》，是一款益智小游戏，这款游戏是由年仅19岁的意大利程序员加布里勒希鲁尼（Gabriele Cirulli）开发出来的，官方版本只能在网页上或通过其移动网站运行。 2048游戏共有16个格子，初始时会有两个格子上安放了两个数字2，每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢外，系统也会在空白的地方随即出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。系统给予的数字方块不是2就是4，玩家要想办法在这小小的16格范围中凑出“2048”这个数字方块。

效果图

游戏结束弹出遮罩层显示

代码部分

首先是html部分

<p class="grade">分数：<span id="score01">999999999</span> </p><div class="all"><div class="cell n2" id="c00">2</div><div class="cell n4" id="c01">4</div><div class="cell n8" id="c02">8</div><div class="cell n16" id="c03">16</div><div class="cell n32" id="c10">32</div><div class="cell n64" id="c11">64</div><div class="cell n128" id="c12">128</div><div class="cell n256" id="c13">256</div><div class="cell n512" id="c20">512</div><div class="cell n1024" id="c21">1024</div><div class="cell n2048" id="c22">2048</div><div class="cell n4096" id="c23">4096</div><div class="cell n8192" id="c30">8192</div><div class="cell" id="c31"></div><div class="cell" id="c32"></div><div class="cell" id="c33"></div></div><div class="gameover"><p>游戏结束！<br> 分数：<span id="score02">999999999</span> <br><a href="">再来一次</a></p></div>

html样式部分代码

* {padding: 0;margin: 0;font-family: Arial;text-decoration: none;
}body {background-color: #FAF8EF;
}.grade {width: 500px;margin: 0 auto;margin-top: 50px;font-size: 40px;text-align: center;font-weight: bold;color: #776E65;
}.all {width: 500px;height: 500px;margin: auto;background-color: #BBADA0;border-radius: 10px;
}.cell {width: 100px;height: 100px;margin-top: 20px;margin-left: 20px;background-color: #ccc0b3;float: left;border-radius: 5px;font-size: 24px;font-weight: bold;color: #776E65;line-height: 100px;text-align: center;
}.n2 {background-color: #eee3da;
}.n4 {background-color: #ede0c8;
}.n8 {background-color: #f2b179;
}.n16 {background-color: #f59563;
}.n32 {background-color: #f67c5f;
}.n64 {background-color: #f65e3b;
}.n128 {background-color: #edcf72;
}.n256 {background-color: #edcc61;
}.n512 {background-color: #9c0;
}.n1024 {background-color: #33b5e5;
}.n2048 {background-color: #09c;
}.n4096 {background-color: #a6c;
}.n8192 {background-color: #93c;
}.gameover {display: none;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.3);
}.gameover p {width: 400px;height: 300px;background-color: white;position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -200px;border: solid 1px black;border-radius: 10px;font-size: 40px;line-height: 100px;text-align: center;
}.gameover p a {background-color: #8F7A66;border-radius: 5px;padding: 15px;color: white;
}

下面是2048核心js代码了

var game = {data: [], //存放数据score: 0, //分数status: 0, //当前状态，时刻的监听，时刻的需要改变      游戏运行中的状态，结束的状态gameover: 0,gamerunning: 1,start: function() {}randomNum: function() {}dataView: function() {}isgameover: function() {}moveLeft: function() {}moveLeftInRow: function(r) {} //单独处理每一行的逻辑getNextInRow: function(r, c) {}moveRight: function() {}moveRightInRow: function(r) { }//单独处理每一行的逻辑getNextInRowa: function(r, c) {}moveTop: function() {}moveTopInRow: function(c) {}getNextInRowaa: function(r, c) {}moveButtom: function() {}moveButtomInRow: function(c) {}getNextInRowaaa: function(r, c) {}}

开始写各个函数

开始游戏的方法

start: function() {this.score = 0;this.data = [[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]]this.status = this.gamerunning;this.randomNum()this.randomNum()this.dataView()}

随机数的方法，随机生成数字

randomNum: function() {for (;;) {var r = Math.floor(Math.random() * 4);var c = Math.floor(Math.random() * 4);if (this.data[r][c] == 0) {var num = Math.random() > 0.2 ? 2 : 4;this.data[r][c] = num;break;}}}

实时更新的视图

dataView: function() {for (var r = 0; r < 4; r++) {for (var c = 0; c < 4; c++) {var div = document.getElementById('c' + r + c);if (this.data[r][c] != 0) {div.innerHTML = this.data[r][c];div.className = 'cell n' + this.data[r][c]} else {div.innerHTML = ''div.className = 'cell'}}}document.getElementById('score01').innerHTML = this.score; //设置游戏分数// 监测游戏状态if (this.status == this.gameover) {document.getElementById('score02').innerHTML = this.score;document.getElementsByClassName('gameover')[0].style.display = 'block'} else {document.getElementsByClassName('gameover')[0].style.display = 'none'}}

判断游戏是否结束的方法游戏没结束返回false 结束返回true

isgameover: function() {for (var r = 0; r < 4; r++) {for (var c = 0; c < 4; c++) {// 没有结束，三种情况：：1.数组中还有0 2.左右相邻的有相同的  3.上下相邻有相同的if (this.data[r][c] == 0) {return false}if (c < 3) {if (this.data[r][c] == this.data[r][c + 1]) {return false}}if (r < 3) {if (this.data[r][c] == this.data[r + 1][c]) {return false}}}}return true; //表示游戏已经结束}

左移动

moveLeft: function() {var before = String(this.data) //移动之前//处理移动的逻辑for (var r = 0; r < 4; r++) {this.moveLeftInRow(r);}var after = String(this.data) //移动之后if (before != after) {this.randomNum()if (this.isgameover()) {this.status = this.gameover;}this.dataView()}},moveLeftInRow: function(r) { //单独处理每一行的逻辑for (var c = 0; c < 3; c++) {var nextc = this.getNextInRow(r, c);if (nextc != -1) {if (this.data[r][c] == 0) {this.data[r][c] = this.data[r][nextc];this.data[r][nextc] = 0;c--;} else if (this.data[r][c] == this.data[r][nextc]) {this.data[r][c] *= 2;this.score += this.data[r][c]this.data[r][nextc] = 0}} else {break;}}},getNextInRow: function(r, c) {for (var i = c + 1; i < 4; i++) {if (this.data[r][i] != 0) {return i}}return -1;}

右移动，上移动，下移动和左移动的代码相似

// 右移动moveRight: function() {var before = String(this.data) //移动之前for (var r = 3; r >= 0; r--) {this.moveRightInRow(r);}var after = String(this.data) //移动之后if (before != after) {this.randomNum()if (this.isgameover()) {this.status = this.gameover;}this.dataView()}},moveRightInRow: function(r) { //单独处理每一行的逻辑for (var c = 3; c >= 0; c--) {var nextc = this.getNextInRowa(r, c);if (nextc != -1) {if (this.data[r][c] == 0) {this.data[r][c] = this.data[r][nextc];this.data[r][nextc] = 0;c++;} else if (this.data[r][c] == this.data[r][nextc]) {this.data[r][c] *= 2;this.score += this.data[r][c]this.data[r][nextc] = 0}} else {break;}}},getNextInRowa: function(r, c) {for (var i = c - 1; i >= 0; i--) {if (this.data[r][i] != 0) {return i}}return -1;},// 上移动moveTop: function() {var before = String(this.data) //移动之前for (var c = 0; c < 4; c++) {this.moveTopInRow(c);}var after = String(this.data) //移动之后if (before != after) {this.randomNum()if (this.isgameover()) {this.status = this.gameover;}this.dataView()}},moveTopInRow: function(c) { //单独处理每一列的逻辑for (var r = 0; r < 3; r++) {var nextr = this.getNextInRowaa(r, c);if (nextr != -1) {if (this.data[r][c] == 0) {this.data[r][c] = this.data[nextr][c];this.data[nextr][c] = 0;r--;} else if (this.data[r][c] == this.data[nextr][c]) {this.data[r][c] *= 2;this.score += this.data[r][c]this.data[nextr][c] = 0}} else {break;}}},getNextInRowaa: function(r, c) {for (var i = r + 1; i < 4; i++) {if (this.data[i][c] != 0) {return i}}return -1;},// 下移动moveButtom: function() {var before = String(this.data) //移动之前for (var c = 3; c >= 0; c--) {this.moveButtomInRow(c);}var after = String(this.data) //移动之后if (before != after) {this.randomNum()if (this.isgameover()) {this.status = this.gameover;}this.dataView()}},moveButtomInRow: function(c) { //单独处理每一列的逻辑for (var r = 3; r >= 0; r--) {var nextr = this.getNextInRowaaa(r, c);if (nextr != -1) {if (this.data[r][c] == 0) {this.data[r][c] = this.data[nextr][c];this.data[nextr][c] = 0;r++;} else if (this.data[r][c] == this.data[nextr][c]) {this.data[r][c] *= 2;this.score += this.data[r][c]this.data[nextr][c] = 0}} else {break;}}},getNextInRowaaa: function(r, c) {for (var i = r - 1; i >= 0; i--) {if (this.data[i][c] != 0) {return i}}return -1;},}

调用开始函数

game.start()

绑定键盘上下左右事件（37，38，39，40分别对应键盘左上右下键）

document.onkeydown = function(e) {if (e.keyCode == 37) { game.moveLeft()}if (e.keyCode == 39) {game.moveRight()}if (e.keyCode == 38) {game.moveTop()}if (e.keyCode == 40) {game.moveButtom()}
}

最后，给再来一次绑定事件

zai = function() {game.start()}

以上就是2048小游戏的全部代码。希望大家也可以动手做出这个小游戏玩玩。

整体代码

html–index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/index.css">//引用代码的时候注意路径准确性<link rel="shortcut icon" href="https://www.2048.org/favicon.ico">//添加一个2048小图标<title>2048</title>
</head><body><p class="grade">分数：<span id="score01">000</span> </p><div class="all"><div class="cell n2" id="c00">2</div><div class="cell n4" id="c01">4</div><div class="cell n8" id="c02">8</div><div class="cell n16" id="c03">16</div><div class="cell n32" id="c10">32</div><div class="cell n64" id="c11">64</div><div class="cell n128" id="c12">128</div><div class="cell n256" id="c13">256</div><div class="cell n512" id="c20">512</div><div class="cell n1024" id="c21">1024</div><div class="cell n2048" id="c22">2048</div><div class="cell n4096" id="c23">4096</div><div class="cell n8192" id="c30">8192</div><div class="cell" id="c31"></div><div class="cell" id="c32"></div><div class="cell" id="c33"></div></div><div class="gameover"><p>游戏结束！<br> 分数：<span id="score02">999999999</span> <br><a href="">再来一次</a></p></div><script src="./js/index.js"></script>//引用代码的时候注意路径准确性
</body></html>

css–index.css

* {padding: 0;margin: 0;font-family: Arial;text-decoration: none;
}body {background-color: #FAF8EF;
}.grade {width: 500px;margin: 0 auto;margin-top: 50px;font-size: 40px;text-align: center;font-weight: bold;color: #776E65;
}.all {width: 500px;height: 500px;margin: auto;background-color: #BBADA0;border-radius: 10px;
}.cell {width: 100px;height: 100px;margin-top: 20px;margin-left: 20px;background-color: #ccc0b3;float: left;border-radius: 5px;font-size: 24px;font-weight: bold;color: #776E65;line-height: 100px;text-align: center;
}.n2 {background-color: #eee3da;
}.n4 {background-color: #ede0c8;
}.n8 {background-color: #f2b179;
}.n16 {background-color: #f59563;
}.n32 {background-color: #f67c5f;
}.n64 {background-color: #f65e3b;
}.n128 {background-color: #edcf72;
}.n256 {background-color: #edcc61;
}.n512 {background-color: #9c0;
}.n1024 {background-color: #33b5e5;
}.n2048 {background-color: #09c;
}.n4096 {background-color: #a6c;
}.n8192 {background-color: #93c;
}.gameover {display: none;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.3);
}.gameover p {width: 400px;height: 300px;background-color: white;position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -200px;border: solid 1px black;border-radius: 10px;font-size: 40px;line-height: 100px;text-align: center;
}.gameover p a {background-color: #8F7A66;border-radius: 5px;padding: 15px;color: white;
}

js–index.js

var game = {data: [], //存放数据score: 0, //分数status: 0, //当前状态，时刻的监听，时刻的需要改变      游戏运行中的状态，结束的状态gameover: 0,gamerunning: 1,// 开始游戏的方法start: function() {this.score = 0;this.data = [[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]]this.status = this.gamerunning;this.randomNum()this.randomNum()this.dataView()},// 随机数的方法randomNum: function() {for (;;) {var r = Math.floor(Math.random() * 4);var c = Math.floor(Math.random() * 4);if (this.data[r][c] == 0) {var num = Math.random() > 0.2 ? 2 : 4;this.data[r][c] = num;break;}}},// 更新的视图dataView: function() {for (var r = 0; r < 4; r++) {for (var c = 0; c < 4; c++) {var div = document.getElementById('c' + r + c);if (this.data[r][c] != 0) {div.innerHTML = this.data[r][c];div.className = 'cell n' + this.data[r][c]} else {div.innerHTML = ''div.className = 'cell'}}}document.getElementById('score01').innerHTML = this.score; //设置游戏分数// 监测游戏状态if (this.status == this.gameover) {document.getElementById('score02').innerHTML = this.score;document.getElementsByClassName('gameover')[0].style.display = 'block'} else {document.getElementsByClassName('gameover')[0].style.display = 'none'}},// 判断游戏是否结束的方法   游戏没结束返回false 结束返回trueisgameover: function() {for (var r = 0; r < 4; r++) {for (var c = 0; c < 4; c++) {// 没有结束，三种情况：：1.数组中还有0 2.左右相邻的有相同的  3.上下相邻有相同的if (this.data[r][c] == 0) {return false}if (c < 3) {if (this.data[r][c] == this.data[r][c + 1]) {return false}}if (r < 3) {if (this.data[r][c] == this.data[r + 1][c]) {return false}}}}return true; //表示游戏已经结束},// 左移动moveLeft: function() {var before = String(this.data) //移动之前//处理移动的逻辑for (var r = 0; r < 4; r++) {this.moveLeftInRow(r);}var after = String(this.data) //移动之后if (before != after) {this.randomNum()if (this.isgameover()) {this.status = this.gameover;}this.dataView()}},moveLeftInRow: function(r) { //单独处理每一行的逻辑// 0200   2000// 0220   4000// 2202   4200// 2222   4022  4202  4220   4400for (var c = 0; c < 3; c++) {var nextc = this.getNextInRow(r, c);if (nextc != -1) {if (this.data[r][c] == 0) {this.data[r][c] = this.data[r][nextc];this.data[r][nextc] = 0;c--;} else if (this.data[r][c] == this.data[r][nextc]) {this.data[r][c] *= 2;this.score += this.data[r][c]this.data[r][nextc] = 0}} else {break;}}},getNextInRow: function(r, c) {for (var i = c + 1; i < 4; i++) {if (this.data[r][i] != 0) {return i}}return -1;},// 右移动moveRight: function() {var before = String(this.data) //移动之前for (var r = 3; r >= 0; r--) {this.moveRightInRow(r);}var after = String(this.data) //移动之后if (before != after) {this.randomNum()if (this.isgameover()) {this.status = this.gameover;}this.dataView()}},moveRightInRow: function(r) { //单独处理每一行的逻辑for (var c = 3; c >= 0; c--) {var nextc = this.getNextInRowa(r, c);if (nextc != -1) {if (this.data[r][c] == 0) {this.data[r][c] = this.data[r][nextc];this.data[r][nextc] = 0;c++;} else if (this.data[r][c] == this.data[r][nextc]) {this.data[r][c] *= 2;this.score += this.data[r][c]this.data[r][nextc] = 0}} else {break;}}},getNextInRowa: function(r, c) {for (var i = c - 1; i >= 0; i--) {if (this.data[r][i] != 0) {return i}}return -1;},// 上移动moveTop: function() {var before = String(this.data) //移动之前for (var c = 0; c < 4; c++) {this.moveTopInRow(c);}var after = String(this.data) //移动之后if (before != after) {this.randomNum()if (this.isgameover()) {this.status = this.gameover;}this.dataView()}},moveTopInRow: function(c) { //单独处理每一列的逻辑for (var r = 0; r < 3; r++) {var nextr = this.getNextInRowaa(r, c);if (nextr != -1) {if (this.data[r][c] == 0) {this.data[r][c] = this.data[nextr][c];this.data[nextr][c] = 0;r--;} else if (this.data[r][c] == this.data[nextr][c]) {this.data[r][c] *= 2;this.score += this.data[r][c]this.data[nextr][c] = 0}} else {break;}}},getNextInRowaa: function(r, c) {for (var i = r + 1; i < 4; i++) {if (this.data[i][c] != 0) {return i}}return -1;},// 下移动moveButtom: function() {var before = String(this.data) //移动之前for (var c = 3; c >= 0; c--) {this.moveButtomInRow(c);}var after = String(this.data) //移动之后if (before != after) {this.randomNum()if (this.isgameover()) {this.status = this.gameover;}this.dataView()}},moveButtomInRow: function(c) { //单独处理每一列的逻辑for (var r = 3; r >= 0; r--) {var nextr = this.getNextInRowaaa(r, c);if (nextr != -1) {if (this.data[r][c] == 0) {this.data[r][c] = this.data[nextr][c];this.data[nextr][c] = 0;r++;} else if (this.data[r][c] == this.data[nextr][c]) {this.data[r][c] *= 2;this.score += this.data[r][c]this.data[nextr][c] = 0}} else {break;}}},getNextInRowaaa: function(r, c) {for (var i = r - 1; i >= 0; i--) {if (this.data[i][c] != 0) {return i}}return -1;},}game.start()document.onkeydown = function(e) {if (e.keyCode == 37) {game.moveLeft()}if (e.keyCode == 39) {game.moveRight()}if (e.keyCode == 38) {game.moveTop()}if (e.keyCode == 40) {game.moveButtom()}
}
zai = function() {game.start()}

本次2048小游戏的所有代码就放在这里了,2048的源码我也上传到csdn了,有需要的朋友可以免费下载,如果找不到,可以在评论区留言,我也可以直接发给大家!谢谢！如果代码有什么不足的希望大家及时交流，补充，谢谢大家！

前端小游戏2048（一步步详解附带源代码，源码上传到csdn,可以免费下载）相关推荐

用canvas画飞机大战（一步步详解附带源代码,源码和素材上传到csdn,可以免费下载）
canvas绘图该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形.这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它. 飞机大战前面几期用ca ...
Tkinter模块GUI界面化编程实战（五）——大鱼吃小鱼游戏（含超详解及完整源码、完整程序免费下载链接）
[上期回顾:Tkinter模块GUI界面化编程实战(四)--随机点名小程序] 这篇博客介绍了如何用Python Tkinter模块编写一个界面化的大鱼吃小鱼游戏,在博客下面有完整的源码,源码中有超详细 ...
用canvas画时钟（一步步详解附带源代码）
canvas绘图该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形.这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它. 绘制路径要绘制路径首先 ...
android WebView详解，常见漏洞详解和安全源码（下）
上篇博客主要分析了 WebView 的详细使用,这篇来分析 WebView 的常见漏洞和使用的坑. 上篇:android WebView详解,常见漏洞详解和安全源码(上) 转载请注明出处:http ...
android WebView详解，常见漏洞详解和安全源码（上）
这篇博客主要来介绍 WebView 的相关使用方法,常见的几个漏洞,开发中可能遇到的坑和最后解决相应漏洞的源码,以及针对该源码的解析. 由于博客内容长度,这次将分为上下两篇,上篇详解 WebView ...
生成对抗网络入门详解及TensorFlow源码实现--深度学习笔记
生成对抗网络入门详解及TensorFlow源码实现–深度学习笔记一.生成对抗网络(GANs) 生成对抗网络是一种生成模型(Generative Model),其背后最基本的思想就是从训练库里获取很多 ...
JAVA文件上传详解（附源码）
文章目录 JAVA文件上传详解(附源码) 1.准备工作 2.使用类介绍 FileItem类 ServletFileUpload类 3.代码编写 JAVA文件上传详解(附源码) 在web应用中,文件上传 ...
faster rcnn fpn_Faster-RCNN详解和torchvision源码解读（三）：特征提取
我们使用ResNet-50-FPN提取特征 model = torchvision.models.detection.fasterrcnn_resnet50_fpn(pretrained=True) ...
CNN入门详解及TensorFlow源码实现--深度学习笔记
CNN入门详解及TensorFlow源码实现–深度学习笔记 ##一.卷积神经网络 ###1.简介卷积神经网络是一种前馈神经网络,它的人工神经元可以响应一部分覆盖范围内的周围单元,对于大型图像处理有出 ...

前端小游戏2048（一步步详解附带源代码，源码上传到csdn,可以免费下载）