2048小游戏（原生js基础代码篇）

今天在这里，我将给各位呈现一个简单的游戏代码。

想必大家都接触过2048这个小游戏吧，在悠闲时间用于消遣时间最好不过了，那么，我给大家写一个2048最基本的原生js代码。

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>

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;
}
.n256{
background-color:#edcc61;
}
.n512{
background-color:#9c0;
}
.n1024{
background-color:#33b5e5;
font-size:40px;
}
.n2048{
background-color:#09c;
font-size:40px;
}
.n4096{
background-color:#a6c;
font-size:40px;
}
.n8192{
background-color:#93c;
font-size:40px;
}#gameover{
position: absolute;
background-color: rgba(0,0,0,0.2);
left: 0;
top: 0;
right: 0;
bottom: 0;
font-size: 40px;
display: none;
}#gameover p{
background-color: #fff;
width: 300px;
height: 200px;
border-radius: 10px;
line-height: 66.66px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}#gameover p a{
padding: 10px;
text-decoration: none;
background-color: #9f8d77;
color: #fff;
border-radius: 10px;
cursor: pointer;
}

JS:

//游戏环节
var game = {
data: [],  //定义一个数组存储
score: 0,  //开始时分数为0
gamerunning: 1,  //游戏开始时游戏状态为1
gameover: 0,  //游戏结束时游戏状态为0
status: 1,  //个人状态与游戏状态相对应，默认为1
//游戏开始时还原所有
start: function () {this.data = [[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]];this.score = 0;this.status = this.gamerunning;//随机生成两个数2或者4，方法调用5次this.randomNum();this.randomNum();this.randomNum();this.randomNum();this.randomNum();//更新视图this.dataView();
},
//随机赋值
randomNum: function () {//循环获取是否方块存在空白位置while (true) {//获取随机值var r = Math.floor(Math.random() * 4);   //随机生成一个行var c = Math.floor(Math.random() * 4);   //随机生成一个列//判断 if (this.data[r][c] == 0) {//随机生成2或者4var 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++) { //循环里面的每个单元格//               找到对应的id的divvar div = document.getElementById("n" + r + c);  //字符串拼接if (this.data[r][c] != 0) {div.innerHTML = this.data[r][c]; //直接把数组中的数字展示到div中div.className = "cell n" + this.data[r][c]; //设置对应div的样式} else {div.innerHTML = "";  //等于0的时候，div里面的内容直接置空div.className = "cell";}}}//     更新分数document.getElementById("score01").innerHTML = this.score;//     判断游戏是否结束if (this.status == this.gameover) {  //游戏结束弹出框显示document.getElementById("gameover").style.display = "block";document.getElementById("score02").innerHTML = this.score;} else {   //游戏没有结束的时候弹出框一直隐藏document.getElementById("gameover").style.display = "none";}
},
//  判断游戏是否结束的方法
isgameove: function () {for (var r = 0; r < 4; r++) {for (var c = 0; c < 4; c++) {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;   //上面情况全都不符合，表示游戏已经GG了，返回一个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) {//随机生成两个数2或者4this.randomNum();if (this.isgameove()) { //如果游戏结束//自己状态等于游戏结束状态this.status = this.gameover;}//更新视图this.dataView();}},
//处理每一行的数据
moveLeftinRow: function (r) {//循环获取后面的数据,最左边不用考虑for (var c = 0; c < 3; c++) {//变量接收var nextc = this.moveLeftNum(r, c);//判断是否为-1，否则则为找到数字if (nextc != -1) {if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较this.data[r][c] = this.data[r][nextc];//找到的数清空变为0this.data[r][nextc] = 0;//再次从最左边的数进行循环c--;}else if (this.data[r][c] == this.data[r][nextc]) {//如果当前的数等于找到的数，则相加this.data[r][c] *= 2;//找到的数清空变为0this.data[r][nextc] = 0;//数字相加一次分数加this.score += this.data[r][c];}} else {//如果没有找到数，则退出循环break;}}},
moveLeftNum: 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 = 0; r < 4; r++) {//处理每一行的函数this.moveRightinRow(r);}//移动之后转换一次var after = String(this.data);//判断if (before != after) {//随机生成两个数2或者4this.randomNum();if (this.isgameove()) { //如果游戏结束//自己状态等于游戏结束状态this.status = this.gameover;}//更新视图this.dataView();}},
//处理每一行的数据
moveRightinRow: function (r) {//循环获取前面的数据,最左边不用考虑for (var c = 3; c >= 0; c--) {//变量接收var nextc = this.moveRightNum(r, c);//判断是否为-1，否则则为找到数字if (nextc != -1) {if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较this.data[r][c] = this.data[r][nextc];//找到的数清空变为0this.data[r][nextc] = 0;//再次从最右边的数进行循环c++;}else if (this.data[r][c] == this.data[r][nextc]) {//如果当前的数等于找到的数，则相加this.data[r][c] *= 2;//找到的数清空变为0this.data[r][nextc] = 0;//数字相加一次分数加this.score += this.data[r][c];}} else {//如果没有找到数，则退出循环break;}}},
moveRightNum: function (r, c) { //  左移//循环获取前面的数据,最右边不用考虑for (var i = c - 1; i >= 0; i--) {//判断前面是否找到数字if (this.data[r][i] != 0) {//返回下标return i;}}//如果没有找到，返回return -1;
},
//移动的方法
//数字上移
moveUp: function () {//移动之前转化一次字符串var before = String(this.data);//循环每行数据for (var c = 0; c < 4; c++) {//处理每一行的函数this.moveUpinRow(c);}//移动之后转换一次var after = String(this.data);//判断if (before != after) {//随机生成两个数2或者4this.randomNum();if (this.isgameove()) { //如果游戏结束//自己状态等于游戏结束状态this.status = this.gameover;}//更新视图this.dataView();}},
//处理每一行的数据
moveUpinRow: function (c) {//循环获取前面的数据,最上面不用考虑for (var r = 0; r < 3; r++) {//变量接收var nextr = this.moveUpNum(r, c);//判断是否为-1，否则则为找到数字if (nextr != -1) {if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较this.data[r][c] = this.data[nextr][c];//找到的数清空变为0this.data[nextr][c] = 0;//再次从最上面的数进行循环r--;}else if (this.data[r][c] == this.data[nextr][c]) {//如果当前的数等于找到的数，则相加this.data[r][c] *= 2;//找到的数清空变为0this.data[nextr][c] = 0;//数字相加一次分数加this.score += this.data[r][c];}} else {//如果没有找到数，则退出循环break;}}},
moveUpNum: function (r, c) {    //  上移//循环获取上面的数据,最右边不用考虑for (var i = r + 1; i < 4; i++) {//判断下面是否找到数字if (this.data[i][c] != 0) {//返回下标return i;}}//如果没有找到，返回return -1;
},
//移动的方法
//数字下移
moveDown: function () {//移动之前转化一次字符串var before = String(this.data);//循环每行数据for (var c = 0; c < 4; c++) {//处理每一行的函数this.moveDowninRow(c);}//移动之后转换一次var after = String(this.data);//判断if (before != after) {//随机生成两个数2或者4this.randomNum();if (this.isgameove()) { //如果游戏结束//自己状态等于游戏结束状态this.status = this.gameover;}//更新视图this.dataView();}},
//处理每一行的数据
moveDowninRow: function (c) {//循环获取前面的数据,最下面不用考虑for (var r = 3; r >= 0; r--) {//变量接收var nextr = this.moveDownNum(r, c);//判断是否为-1，否则则为找到数字if (nextr != -1) {if (this.data[r][c] == 0) {  //如果当前的数等于0，则当前的数和找到的数进行比较this.data[r][c] = this.data[nextr][c];//找到的数清空变为0this.data[nextr][c] = 0;//再次从最下面的数进行循环r++;}else if (this.data[r][c] == this.data[nextr][c]) {//如果当前的数等于找到的数，则相加this.data[r][c] *= 2;//找到的数清空变为0this.data[nextr][c] = 0;//数字相加一次分数加this.score += this.data[r][c];}} else {//如果没有找到数，则退出循环break;}}},
moveDownNum: function (r, c) {  //  下移//循环获取前面的数据,最下面不用考虑for (var i = r - 1; i >= 0; i--) {//判断上面是否找到数字if (this.data[i][c] != 0) {//返回下标return i;}}//如果没有找到，返回return -1;
}}//键盘按下时事件
document.onkeydown = function () {
//键盘上
if (event.keyCode == 37) {   //键盘左console.log("左")//左移game.moveLeft();
} else if (event.keyCode == 38) {   //键盘上console.log("上")//上移game.moveUp();} else if (event.keyCode == 39) {   //键盘右console.log("右")//右移game.moveRight();
} else if (event.keyCode == 40) {   //键盘下console.log("下")//下移game.moveDown();
}}//键盘按下时事件
document.onkeydown = function () {
//键盘上
if (event.keyCode == 37) {   //键盘左console.log("左")//左移game.moveLeft();
} else if (event.keyCode == 38) {   //键盘上console.log("上")//上移game.moveUp();} else if (event.keyCode == 39) {   //键盘右console.log("右")//右移game.moveRight();
} else if (event.keyCode == 40) {   //键盘下console.log("下")//下移game.moveDown();
}}//游戏开始时调用
game.start();
console.log(game.data)
console.log(game.score)//点击再来一次
function typeonce() {
document.getElementById("gameover").style.display = "none";
window.location.href = "2048.html";
}

以上代码便是2048小游戏最基本的游戏代码了，当然，你也可以将写好的2048打包成App在移动端运行，该代码是Web端和移动端都能运行的了。

具体的移动端我放在这里了 2048小游戏移动端与Web端基本代码
密码：321200

希望对大家有帮助！

2048小游戏（原生js基础代码篇）相关推荐

原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...
2048小游戏 java版（代码+注释）
一个纯纯小白,想写点什么,也想学习一下怎么在这里写东西,就简单的写个2048小游戏.写的不好,大佬就不用看了,希望和大家交流学习,有写的不好或有更好的建议也欢迎提出来.(需要用的可直接 ...
再来一个小游戏——原生js逐句解释开发简易版别踩白块，附源码
芜湖!没想到上个做扫雷的阅读量这么高(激动) 先捞一下:做个小项目~纯原生JS手把手逐句解释写一个扫雷小游戏(附源码) 快看↑ 这次就做一个别踩白块吧哈哈哈哈哈最终版演示地址:钢琴块源码在最后!最 ...
php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
原生js 实现2048小游戏
2048小游戏首先2048小游戏离不开16个格子,我们通过html和css创建好对应的标签和样式, 然后开始js逻辑 <div id="box">//一个盒子里面16 ...
html css js实现快递单打印_JS与HTML、CSS实现2048小游戏（六）
在前面的五篇文章中,小编带大家完成了网页版2048小游戏的基本游戏逻辑.但是在游戏结束的gameover()方法中咱们只是简单的通过alert来弹出一些信息,这样的话只能出现下图的效果.这样的游戏,不 ...
2048小游戏js实现
摘要 2048小游戏,采用原生js的dom操作,做的比较粗糙,目的是练习原生js的常用操作.游戏功能与界面均为他人设计,本demo具体代码实现由本人独立实现. 样式 demo功能: 常见的2048游戏 ...
JS与HTML、CSS实现2048小游戏（一）
JS与HTML.CSS实现2048小游戏(一) 引言知识储备编译器推荐游戏框架构建游戏的基础页面后续文章引言这是大一刚结束的时候做的东西,之前也写了文章做记录,最近想发一下博客,就重新整 ...
使用JS实现2048小游戏
JS实现2048小游戏源码效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...

2048小游戏（原生js基础代码篇）

2048小游戏（原生js基础代码篇）相关推荐

最新文章

热门文章