<码农进阶> 仿2048小游戏
严阳秋
运行前请先下载jquery.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>2048game</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
font-size:12px;
text-align:center;
}
#game{
margin:100px auto;
}
#gamecenter{
float:left;
width:400px;
height:400px;
background:#eee;
margin:0 40px 0 400px;
}
#bg{
margin:8px 0 0 8px;
}
#gamecenter ul{
width:400px;
height:80px;
list-style-type:none;
}
#gamecenter ul li{
width:74px;
height:74px;
float:left;
text-align:center;
line-height:74px;
background:#fff;
border:1px solid #ccc;
margin:10px;
font-size:16px;
font-weight:bold;
}
#control{
float:left;
width:300px;
height:180px;
margin-top:60px;
}
#control tr{
height:58px;
}
#control tr td{
font-size:16px;
font-weight:bold;
}
#control tr td.c{
width:58px;
height:58px;
border:1px solid #ccc;
text-align:center;
background:#eee;
}
#btndiv{
height:40px;
border-bottom:1px solid #f60;
}
#btndiv ul{
list-style-type:none;
}
#btndiv ul li {
width:60px;
height:25px;
margin:0 10px;
border:1px solid #666;
line-height:25px;
}
</style>
</head>
<body>
<div>
<h1>2048小游戏</h1>
</div>
<div id="game">
<div id="gamecenter">
<div id="bg">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<ul>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
<div id="control">
<div id="btndiv">
<ul>
<li id="start">start</li>
</ul>
</div>
<table>
<tr>
<td></td>
<td class="c up">↑</td>
<td></td>
</tr>
<tr>
<td class="c lf">←</td>
<td></td>
<td class="c rt">→</td>
</tr>
<tr>
<td></td>
<td class="c dn">↓</td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript" src="resource/js/utils/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var numArray = null;
var winFlag = 64; // 获胜标识
var cols = 4; // 列
var rows = 4; // 行
var firstTimeCreateNum = 2;
// 对应数字背景色和字体颜色
var colorArray =
[
{"num":0 ,"bgcolor":"#fff" , "ftcolor":"#fff" },
{"num":2 ,"bgcolor":"#f7e09f" , "ftcolor":"#666" },
{"num":4 ,"bgcolor":"#f4b5d3" , "ftcolor":"#666" },
{"num":8 ,"bgcolor":"#c9f6bf" , "ftcolor":"#666" },
{"num":16 ,"bgcolor":"#aed6fb" , "ftcolor":"#666" },
{"num":32 ,"bgcolor":"#fbaebe" , "ftcolor":"#666" },
{"num":64 ,"bgcolor":"#e1fbae" , "ftcolor":"#666" },
{"num":128 ,"bgcolor":"#b2aefb" , "ftcolor":"#666" },
{"num":256 ,"bgcolor":"#d362a5" , "ftcolor":"#666" },
{"num":512 ,"bgcolor":"#dcdd6b" , "ftcolor":"#666" },
{"num":1024 ,"bgcolor":"#ee9e63" , "ftcolor":"#666" },
{"num":2048 ,"bgcolor":"#33c524" , "ftcolor":"#666" }
];
$(document).keydown(function(event){
//判断当event.keyCode 为37时（即左方面键），执行函数to_left();
//判断当event.keyCode 为39时（即右方面键），执行函数to_right();
//alert(event.keyCode);
if(event.keyCode == 13){
//do somethings;
start();
}
if (event.keyCode == 37){
left();
}
if (event.keyCode == 38){
up();
}
if (event.keyCode == 39){
right();
}
if (event.keyCode == 40){
down();
}
});
function start()
{
numArray = init(cols,rows);
numArray = appendRandomToArray(numArray,firstTimeCreateNum,'');
paint(numArray);
}
function up()
{
numArray = calAndMeger('up',numArray);
numArray = appendRandomToArray(numArray,1,2);
paint(numArray);
isGameOver(numArray);
}
function down(){
numArray = calAndMeger('down');
numArray = appendRandomToArray(numArray,1,2);
paint(numArray);
isGameOver(numArray);
}
function left(){
numArray = calAndMeger('left');
numArray = appendRandomToArray(numArray,1,2);
paint(numArray);
isGameOver(numArray);
}
function right(){
numArray = calAndMeger('right');
numArray = appendRandomToArray(numArray,1,2);
paint(numArray);
isGameOver(numArray);
}
// 开始按钮
$("#start").click(function(){
numArray = init(cols,rows);
numArray = appendRandomToArray(numArray,firstTimeCreateNum,'');
paint(numArray);
});
// 向上操作
$(".up").click(function(){
numArray = calAndMeger('up',numArray);
numArray = appendRandomToArray(numArray,1,2);
paint(numArray);
isGameOver(numArray);
})
// 向左操作
$(".lf").click(function(){
numArray = calAndMeger('left');
numArray = appendRandomToArray(numArray,1,2);
paint(numArray);
isGameOver(numArray);
})
$(".rt").click(function(){
numArray = calAndMeger('right');
numArray = appendRandomToArray(numArray,1,2);
paint(numArray);
isGameOver(numArray);
})
$(".dn").click(function(){
//numArray = reSort('down');
numArray = calAndMeger('down');
numArray = appendRandomToArray(numArray,1,2);
paint(numArray);
isGameOver(numArray);
})
// 计算并合并
function calAndMeger(direction,array)
{
var tempArray = init(4,4);
if(direction=='up')
{
for(var i=0;i<numArray.length;i++)
{
var a = numArray[i];
var count = 0;
for(var j=0;j<a.length;j++)
{
var x = numArray[j][i];
if(x==0)
{
continue;
}
var t= j+1;
var flag = false;
while(t<a.length)
{
if(numArray[t][i]>0 && numArray[t][i]==x)
{
tempArray[count][i] = x+x;
// 将后面那个数字置为0
numArray[t][i]=0;
count++;
flag = true;
break;
}
t++;
}
if(!flag)
{
// 没发现相邻的两个相同的数字 中间为0跳过
tempArray[count][i] = x;
count++;
}
}
}
}
if(direction=='down')
{
for(var i=0;i<numArray.length;i++)
{
var a = numArray[i];
var count = a.length-1;
for(var j=a.length-1;j>=0;j--)
{
var x = numArray[j][i];
if(x==0)
{
continue;
}
var t = j-1;
var flag = false;
while(t>=0)
{
if(numArray[t][i]>0 && numArray[t][i]==x)
{
tempArray[count][i] = x+x;
numArray[t][i]=0;
count--;
flag = true;
break;
}
t--;
}
if(!flag)
{
tempArray[count][i] = x
count--;
}
}
}
}
if(direction=='left')
{
for(var i=0;i<numArray.length;i++)
{
var a = numArray[i];
var count = 0;
for(var j=0;j<a.length;j++)
{
var x = a[j];
if(x==0)
{
continue;
}
var flag = false;
var t = j+1;
while(t<a.length)
{
if(a[t]>0 && a[t]==x)
{
tempArray[i][count] = x+x;
a[t]=0;
count++;
flag = true;
break;
}
t++;
}
if(!flag)
{
tempArray[i][count] = x;
count++;
}
}
}
}
if(direction=='right')
{
for(var i=0;i<numArray.length;i++)
{
var a = numArray[i];
var count = a.length-1;
for(var j=a.length-1;j>=0;j--)
{
var x = a[j];
if(x==0)
{
continue;
}
var flag = false;
var t = j-1;
while(t>=0)
{
if(a[t]>0 && a[t]==x)
{
tempArray[i][count] = x+x;
a[t]=0;
count--;
flag = true;
break;
}
t--;
}
if(!flag)
{
tempArray[i][count] = x;
count--;
}
}
}
}
return tempArray;
}
/**
// 重新组合 按某个方向
function reSort(direction)
{
var tempArray = init(4,4);
if(direction=='left')
{
for(var i=0;i<numArray.length;i++)
{
var a = numArray[i];
var count = 0;
for(var j=0;j<a.length;j++)
{
var x = a[j];
if(x>0)
{
tempArray[i][count] = x;
count++;
}
}
}
}
if(direction=="up")
{
for(var i=0;i<numArray.length;i++)
{
var a = numArray[i];
var count = 0;
for(var j=0;j<a.length;j++)
{
var x = numArray[j][i];
if(x>0)
{
tempArray[count][i] = x;
count++;
}
}
}
}
if(direction=="right")
{
for(var i=0;i<numArray.length;i++)
{
var a = numArray[i];
var count = a.length-1;
for(var j=a.length-1;j>=0;j--)
{
var x = a[j];
if(x>0)
{
tempArray[i][count] = x;
count--;
}
}
}
}
if(direction=="down")
{
for(var i=0;i<numArray.length;i++)
{
var a = numArray[i];
var count = a.length-1;
for(var j=a.length-1;j>=0;j--)
{
var x = numArray[j][i];
if(x>0)
{
tempArray[count][i] = x;
count--;
}
}
}
}
return tempArray;
}
**/
// 初始化 数组数据
function init(x ,y)
{
var a = new Array();
for (i = 0 ;i < x ; i++)
{
a[i] = new Array();
for (j = 0 ; j < y ; j ++)
{
a[i][j] = 0;
}
}
return a;
}
// 向数组中添加数据
// array 表示数组 num表示添加数据个数 num表示添加的数字 不传给随机数字2或4
function appendRandomToArray(array,count,num)
{
var result = isCanInsert(array);
if(result==0)
{
paint(array);
alert("很遗憾，您失败了！您没有多余的格子可以放数字了！");
return false;
}
for(var i=0;i<count;i++)
{
var x1 = getRandom(cols);
var y1 = getRandom(cols);
while(array[x1][y1]!=0)
{
x1 = getRandom(cols);
y1 = getRandom(cols);
}
if(num=='' || num==null || num=='undefined')
{
array[x1][y1] = getRandom2or4();
}
else
{
array[x1][y1] = num;
}
}
return array;
}
// 是否还能插入,不能插入,游戏game over
function isCanInsert(array)
{
var count = 0;
for(var i=0;i<array.length;i++)
{
var a = array[i];
for(var j=0;j<a.length;j++)
{
if(a[j]==0)
{
count++;
}
}
}
return count;
}
// 获取0-max之间随机数 不包含0和max
function getRandom(max)
{
return Math.floor(Math.random()* max);
}
// 获取随机的2或4
function getRandom2or4()
{
return Math.floor(Math.random()*2+1)*2;
}
// 游戏是否胜利
function isGameOver(array)
{
var flag = false;
for(var i=0;i<array.length;i++)
{
var a = array[i];
for(var j=0;j<a.length;j++)
{
if(a[j]==winFlag)
{
flag =true;
break;
}
}
}
if(flag)
{
alert("恭喜您，您胜利了！");
return false;
}
}
// 渲染画面
function paint(array)
{
for(var i=0;i<array.length;i++)
{
var a = array[i];
for(var j=0;j<a.length;j++)
{
var x =a[j];
for(var m=0;m<colorArray.length;m++)
{
if(x == colorArray[m].num)
{
if(x==0)
{
x="";
}
$("#gamecenter ul:eq("+i+") li:eq("+j+")").html(x);
$("#gamecenter ul:eq("+i+") li:eq("+j+")").css({"background":colorArray[m].bgcolor});
}
}
}
}
}
})
</script>
</html>
类似资料：