原生js编写2048小游戏
程序员文章站
2022-06-20 20:44:46
效果图：
代码如下：
2...</div>
<div class="content">
<p><strong>效果图：</strong></p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="原生js编写2048小游戏" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MTAvYl8wXzIwMTkwNjEwMjExNDIyMzQ2MC5wbmc=" title="原生js编写2048小游戏"></p>
<p><strong>代码如下：</strong></p>
<div class="jb51code">
<pre class="brush: javascript;">
<!doctype html>
<html>
<head>
<title> 2048-game </title>
<meta charset="utf-8" />
<style media="screen">
#game {
display: none;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #9da5c3;
opacity: 0.5;
z-index: 1;
}
.clear:after {
content: "";
display: table;
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.scoreshow {
height: 50px;
text-align: center;
line-height: 50px;
}
.model {
text-decoration: none;
color: white;
background-color: #bbada0;
font-size: 36px;
border-radius: 10px;
}
.head {
width: 480px;
height: 50px;
margin: 0 auto;
font-size: 25px;
}
#gridpanel {
width: 480px;
height: 480px;
margin: 0 auto;
background-color: #bbada0;
border-radius: 10px;
position: relative;
z-index: 1;
}
.grid,
.cell {
width: 100px;
height: 100px;
border-radius: 6px;
}
.grid {
background-color: #ccc0b3;
float: left;
margin: 16px 0 0 16px;
}
.cell {
position: absolute;
font-size: 60px;
text-align: center;
line-height: 100px;
color: #fff;
}
.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
}
.n2,
.n4 {
color: #776e65
}
#gameover {
width: 100%;
display: none;
position: fixed;
left: 50%;
right: 50%;
top: 148px;
width: 220px;
height: 200px;
border-radius: 10px;
background-color: white;
margin-left: -110px;
text-align: center;
z-index: 5;
}
#gameover>a {
display: inline-block;
width: 170px;
height: 50px;
border-radius: 10px;
text-decoration: none;
background-color: #9f8d77;
color: white;
font-size: 36px;
}
</style>
</head>
<body>
<div id="game">
</div>
<div class="head clear">
<div class="scoreshow left">
<span>score:</span>
<span id="score"></span>
</div>
<div class="selction right" onclick="getmodel(event)">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" value="3">3x3</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" value="4">4x4</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" type="button">5x5</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" type="button">6x6</a>
<!-- <input type="text" id="model"> -->
<!-- <button type="button" name="button" id="set">设置游戏</button> -->
</div>
</div>
<div id="gridpanel">
</div>
<div id="gameover">
<h1 id="score"></h1>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="again" onclick="obj.gamestart()">try again</a>
</div>
<script type="text/javascript">
var arr = [];
function $(id) {
return document.getelementbyid(id);
}
function c(cls) {
return document.getelementsbyclassname(cls);
}
var obj = {
row: 4,
cell: 4,
r: 0,
c: 0,
f: 0, //r行 c列 f查找的下一位置
keycd: 0,
score: 0,
createele: 0, //是否需要创建元素
elefragment: "", //文档片段变量
//游戏开始
gamestart: function() {
obj.init();
document.onkeydown = function(e) { //自动获得事件对象
switch (e.keycode) { //判断按键号
case 37:
obj.keycd = 1;
obj.moveleft();
break;
case 38:
obj.keycd = 2;
obj.moveup();
break;
case 39:
obj.keycd = 1;
obj.moveright();
break;
case 40:
obj.keycd = 2;
obj.movedown();
break;
}
$("score").innerhtml = obj.score; //更新分数
}
},
//初始化
init: function() {
obj.elefragment = document.createdocumentfragment();
for (r = 0; r < obj.row; r++) {
arr.push([]);
for (c = 0; c < obj.cell; c++) {
arr[r][c] = 0;
if (obj.createele == 1) {
obj.create(r, c);
}
}
}
if (obj.createele == 1) {
obj.createele = 0;
$("gridpanel").innerhtml = ""; //清空原有的元素
$("gridpanel").appendchild(obj.elefragment); //添加元素
}
obj.score = 0;
$("score").innerhtml = obj.score;
$("game").style.display = "none";
$("gameover").style.display = "none";
obj.random(); //开始游戏随机生成两个数
obj.random();
obj.updateview();
},
//创建div元素，添加到gridpanel中
create: function(r, c) {
var grid, cell;
var increment = 14,
grwidth, grheight, grmargintop, grmarginleft, cewidth, cehight;
grid = document.createelement("div");
cell = document.createelement("div");
grid.id = "g" + r + c;
grid.classname = "grid";
cell.id = "c" + r + c;
cell.classname = "cell";
if (obj.row == 3) {
increment = 24;
} else if (obj.row == 4) {
increment = 18;
}
grwidth = grheight = cewidth = cehight = 66 + (6 - obj.row) * increment; //优化后
grmargintop = grmarginleft = (480 - grwidth * obj.row) / (obj.row + 1);
grid.style.width = grwidth + "px";
grid.style.height = grheight + "px";
grid.style.margintop = grmargintop + "px";
grid.style.marginleft = grmarginleft + "px";
cell.style.width = cewidth + "px";
cell.style.height = cehight + "px";
cell.style.top = grmargintop + r * (grmargintop + cewidth) + "px";
cell.style.left = grmarginleft + c * (grmarginleft + cehight) + "px";
cell.style.lineheight = cehight + "px";
cell.style.fontsize = 30 + (6 - obj.row) * 10 + "px";
//优化前
/*if (obj.row == 3) {
grid.style.width = "140px";
grid.style.height = "140px";
grid.style.margin = "15px 0 0 15px";
cell.style.width = "140px";
cell.style.height = "140px";
cell.style.top = 15 + r * 155 + "px"; //设置距离上一位置的高度
cell.style.left = 15 + c * 155 + "px"; //设置离左一位置的距离
cell.style.lineheight = "140px";
} else if (obj.row == 4) {
grid.style.width = "100px";
grid.style.height = "100px";
grid.style.margin = "16px 0 0 16px";
cell.style.width = "100px";
cell.style.height = "100px";
cell.style.top = 16 + r * 116 + "px";
cell.style.left = 16 + c * 116 + "px";
cell.style.lineheight = "100px";
} else if (obj.row == 5) {
grid.style.width = "75px";
grid.style.height = "75px";
grid.style.margin = "17.5px 0 0 17.5px";
cell.style.width = "75px";
cell.style.height = "75px";
cell.style.top = 17.5 + r * 92.5 + "px";
cell.style.left = 17.5 + c * 92.5 + "px";
cell.style.fontsize = "40px";
cell.style.lineheight = "75px";
} else if (obj.row == 6) {
grid.style.width = "66px";
grid.style.height = "66px";
grid.style.margin = "12px 0 0 12px";
cell.style.width = "66px";
cell.style.height = "66px";
cell.style.top = 12 + r * 78 + "px";
cell.style.left = 12 + c * 78 + "px";
cell.style.fontsize = "30px";
cell.style.lineheight = "66px";
}*/
obj.elefragment.appendchild(grid);
obj.elefragment.appendchild(cell);
},
//随机产生一个新的数
random: function() {
while (1) {
var row = math.floor(math.random() * obj.row);
var cell = math.floor(math.random() * obj.cell);
if (arr[row][cell] == 0) { //判断生成的随机数位置为0才随机生成2或4
arr[row][cell] = (math.random() > 0.5) ? 4 : 2;
break;
}
}
// var row = math.floor(math.random() * 4);
// var cell = math.floor(math.random() * 4);
// if (arr[row][cell] == 0) { //判断生成的随机数位置为0才随机生成2或4
// arr[row][cell] = (math.random() > 0.5) ? 4 : 2;
// return;
// }
// obj.random();//递归影响执行效率
},
//更新页面
updateview: function() {
var win = 0;
for (r = 0; r < obj.row; r++) {
for (c = 0; c < obj.cell; c++) {
if (arr[r][c] == 0) { //值为0的不显示
$("c" + r + c).innerhtml = ""; //0不显示
$("c" + r + c).classname = "cell" //清除样式
} else {
$("c" + r + c).innerhtml = arr[r][c];
$("c" + r + c).classname = "cell n" + arr[r][c]; //添加不同数字的颜色
if (obj.row == 3 && arr[r][c] == 1024) {
win = 1;
} else if (obj.row == 4 && arr[r][c] == 2048) {
win = 1;
} else if (obj.row == 5 && arr[r][c] == 4096) {
win = 1;
} else if (obj.row == 6 && arr[r][c] == 8192) {
win = 1;
}
}
}
}
if (win == 1) { //通关
$("game").style.display = "block";
$("gameover").style.display = "block";
$("score").innerhtml = "you win!<br>score:" + obj.score;
}
if (obj.isgameover()) { //游戏失败
$("game").style.display = "block";
$("gameover").style.display = "block";
$("score").innerhtml = "game over!<br>score:" + obj.score;
console.log("gameover");
}
},
//游戏失败
isgameover: function() {
for (r = 0; r < obj.row; r++) {
for (c = 0; c < obj.cell; c++) {
if (arr[r][c] == 0) { //有0还不是gameover
return false;
} else if (c != obj.cell - 1 && arr[r][c] == arr[r][c + 1]) { //左往右 前一个和下一个不相等
return false;
} else if (r != obj.row - 1 && arr[r][c] == arr[r + 1][c]) { //上往下 上一个和下一个不相等
return false;
}
}
}
return true;
},
//查找下一个不为0的数值的位置
find: function(r, c, start, condition, direction) {
if (obj.keycd == 2) { //上下按键
if (direction == 1) { //向上按键 f++
for (var f = start; f < condition; f += direction) {
if (arr[f][c] != 0) {
return f;
}
}
} else { //向下按键 f--
for (var f = start; f >= condition; f += direction) {
if (arr[f][c] != 0) {
return f;
}
}
}
} else { //左右按键
if (direction == 1) { //左按键 f++
for (var f = start; f < condition; f += direction) {
if (arr[r][f] != 0) {
return f;
}
}
} else { //右按键 f--
for (var f = start; f >= condition; f += direction) {
if (arr[r][f] != 0) {
return f;
}
}
}
}
return null; //循环结束仍然没有找到！=0的数值，返回null
},
//左按键的处理
dealtoleft: function(r) {
var next;
for (c = 0; c < obj.row; c++) {
next = obj.find(r, c, c + 1, obj.cell, 1); //找出第一个不为0的位置
if (next == null) break; //没有找到就返回
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[r][next]; //把找到的不为0的数值替换为当前位置的值
arr[r][next] = 0; //找到的位置清0
c--; //再次循环多一次，查看后面否有值与替换后的值相同，
} else if (arr[r][c] == arr[r][next]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[r][next] = 0;
obj.score += arr[r][c];
}
}
},
move: function(itertor) {
var before, //没处理前
after; //after处理后
before = arr.tostring();
itertor(); //执行for函数
after = arr.tostring();
if (before != after) { //前后对比，如果不同就update
obj.random();
obj.updateview();
}
},
moveleft: function() {
obj.move(function() {
for (r = 0; r < obj.row; r++) {
obj.dealtoleft(r);
}
})
// if 当前位置 不为零
// 从当前位置，下一个成员开始，遍历，
// 如果找到，与当前位置相等的数，
// 两者相加，并把不为零的成员，设置为零
// 如果 当前位置是 零
// 从当前位置下一个成员开始遍历
// 如果找到 第一个不为零的成员
// 当前位置数值设置为这个不为零的成员的值 ，并且把那个不为零的成员设置为 0
},
//右按键处理
dealtoright: function(r) {
var next;
for (c = obj.cell - 1; c >= 0; c--) {
next = obj.find(r, c, c - 1, 0, -1); //找出第一个不为0的位置
if (next == null) break; //没有找到就返回
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[r][next]; //把找到的不为0的数值替换为当前位置的值
arr[r][next] = 0; //找到的位置清0
c++; //再次循环多一次，查看后面否有值与替换后的值相同，
} else if (arr[r][c] == arr[r][next]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[r][next] = 0;
obj.score += arr[r][c];
}
}
},
moveright: function() {
obj.move(function() {
for (r = 0; r < obj.row; r++) {
obj.dealtoright(r);
}
})
},
//上按键处理
dealtoup: function(c) {
var next;
for (r = 0; r < obj.row; r++) {
next = obj.find(r, c, r + 1, obj.row, 1); //找出第一个不为0的位置
if (next == null) break;
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[next][c]; //把找到的不为0的数值替换为当前位置的值
arr[next][c] = 0; //找到的位置清0
r--; //再次循环多一次，查看后面否有值与替换后的值相同
} else if (arr[r][c] == arr[next][c]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[next][c] = 0;
obj.score += arr[r][c];
}
}
},
moveup: function() {
obj.move(function() {
for (c = 0; c < obj.cell; c++) {
obj.dealtoup(c);
}
})
},
//下按键处理
dealtodown: function(c) {
var next;
for (r = obj.row - 1; r >= 0; r--) {
next = obj.find(r, c, r - 1, 0, -1); //找出第一个不为0的位置
if (next == null) {
break;
}
//如果当前位置为0
if (arr[r][c] == 0) {
arr[r][c] = arr[next][c]; //把找到的不为0的数值替换为当前位置的值
arr[next][c] = 0; //找到的位置清0
r++; //再次循环多一次，查看后面否有值与替换后的值相同
} else if (arr[r][c] == arr[next][c]) { //如果当前位置与找到的位置数值相等，则相加
arr[r][c] *= 2;
arr[next][c] = 0;
obj.score += arr[r][c];
}
}
},
movedown: function() {
obj.move(function() {
for (c = 0; c < obj.cell; c++) {
obj.dealtodown(c);
}
})
}
}
window.onload = function() {
obj.createele = 1;
obj.gamestart();
}
//切换模式
function getmodel(e) { //事件冒泡获取a元素
var a = e.target,
modelvalue = 4;
if (a.nodename == "a") {
if (a.innerhtml == "3x3") {
modelvalue = 3;
} else if (a.innerhtml == "4x4") {
modelvalue = 4;
} else if (a.innerhtml == "5x5") {
modelvalue = 5;
} else if (a.innerhtml == "6x6") {
modelvalue = 6;
}
obj.row = obj.cell = modelvalue;
obj.createele = 1; //需要创建格子div元素的标志
obj.gamestart();
}
}
// var modelvalue = parseint($("model").value);
// if (isnan(modelvalue)) {
// modelvalue = 4; //默认是4*4
// }
// if (modelvalue <= 2 || modelvalue > 6) return; //2格或者大于6格无效
// obj.row = modelvalue;
// obj.cell = modelvalue;
// obj.createele = 1;
// obj.gamestart();
// console.log(modelvalue);
// }
</script>
</body>
</html>
</pre>
</div>
<p>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1471751.html">
PS制作霸气的新浪微博页面 </a>
</p>
<p>
下一篇： <a href="/article/1471753.html">
8个PHP程序员常用的功能汇总 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2088080.html" target="_blank" title="原生JS实现的跳一跳小游戏完整实例">
<h2>
原生JS实现的跳一跳小游戏完整实例 </h2>
</a>
</li>
<li>
<a href="/article/2074423.html" target="_blank" title="用原生JS写一个网页版的2048小游戏（兼容移动端）">
<h2>
用原生JS写一个网页版的2048小游戏（兼容移动端） </h2>
</a>
</li>
<li>
<a href="/article/2017053.html" target="_blank" title="使用原生js编写一个简单的框选功能方法">
<h2>
使用原生js编写一个简单的框选功能方法 </h2>
</a>
</li>
<li>
<a href="/article/2010203.html" target="_blank" title="js原生开发一个2048小游戏">
<h2>
js原生开发一个2048小游戏 </h2>
</a>
</li>
<li>
<a href="/article/1904129.html" target="_blank" title="利用原生js编写简单计算器-Sander的博客-CSDN博客">
<h2>
利用原生js编写简单计算器-Sander的博客-CSDN博客 </h2>
</a>
</li>
<li>
<a href="/article/1880704.html" target="_blank" title="用JS实现2048小游戏">
<h2>
用JS实现2048小游戏 </h2>
</a>
</li>
<li>
<a href="/article/1839121.html" target="_blank" title="用原生JS编写的类似轮播图特效（代码教程）">
<h2>
用原生JS编写的类似轮播图特效（代码教程） </h2>
</a>
</li>
<li>
<a href="/article/1735476.html" target="_blank" title="原生js实现贪食蛇小游戏">
<h2>
原生js实现贪食蛇小游戏 </h2>
</a>
</li>
<li>
<a href="/article/1688701.html" target="_blank" title="html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）">
<h2>
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一） </h2>
</a>
</li>
<li>
<a href="/article/1667245.html" target="_blank" title="原生JS与jQuery编写简单选项卡">
<h2>
原生JS与jQuery编写简单选项卡 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>