经典小游戏2048 代码教学

2048的玩法：

使用方向键移动方块，两个数字相同的方块撞在一起后，将会合并为一个数字是原来两倍的新方块!
在手机上可以滑动屏幕来移动方块！

html代码部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/0710.css">
</head>
<body><div class="container"><div class="message"><span class="span0">游戏说明：</span>移动数字方块，相邻的两个数字方块相同，可合成一块！</div><div class="box"><p class="pp">Score:<span id="span1">0</span></p><button id="btn-start">开始游戏</button></div><div class="bgall"><!--第一行--><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><div class="gameover" id="gameover"><p>GameOver!<br>Score:<span id="span2">0</span><br /><a href="#">Try Again!</a></p></div><script src="js/0710.js"></script>
</body>
</html>

css样式

*{padding: 0;margin: 0;font-family: "Arvo", Helvetica, sans-serif;font-family: 12px;}
.container{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
.message{border-top: 1px solid black;border-bottom: 1px solid black;padding: 25px 0;
}
.span0{font-weight: bolder;
}
.bgall{width: 480px;height: 480px;margin:0 auto;position: relative;background-color: #9a9a95;border-radius: 10px;opacity: 0.7;
}
.box{
width: 480px;margin: 0 auto;height: 70px;
}
.pp{font-size: 45px;font-weight: bold;display: inline-block;width: 250px;
}
/*开始游戏*/
button:nth-of-type(1){margin-left: 123px;border-radius: 5px;background-color: skyblue;width: 100px;height: 40px;color: white;border: none;font-size: 17px;
}
/*分数*/
#span1{color: pink;
}
/*每个小方块的统一样式*/
.cell{width: 100px;height: 100px;border-radius: 6px;/*position: absolute;*/margin-top: 16px;margin-left: 16px;float: left;background-color: #F8FFE5;font-size: 40px;text-align: center;color: #fff;line-height: 100px;
}.n2{background-color:#FFC43D}
.n4{background-color:#EF476F}
.n8{background-color:#1B9AAA}
.n16{background-color:#06D6A0}
.n32{background-color:#f37694}
.n64{background-color:#22c2d6}
.n128{background-color:#17f8be}
.n256{background-color:#ffd470}
.n512{background-color:#eb184a}
.n1024{background-color:#14727e}
.n2048{background-color:#05a47b}
.n4096{background-color:#a6c}
.n8192{background-color:#93c}
.n2,.n4{color:#F8FFE5}
.n1024,.n2048,.n4096,.n8192{font-size:40px}/*游戏结束*/
.gameover{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: rgba(55,55,55,.5);display: block;}
.gameover>p{width: 300px;height: 200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #fff;/*外边距调整宽和高的一半，保证元素在页面正中间显示*//* margin-top: -257px;margin-left: -150px; */text-align: center;line-height: 1.5em;border-radius: 10px;border:1px solid #edcf72;font-size: 42px;
}
a{text-decoration: none;color: pink;
}
#span2{color: red;
}

js部分

var game = {data:[],    	//存放数据status:0, 		//当前游戏状态score: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.updateView();// 给键盘按下事件绑定事件处理函数document.onkeydown = function(evert){var e = evert || window.evert;//兼容性switch (e.keyCode) {case 37:this.moveLeft();break;case 39:this.moveRight();break;case 38:this.moveUp();break;case 40:this.moveDown();break;}}.bind(this);//不改变this指向的话 this是指向document// remove();},// 生成随机数randomNum:function(){while(true){var r = Math.floor(Math.random()*4);var c = Math.floor(Math.random()*4);// 如果当前位置是0，随机生成2，当前位置值为随机生成的2if(this.data[r][c] == 0){var num = 2;this.data[r][c] = num;break;}}},// 更新视图updateView:function(){// 循环遍历每个位置for(var r = 0;r < 4;r++){for(var c = 0; c < 4;c++){// 获取当前div的位置var div = document.getElementById("c" + r + c);// 如果当前位置的数字不是0，获取的div的内容等于这个数// 且div的类名为cell n+这个数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("span1").innerHTML = this.score;// 监测游戏状态// 如果游戏状态等于游戏结束状态 游戏结束弹框显示，分数等于当前分数if(this.status == this.gameover){document.getElementById("span2").innerHTML = this.score;document.getElementById("gameover").style.display = "block";}else{//否则隐藏document.getElementById("gameover").style.display = "none";}},// 判断游戏是否结束，游戏没有结束返回false，游戏结束返回trueisgameover:function(){for(var r = 0;r < 4;r++){for(var c = 0; c < 4;c++){// 没有结束，3种情况  // 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);// 如果移动前不等于移动后，随机位置生成2  更新视图if(before != after){this.randomNum();// 如果游戏状态是游戏结束   更改游戏状态if(this.isgameover()){this.status = this.gameover;}this.updateView();}},// 单独处理每一行的逻辑moveLeftInRow : function(r){// 循环每一列for(var c = 0;c < 3;c++){var nextc = this.getNextInRow(r,c);// 如果找到了下一个不为0的位置if(nextc != -1){// 如果当前位置为0  这个位置和下一个不为0 的交换数字 //如果当前位置数等于下一个位置数  当前位置数*2 分数增加 下一个位置数变为0if(this.data[r][c] == 0){this.data[r][c] = this.data[r][nextc];this.data[r][nextc] = 0;// c留在原地 等待下一次可能的计算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++){// 如果当前位置数字不等于0 返回这个数字if(this.data[r][i] != 0){return i}}// 等于0  没找到 返回-1return -1},// 右移动moveRight:function(){// 移动之前var before = String(this.data);// 移动逻辑   循环四行for(var r = 0;r < 4;r++){this.moveRightInRow(r);}// 移动之后var after = String(this.data);// 如果移动前不等于移动后，随机位置生成2  更新视图if(before != after){this.randomNum();// 如果游戏状态是游戏结束   更改游戏状态if(this.isgameover()){this.status = this.gameover;}this.updateView();}},// 单独处理每一行的逻辑moveRightInRow : function(r){// 循环每一列for(var c =3;c > 0;c--){var prev = this.getPrevInRow(r,c);// 如果找到了上一个不为0的位置if(prev != -1){// 如果当前位置为0  这个位置和上一个不为0 的交换数字 //如果当前位置数等于上一个位置数  当前位置数*2 分数增加 上一个位置数变为0if(this.data[r][c] == 0){this.data[r][c] = this.data[r][prev];this.data[r][prev] = 0;// c留在原地 等待下一次可能的计算c++;}else if(this.data[r][c] == this.data[r][prev]){this.data[r][c] *= 2;this.score += this.data[r][c]this.data[r][prev] = 0;}}else{// 没找到 跳出break;}}},// 当前位置的上一个位置getPrevInRow : function(r,c){   // 循环上一个位置for(var i = c - 1;i >= 0;i--){// 如果当前位置数字不等于0 返回这个数字if(this.data[r][i] != 0){return i}}// 等于0  没找到 返回-1return -1},//上移moveUp(){var before = new String(this.data);for(var c = 0;c < 4;c++){//从c列开始this.moveUpInRow(c);}var after = String(this.data);if(before != after){this.randomNum();if (this.isgameover()) {this.status = this.gameover;}this.updateView();}},moveUpInRow(c){//上移操作for(var r = 0;r < 3;r++){// 查找c列r行不为0的var up = this.getUpInRow(r,c);if(up != -1){//如果找到// 如果r位置的值是0if(this.data[r][c] == 0){// 将up位置的值赋值给r位置this.data[r][c] = this.data[up][c];// 将up位置的值置为0this.data[up][c] = 0;// r留在原地 等待下一次可能的计算r--;}else if(this.data[r][c] == this.data[up][c]){// 否则,如果r位置的值等于nextc位置的值// 将r位置的值*2this.data[r][c] *= 2;// 将up位置的值置为0 this.data[up][c] = 0;this.score += this.data[r][c];}}else{// 如果没找到break;}//退出循环}},getUpInRow(r,c){//下一个for(var i = r + 1;i < 4;i++){//如果不为0，表示找到，就返回i，i对应的格子的几个位置if(this.data[i][c] != 0){return i;}}return -1;//找不到 给一个状态 用-1表示该方法的返回},moveDown(){//下移var before = String(this.data);for(var c = 0; c < 4;c++){this.moveDownInRow(c);//找每一列不为0的位置}var after = String(this.data);if(before != after){this.randomNum();this.updateView();}},moveDownInRow(c){//下移操作for(var r = 3;r > 0;r--){var Down = this.getDownInRow(r,c);//找到下一个数if(Down != -1){// 如果r位置的值是0if(this.data[r][c] == 0){// 将up位置的值赋值给r位置this.data[r][c] = this.data[Down][c];// 将up位置的值置为0this.data[Down][c] = 0;// r留在原地 等待下一次可能的计算r++;}else if(this.data[r][c] == this.data[Down][c]){// 否则,如果r位置的值等于nextc位置的值// 将r位置的值*2this.data[r][c] *= 2;// 将up位置的值置为0 this.data[Down][c] = 0;this.score += this.data[r][c];}}else{// 如果没找到break;}//退出循环}},getDownInRow(r,c){for(var i = r - 1;i >= 0;i--){if(this.data[i][c] != 0){return i;}}return -1;}}document.getElementById("btn-start").onclick = function(){game.start();
}

大家一步一步来写，看注释，分析。这个是在电脑上玩的，下次我们来教如何把2048小游戏打包成手机APP;

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

计网知识点总结（应用层）
学习总结，参考《TCP/IP详解：卷一》和乾颐堂明教教主计网课程。应用层问题 0：DNS 的概念，用途，DNS 查询的实现算法  概念 o 域名解析，www.xxx.com 转换成 ip，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的 ip 地址 o DNS 协议运行在 UDP 协议之…...
2024/4/9 18:48:07
Python - 获取指定目录下的所有文件和文件夹
文章目录Python - 获取指定目录下的所有文件和文件夹1、代码 Python - 获取指定目录下的所有文件和文件夹1、代码 import os# 获取指定目录下的所有文件夹和文件 def foreach(base_dir):rel_dirs = []rel_filenames = []for parent, dirnames, filenames in os.walk(base_dir):…...
2024/4/9 19:15:57
爬虫_解析页面_拆分字段存入不同key
爬虫_解析页面_拆分字段存入不同key需求：思路：需求：存到字典中最后想要的效果，data[“author”] = 佚名，data[“source”] = 转化医学网，data[date] = 2020-07-13 思路：建一个字典，分别将作者和 author 对应上例：dict1 = {“作者”:“author”,“来源”:“source”…...
2024/4/9 19:15:55
Spring IOC原理及好处
Spring IOC原理及好处再加上之前看的视频的笔记，结合着看会理解的更好。设计模式7大原则为什么会有人说设计模式已死呢，因为spring这些框架帮你做好了类和对象的管理，让你写代码的时候只专注于你实现的功能，而不是设计。先来看看设计模式的7大原则：开放-封闭原则单一职…...
2024/4/18 1:39:28
Python----分类算法（决策树，随机森林）
决策树：信息熵的计算：条件熵的计算：API:•class sklearn.tree.DecisionTreeClassifier(criterion=’gini’, max_depth=None,random_state=None)•决策树分类器•criterion:默认是’gini’系数，也可以选择信息增益的熵’entropy’•max_depth:树的深度大小•random_state:随…...
2024/4/13 0:27:42
13-Web安全——基于sql server的布尔盲注，时间盲注
SQL Server的注入方式和MYSQL注入的原理上是相通的，关于布尔盲注和时间盲注可参考的文章：4-Web安全——SQL盲注使用布尔盲注获取数据库名：id=1 and ascii(substring(db_name(),1,1))>80 --+使用二分法对数据库名进行猜解，第一个字符的ascii码值是115，正好是字母s：举例…...
2024/4/12 17:08:03
13.element的checkbox的多选框失效，选一个就都选中了
13.element的checkbox的多选框失效，选一个就都选中了原因：el-checkbox必须设置label属性且不相同。<el-checkbox-group class="wo-form-item-in" v-model="customerInfoForm.tag"><el-checkbox label="latent" name="latent&quo…...
2024/4/15 7:54:50
栈的应用：括号匹配
括号匹配在学习数据结构的时候，我们知道，栈有很多的应用，其中比较常见的一个就是括号匹配问题。在使用栈解决括号匹配问题时，其算法思想是：（1）初试一个空栈，顺序读入括号；（2）若是右括号，则与栈顶元素进行匹配，分以下两种情况： ①匹配：弹出栈顶元素并进行下一…...
2024/4/11 17:55:49
为什么有着足够出色的技术，中年程序员依然面临中年危机？
为什么有着足够出色的技术，中年程序员依然面临中年危机？笼统来说，中年程序员容易被淘汰的原因其实不外乎三点。 1、输出能力已到顶点。这个人奋斗十来年了，依旧碌碌无为，很明显这人的天花板就这样了，说白了，天赋就这样。 2、适应能力越来越差。年纪大，有家庭，老油条，…...
2024/4/10 20:21:59
JDK 安装及环境配置
JDK 安装及环境配置 Java Development Kit (JDK) 是sun针对Java开发人员发布的免费软件开发工具包(SDK，Software development kit)。JDK 是整个Java的核心，包括了Java运行环境、Java工具和Java基础类库。2006年sun宣布将发布基于GPL协议的开源JDK，使JDK成为自由软件。 JDK 安…...
2024/4/9 19:15:50
大数据——kafka(分布式消息系统)
Kafka简介Kafka是一个分布式，支持分区，多副本的分布式消息系统（MQ）。它提供了普通消息系统的功能，但具有自己独特的设计特性。kafka使用ZooKeeper用于管理、协调代理。Kafka只有一种模式——发布/订阅。目前是大数据生产中最常用的MQ,也是社区最活跃的MQ。Kafka的优缺点优…...
2024/4/9 19:15:47
用python分析用户的消费行为
一、题外话数据来自秦路老师的公众号，关注秦路老师的公众号，然后回复CD数据即可获得，我是一名数据分析小白，跟着老师的文章撸了一遍代码，仍然觉得云里雾里的。因此，决定把代码重构，根据秦老师的数据分析的思维理一遍，具体记录里面的较为重要的函数的用法，故写此文。 …...
2024/4/19 2:15:31
一维数组及典型应用
一、如何使用数组 1.声明数组 int[ ] a; 2.分配空间 a = new int[5]; 3.赋值 a [0] = 8; 4.处理数据 a [0] = a[0] * 10; 1.声明数组：告诉计算机数据类型是什么，声明数组时不规定数组长度 ①数据类型数组名[ ] ; 或 ②数据类型[ ] 数组名 ;（常用） 2、分配空间…...
2024/4/9 19:15:45
2020中青杯数学建模股指与国家经济
股指与国家经济自己原创，实力决定一切有需要的请私聊加我Q917267119...
2024/4/9 19:15:44
思维导图帮助学习APUE之进程通信与套接字
...
2024/4/16 19:54:17
萌新做点小玩意儿DAY-15 线性表（顺序表）及其应用
众所周知，程序=数据结构+算法。今天开始就做几个数据结构有关的小玩意儿，首先就是线性表，线性表是最简单，最常见的数据结构之一，线性表就是n个具有相同特性的数据元素的有限集合。线性表的特点就是一对一，除了第一个元素每一个元素都只有一个前驱，除了最后一个元素每一个…...
2024/4/17 6:55:40
1.浅谈标记语言markdown
Markdown简介Markdown是一种轻量级标记语言，创始人为约翰格鲁伯(英语：John Gruber)。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。由于Markdown的轻量化、易读易写特性，并…...
2024/4/19 9:23:19
iOS AVPlayer播放mp3
**注释： [self.player play];一定要写在- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> )change context:(void )context 监听方法中，不然音频没有加载完成是无法播放的 // // TFPlayMusicManager.…...
2024/4/19 2:15:07
关于c++的函数声明
C++里调用函数是否需要声明需要注意以下两点：1.自己实现的函数，在调用的地方之前实现，无须声明，否则需要声明。2.使用系统提供的函数，包含头文件即可使用。申明和定义之间的区别：1.申明-- 不开辟内存，仅仅告诉编译器，申明的部分存在，要预留一点空间。2.定义-- 开辟内存…...
2024/4/9 18:48:13
使用Arthas实现不停机更新
这里写自定义目录标题背景下载安装查询需要替换的文件的类加载器加载指定的class文件注意背景生产服务器的缺陷往往需要进行紧急更新，即使是多节点部署也避免不了需要重新启动服务器，使新的逻辑代码更新，所以不停机更新文件显得至关重要，今天介绍一下使用阿里的arthas实现…...
2024/4/9 18:48:12

经典小游戏2048 代码教学

2048的玩法：

相关文章

最新文章