在学习完了闭包原型链之后就开始进行2048小游戏的制作
游戏代码思想
这个小游戏要通过控制键盘上的上下左右键 来实现界面上的数字挪动和相加，整体分为三部分，html、css和js，其主要是通过js来实现功能
HTML部分
要注意在html页面插入链接时 尽量把css链接放在头部，js链接放在尾部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2048</title>
//插入的css文件
<link rel="stylesheet" type="text/css" href="2048css.css">
</head>
<body>
<div id="outer">
//头部存放分数，分数的数字后面要用js控制所以给一个id
<div class="heater">
<span>SCORE:</span>
<span class="score01" id="score01">0</span>
</div>
//2048中的16个格子
<div class="main">
<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 class="gameover" id="gameover">
<p>
GAME OVER!!<br/>
SCORE:<span class="score02" id="score02">0</span><br/>
<a href="javascript:game.start()" class="replay">重新开始</a>
</p>
</div>
</div>
<script src="2048.js"></script>
</body>
</html>
上面遮蔽层的作用是使用户不能再操作页面了，只能选择遮蔽层上面的操作
css部分
#outer{
width: 700px;
height:800px;
padding-top: 425px;
margin:auto;
border-radius: 10px;
font-size: 60px;
font-weight: bold;
margin-top: 100px;
font-family: Arial;
}
.heater{
width: 500px;
height: 70px;
line-height: 70px;
padding-top: 50px;
}
.score01{
color: red;
}
.main{
width: 700px;
height: 700px;
background-color: #bbada0;
border-radius: 10px;
}
.cell{
width: 150px;
height: 150px;
background-color: #ccc0b3;
float:left;
margin: 20px 0 0 20px;
border-radius: 10px;
line-height: 150px;
font-size: 60px;
text-align: center;
}
/*遮蔽层的样式*/
.gameover{
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(55,55,55,0.4);
}
.gameover>p{
width: 400px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
line-height: 60px;
/*因为p的中心是按照框的左上角所以要再减去框的一半*/
margin-left: -200px;
margin-top: -100px;
border-radius: 10px;
background-color: #fff;
font-size: 30px;
}
.gameover>p>a{
display: inline-block;
width: 150px;
height: 50px;
background-color: #9f8d77;
color: #fff;
text-decoration: none;
line-height: 50px;
}
/*每个数字的方块的样式*/
.n2{
background-color:#eee3da;
color:#776e65;
}
.n4{
background-color:#ede0c8;
color:#776e65;
}
.n8{
background-color:#f2b179;
color: #fff;
}
.n16{
background-color:#f59563;
color: #fff;
}
.n32{
background-color:#f67c5f;
color: #fff;
}
.n64{
background-color:#f65e3b;
color: #fff;
}
.n128{
background-color:#edcf72;
color: #fff;
}
.n256{
background-color:#edcc61;
color: #fff;
}
.n512{
background-color:#9c0;
color: #fff;
}
.n1024{
background-color:#33b5e5;
font-size:40px;
color: #fff;
}
.n2048{
background-color:#09c;
font-size:40px;
color: #fff;
}
.n4069{
background-color:#a6c;
font-size:40px;
color: #fff;
}
.n8192{
background-color:#93c;
font-size:40px;
color: #fff;
}
JS部分
因为这个项目本来就是靠js来运作的，所以我们首先要创建游戏对象，然后通过属性 方法来完成。我们首先先把游戏开始和游戏结束方法写出来。游戏开始要先随机生成两个随机格子的2和4，并把它显示在页面上。游戏结束则是判断所有的格子已经满了，并没有格子可以给随机生成的了，则会出现遮蔽层并显示游戏结束。
var game = {
data: [],
score:0,
gamerunning:1,
gameover:0,
status:1,
//开始的方法
start:function(){
this.status = this.gamerunning;
this.score = 0;
for(var r=0;r<4;r++){
this.data[r] = [];
for(var c=0;c<4;c++){
this.data[r][c] = 0;
}
}
//执行两次随机数的方法并显示在页面上
this.randomNum();
this.randomNum();
this.view();
console.log(this.data)
},
//生成随机数的方法
randomNum:function(){
//设定一个死循环 让它一直生成两个随机数，直到满足if的条件则跳出
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.25?2:4;//2跟4的比例是4:1
this.data[r][c] = num;
break;
}
}
},
//页面显示的方法
view: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 = "";
div.className = "cell";
}else{
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(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
},
把游戏的基本属性方法写好以后就具体实现上下左右的挪动相加，下面就是向左挪动的例子
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.view();
}
},
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];
//交换完成后赋值为0
this.data[r][nextc] = 0;
c--;
//如果前面的数据等于后面的数据，则相加，并将后面的数据赋值为0
}else if (this.data[r][c] == this.data[r][nextc]){
this.data[r][c] *= 2;
this.data[r][nextc] = 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;
},
上面就是控制左移的方法，同理就可以写出右移和上下移动，就不在这里展示了，下面就是怎么控制键盘上的方向键来移动方块
document.onkeydown = function(event){
var event = event || e || arguments[0];
if(event.keyCode == 37){
game.moveLeft();
}
if (event.keyCode == 39) {
game.moveRight();
}
if (event.keyCode == 38) {
game.moveUp();
}
if (event.keyCode == 40) {
game.moveDown();
}
}
键盘上的方向键有他固定的keyCode码，添加一个键盘事件，把每个键盘要执行的方法写进去就可以了。
扫一扫
4250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
