2048 小游戏
2048小游戏效果图
1. 2048游戏基本布局的搭建
<html>
<head>
<meta charset="utf-8" />
<title>2048小游戏title>
//引入css样式
<link rel="stylesheet" type="text/css" href="css/2048.css" />
head>
<body>
//2048小游戏计分
<p class="score">SCORE:<span id="score">0span>p>
<div class="gamebox">
//2048小游戏第一行
<div class="cell" id="c00">div>
<div class="cell" id="c01">div>
<div class="cell" id="c02">div>
<div class="cell" id="c03">div>
//2048小游戏第二行
<div class="cell" id="c10">div>
<div class="cell" id="c11">div>
<div class="cell" id="c12">div>
<div class="cell" id="c13">div>
//2048小游戏第三行
<div class="cell" id="c20">div>
<div class="cell" id="c21">div>
<div class="cell" id="c22">div>
<div class="cell" id="c23">div>
//2048小游戏第四行
<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>
//2048小游戏游戏结束的画面
<div class="gameover" id="gameover">
<p>
GAME OVER!!!<br/>
SCORE:<span id="scoreend">span><br/>
<a id="try">try again!a>
p>
div>
//引入js脚本
<script type="text/javascript" src="js/2048.js" >script>
body>
html>
2. 2048游戏游戏界面样式的设计（2048.css）
*{
margin:0;
padding:0;
font-family:arial;
}
.score{
width:480px;
margin:100px auto 0;
font-size:50px;
font-weight:bold;
}
.score>span{
color:red;
}
.gamebox{
width:480px;
height:480px;
background:#fbd5d5;
margin:0 auto;
border-radius:10px;
}
.cell{
width:100px;
height:100px;
background-color:#fbf8cd;
float:left;
border-radius:5px;
margin:16px 0 0 16px;
font-size:50px;
font-weight:bold;
text-align:center;
line-height:100px;
color:white;
}
.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}
//设置2048游戏结束的样式
.gameover{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
background-color: rgba(66,66,66,.2);
display:none;
}
.gameover>p{
width:400px;
height:200px;
background:#fff;
border:1px solid #000;
font-size:36px;
font-weight:bold;
border-radius:10px;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
text-align:center;
line-height:66px;
font-weight:bold;
}
.gameover a{
background-color:#9F8d77;
padding:10px;
border-radius:5px;
color:white;
text-align: none;
}
3. 2048游戏功能的实现（js实现）
var game = {
data: [],
score: 0,
status: 1,
gamerunning: 1,
gameover: 0,
start: function() {
for(var r = 0; r < 4; r++) {
game.data[r] = [];
for(var c = 0; c < 4; c++) {
game.data[r][c] = 0;
}
}
game.scroe = 0;
game.status = game.gamerunning;
game.randomNum();
game.randomNum();
game.dataView();
},
randomNum: function() {
for(;;) {
var r = Math.floor(Math.random() * 4);
var c = Math.floor(Math.random() * 4);
if(game.data[r][c] == 0) {
var num = Math.random() > 0.5 ? 2 : 4;
game.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(game.data[r][c] != 0) {
div.innerHTML = game.data[r][c];
div.className = "cell n" + game.data[r][c];
} else {
div.innerHTML = "";
div.className = "cell";
}
}
}
document.getElementById("score").innerHTML = game.score;
if(game.status == game.gameover) {
document.getElementById("scoreend").innerHTML = game.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(game.data[r][c] == 0) {
return false;
}
if(c < 3) {
if(game.data[r][c] == game.data[r][c + 1]) {
return false;
}
}
if(r < 3) {
if(game.data[r][c] == game.data[r + 1][c]) {
return false;
}
}
}
}
return true;
},
}
moveLeft: function() {
var before = game.data.toString();
for(var r = 0; r < 4; r++) {
game.moveLeftInRow(r);
}
var after = game.data.toString();
if(before != after) {
game.randomNum();
if(game.isGameOver()) {
game.status = game.gameover;
}
game.dataView();
}
},
moveLeftInRow: function(r) {
for(var c = 0; c < 3; c++) {
var nextc = game.getNextInRow(r, c);
if(nextc != -1) {
if(game.data[r][c] == 0) {
game.data[r][c] = game.data[r][nextc];
game.data[r][nextc] = 0;
c--;
} else if(game.data[r][c] == game.data[r][nextc]) {
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[r][nextc] = 0;
}
} else {
break;
}
}
},
getNextInRow: function(r, c) {
for(var i = c + 1; i < 4; i++) {
if(game.data[r][i] != 0) {
return i;
}
}
return -1;
},
moveRight: function() {
var before = game.data.toString();
for(var r = 0; r <4; r++) {
game.moveRightInRow(r);
}
var after = game.data.toString();
if(before != after) {
game.randomNum();
if(game.isGameOver()) {
game.status = game.gameover;
}
game.dataView();
}
},
moveRightInRow: function(r) {
for(var c = 3; c > 0; c--) {
var after = game.getNextrInRow(r, c);
if(after != -1) {
if(game.data[r][c] == 0) {
game.data[r][c] = game.data[r][after];
game.data[r][after] = 0;
c++;
} else if(game.data[r][c] == game.data[r][after]) {
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[r][after] = 0;
}
} else {
break;
}
}
},
getNextrInRow: function(r, c) {
for(var i = c - 1; i >= 0; i--) {
if(game.data[r][i] != 0) {
return i;
}
}
return -1;
},
moveTop: function() {
var before = game.data.toString();
for(var c = 0; c < 4; c++) {
game.moveTopInRow(c);
}
var after = game.data.toString();
if(before != after) {
game.randomNum();
if(game.isGameOver()) {
game.status = game.gameover;
}
game.dataView();
}
},
moveTopInRow: function(c) {
for(var r = 0; r < 4; r++) {
var top = game.getNextInCol(r, c);
if(top != -1) {
if(game.data[r][c] == 0) {
game.data[r][c] = game.data[top][c];
game.data[top][c] = 0;
r--;
} else if(game.data[r][c] == game.data[top][c]) {
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[top][c] = 0;
}
} else {
break;
}
}
},
getNextInCol: function(r, c) {
for(var i = r + 1; i < 4; i++) {
if(game.data[i][c] != 0) {
return i;
}
}
return -1;
},
moveBottom: function() {
var before = game.data.toString();
for(var c = 0; c < 4; c++) {
game.moveBottomInRow(c);
}
var after = game.data.toString();
if(before != after) {
game.randomNum();
if(game.isGameOver()) {
game.status = game.gameover;
}
game.dataView();
}
},
moveBottomInRow: function(c) {
for(var r = 3; r >= 1; r--) {
var bottom = game.getNextsInCol(r, c);
if(bottom != -1) {
if(game.data[r][c] == 0) {
game.data[r][c] = game.data[bottom][c];
game.data[bottom][c] = 0;
r++;
} else if(game.data[r][c] == game.data[bottom][c]) {
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[bottom][c] = 0;
}
} else {
break;
}
}
},
getNextsInCol: function(r, c) {
for(var i = r - 1; i >= 0; i--) {
if(game.data[i][c] != 0) {
return i;
}
}
return -1;
},
demo:function(){
if(game.status==game.gameover)
{
game.score=0;
game.start();
}
}
game.start();
document.onkeydown=function(event){
var event=event||window.event;
if(event.keyCode==37){
game.moveLeft();
}
if(event.keyCode==39){
game.moveRight();
}
if(event.keyCode==38){
game.moveTop();
}
if(event.keyCode==40){
game.moveBottom();
}
}
var try1=document.getElementById("try");
try1.onclick=function(){
game.demo();
}
