实例介绍
【实例简介】
【实例截图】
【核心代码】
// [
// [2,4,8,16]
// [0,4,128,64]
// [0,0,0,0]
// []
// ]
// 定义一个对象，这个对象存储所有的数据
var game = {
data: [], //存储游戏所有数据的数组
score: 0, //定义一个游戏的得分
gamerunning: 1, //定义游戏运行的状态为1
gameover: 0, //定义游戏结束的状态为0
status: 1, //定义一个游戏的状态，时刻的去跟上面两个状态做比较，判断目前游戏处于运行或者结束状态
start: function() { //游戏开始的方法
this.status = this.gamerunning; //开始的时候让状态等于游戏运行的状态
this.score = 0; //游戏的分数清空
this.data = [ //游戏初始化的时候所有的数据全都是0
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
this.randomNum();
this.randomNum();
this.randomNum();
this.randomNum();
this.randomNum();
this.dataView();
},
randomNum: function() { //随机数的方法，后面每移动一次就调用一下这个方法
for(;;) { //死循环，不停的去找数组中是0的元素
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.5 ? 2 : 4; //随机生成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) { //如果数组中的内容为0的时候
div.innerHTML = ""; //里面内容清空
div.className = "cell";
} else { //如果不为0的时候
div.innerHTML = this.data[r][c]; //里面对应的视图显示数组中对应的数字
div.className = "cell n" this.data[r][c];
}
}
};
// 设置游戏的分数
document.getElementById("score01").innerHTML = this.score;
//判断游戏的状态
if(this.status == this.gameover) {
document.getElementById("score02").innerHTML = this.score;
document.getElementById("gameover").style.display = 'block';
} else {
document.getElementById("gameover").style.display = 'none';
}
},
isgameover: function() { //判断游戏是否结束的方法
for(var r = 0; r < 4; r ) {
for(var c = 0; c < 4; c ) {
if(this.data[r][c] == 0) { //还有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; //表示游戏已经gameover了
},
// 移动的方法(左)
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 //位置清为0
c--; //继续从当前位置开始循环
} else if(this.data[r][c] == this.data[r][nextc]) {
this.data[r][c] *= 2; //数字相加
this.data[r][nextc] = 0; //位置清为0
this.score = this.data[r][c]; //更新分数
}
} 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 = 0; r < 4; 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.getNextinRow1(r, c);
if(nextc != -1) { //表示已经找到了
if(this.data[r][c] == 0) {
this.data[r][c] = this.data[r][nextc]; //数字替换
this.data[r][nextc] = 0 //位置清为0
c ; //继续从当前位置开始循环
} else if(this.data[r][c] == this.data[r][nextc]) {
this.data[r][c] *= 2; //数字相加
this.data[r][nextc] = 0; //位置清为0
this.score = this.data[r][c]; //更新分数
}
} else { //当没有找到数字的时候
break;
}
}
},
getNextinRow1: 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) { //移动之前如果不等于移动之后肯定是发生了移动
this.randomNum(); //生成随机数
if(this.isgameover()) { //判断游戏是否结束
this.status = this.gameover; //如果结束改变游戏的状态
}
this.dataView(); //更新视图
}
},
moveUpinRow: function(c) { //移动每一行的函数
for(var r = 0; r<4; r ) {
var next = this.getNextinRow2(r, c);
if(next != -1) { //表示已经找到了
if(this.data[r][c] == 0) {
this.data[r][c] = this.data[next][c]; //数字替换
this.data[next][c] = 0 //位置清为0
r--; //继续从当前位置开始循环
} else if(this.data[r][c] == this.data[next][c]) {
this.data[r][c] *= 2; //数字相加
this.data[next][c] = 0; //位置清为0
this.score = this.data[r][c]; //更新分数
}
} else { //当没有找到数字的时候
break;
}
}
},
getNextinRow2: 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) { //移动之前如果不等于移动之后肯定是发生了移动
this.randomNum(); //生成随机数
if(this.isgameover()) { //判断游戏是否结束
this.status = this.gameover; //如果结束改变游戏的状态
}
this.dataView(); //更新视图
}
},
moveDowninRow: function(c) { //移动每一行的函数
for(var r = 3; r>=0; r--) {
var next = this.getNextinRow3(r, c);
if(next != -1) { //表示已经找到了
if(this.data[r][c] == 0) {
this.data[r][c] = this.data[next][c]; //数字替换
this.data[next][c] = 0 //位置清为0
r--; //继续从当前位置开始循环
} else if(this.data[r][c] == this.data[next][c]) {
this.data[r][c] *= 2; //数字相加
this.data[next][c] = 0; //位置清为0
this.score = this.data[r][c]; //更新分数
}
} else { //当没有找到数字的时候
break;
}
}
},
getNextinRow3: 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(event) { //绑定键盘事件
var event = event || window.event;
console.log(event.keyCode); //每个按键对应的键盘码
if(event.keyCode == 37) {
game.moveLeft();
} else if(event.keyCode == 39) {
game.moveRight();
} else if(event.keyCode == 38) {
game.moveUp();
}else{
if(event.keyCode == 40){
game.moveDown()
}
}
}
//←37
//↑ 38
//→39
//↓ 40
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论