<html>
<head>
<title>2048</title>
<meta http-equiv='content-type' content='text/html;charset=gb2312' />
<style type="text/css">
body, div, ul, li, p {
padding: 0;
margin: 0;
border-radius: 10px;
}
body {
font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif;
background: #FFFCEC;
}
.game_box {
margin: 20px auto;
width: 400px;
}
.info {
height: 60px;
color: #333;
font-size: 32px;
}
.main_box {
border: 2px solid #8E8E8E;
background-color: #8E8E8E;
height: 396px;
color: #333;
font-size: 36px;
font-weight: 700;
text-align: center;
line-height: 100px;
}
.main_box li {
float: left;
background: #d0d0d0;
border: 4px solid #8E8E8E;
height: 91px;
width: 91px;
}
.rule {
color: #333;
font-size: 16px;
}
</style>
</head>
<body οnlοad="init();" οnkeyup="run();">
<div class="game_box">
<div class="info">
<p style="float:right;">得分:<span id="score">0</span></p>
最大值:<span id="max_value">0</span>
</div>
<ul class="main_box">
<li id="11"></li>
<li id="12"></li>
<li id="13"></li>
<li id="14"></li>
<li id="21"></li>
<li id="22"></li>
<li id="23"></li>
<li id="24"></li>
<li id="31"></li>
<li id="32"></li>
<li id="33"></li>
<li id="34"></li>
<li id="41"></li>
<li id="42"></li>
<li id="43"></li>
<li id="44"></li>
</ul>
<div style="clear:both;"></div>
<p class="rule">玩法:</p>
<p class="rule">1.用键盘上下左右键控制数字走向</p>
<p class="rule">2.当点击了一个方向时,格子中的数字会全部往那个方向移动,直到不能再移动,如果有相同的数字则会合并</p>
<p class="rule">3.当格子中不再有可移动和可合并的数字时,游戏结束</p>
</div>
</body>
<script type="text/javascript">
var table = {
11: 0, 12: 0, 13: 0, 14: 0,
21: 0, 22: 0, 23: 0, 24: 0,
31: 0, 32: 0, 33: 0, 34: 0,
41: 0, 42: 0, 43: 0, 44: 0
};//整个表格
var cur_queue = null;//由于移动时是一行或一列移动的,此变量代表需要处理的当前行和列
var direction = 0;//当前操作移动的方向
var max_value = 0;//最大值
var score = 0;//最高分数
function is_num_exist() {//判断当前处理行(列)是否有数字,有则进行处理,无则不用处理
if (table[cur_queue[1]] + table[cur_queue[2]] + table[cur_queue[3]] + table[cur_queue[4]] > 0) {
return true;
} else {
return false;
}
}
function need_move() {//当前行(列)是否需要移动(不包括合并)
if (Boolean(table[cur_queue[4]]) >= Boolean(table[cur_queue[3]]) && Boolean(table[cur_queue[3]]) >= Boolean(table[cur_queue[2]]) && Boolean(table[cur_queue[2]]) >= Boolean(table[cur_queue[1]])) {
return false;
} else {
return true;
}
}
function need_merge() {//当前行(列)是否需要合并
if ((table[cur_queue[4]] == table[cur_queue[3]]) && table[cur_queue[4]] && table[cur_queue[3]] || (table[cur_queue[3]] == table[cur_queue[2]]) && table[cur_queue[3]] && table[cur_queue[2]] || (table[cur_queue[2]] == table[cur_queue[1]]) && table[cur_queue[2]] && table[cur_queue[1]]) {
return true;
} else {
return false;
}
}
function move() {//对当前行(列)的数字进行移动
for (var i = 4; i >= 2; i--) {
if (Boolean(table[cur_queue[i]] < Boolean(table[cur_queue[i - 1]]))) {
table[cur_queue[i]] = table[cur_queue[i - 1]];
table[cur_queue[i - 1]] = 0;
break;
}
}
}
function merge() {//对当前行(列)的数字进行合并
for (var i = 4; i >= 2; i--) {
if (table[cur_queue[i]] == table[cur_queue[i - 1]]) {
score = score + table[cur_queue[i]];
table[cur_queue[i]] = table[cur_queue[i]] + table[cur_queue[i - 1]];
table[cur_queue[i - 1]] = 0;
document.getElementById("score").innerHTML = score;//更新最高分
break;
}
}
}
function run() {//点击上下左右键时开始执行
var done = false;
if (event.keyCode >= 37 && event.keyCode <= 40) {//只有
set_direction();//设置移动方向参数
for (var i = 1; i <= 4; i++) {//由于一个方向上移动时有4行(列)所以需要逐行处理
set_cur_queue(i);//设置当前行(列)
if (is_num_exist()) {
if (need_move() || need_merge()) {
done = true;//此变量用来限制每次只合并一次
}
while (need_move()) {//如果可以移动则一直移动
move();
}
if (need_merge()) {//如果需要合并
if (table[cur_queue[1]] == table[cur_queue[2]] && table[cur_queue[3]] == table[cur_queue[4]]) {//特例,当一行(列)上四个数字全部相同时候,进行两次合并
merge();
while (need_move()) {
move();
}
merge();
} else {
merge();
while (need_move()) {
move();
}
}
}
}
}
//var empty_box = find_empty_box();//获取当前空格子集合
//if(empty_box.length==0&&!need_merge()) {//如果没有没有空位且不能合并
// alert('Game over');
// return;
//}
if (done) {//如果此次有移动或合并,即有效操作,则生成新的数字
create_and_set_num();
}
update_max_value();//更新最大值
draw();//重新绘制表格用于显示
}
}
function update_max_value() {
max_value = 0;
for (var i in table) {
if (table[i] > max_value) {
max_value = table[i];
}
}
document.getElementById("max_value").innerHTML = max_value;
}
function set_cur_queue(queue_num) {
if (direction == 37) {
cur_queue = { 1: queue_num * 10 + 4, 2: queue_num * 10 + 3, 3: queue_num * 10 + 2, 4: queue_num * 10 + 1 };
} else if (direction == 38) {
cur_queue = { 1: 40 + queue_num, 2: 30 + queue_num, 3: 20 + queue_num, 4: 10 + queue_num };
} else if (direction == 39) {
cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 };
} else if (direction == 40) {
cur_queue = { 1: 10 + queue_num, 2: 20 + queue_num, 3: 30 + queue_num, 4: 40 + queue_num };
} else {
cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 };
}
}
function draw() {//整体刷新16个格子
for (var i = 10; i <= 40; i += 10) {
for (var j = 1; j <= 4; j++) {
if (table[i + j] != 0) {
document.getElementById(i + j).innerHTML = table[i + j];
} else {
document.getElementById(i + j).innerHTML = '';
}
}
}
}
function set_direction() {//设置此次移动的方向
direction = event.keyCode;
}
function set_new_num(empty_box) {//生成新的数字
var num = 0;
var ranNum = Math.random() * 100;
if (ranNum > 80) {
num = 4;
} else {
num = 2;
}
var box_num = Math.floor(Math.random() * (empty_box.length));
table[empty_box[box_num]] = num;
}
function find_empty_box() {//获得所有的空格子,即值为0的格子集合
var empty_box = [];
for (var num in table) {
if (table[num] == 0) {
empty_box.push(num);
}
}
return empty_box;
}
function init() {
create_and_set_num();
for (var i = 1; i <= 4; i++) {
set_cur_queue(i);
draw();
}
update_max_value();
}
function create_and_set_num() {
var empty_box;
empty_box = find_empty_box();
set_new_num(empty_box);
}
</script>
</html>
<pre class="javascript" name="code">//自己重新写了一遍,收获不少
<html>
<head>
<title>4096</title>
<meta http-equiv="content-type" content="test/html; charset=gb2312" />
<style type="text/css">
body,p,ul,li,div
{
padding:0;
margin:0;
border-radius:10px;
}
body
{
font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif;
background-image:url(image/backimage.jpg);
}
.game_box
{
margin:20px auto;
width:400px;
}
.info
{
height:60px;
color:red;
font-size:32px;
}
.main_box
{
border:2px solid #8e8e8e;
background-color:#8e8e8e;
height:396px;
color:black;
font-size:32px;
font-weight:800;
text-align:center;
line-height:90px;
}
.main_box li
{
float:left;
background-color:#d0d0d0;
border:4px solid #8e8e8e;
height:91px;
width:91px;
}
.rule
{
font-size:32px;
color:#ffd800;
}
</style>
</head>
<body οnlοad="init();" οnkeyup="run();">
<div class="game_box">
<div class="info">
<p style="float:right;">得分:<span id="score">0</span></p>
最大值:<span id="max_value">0</span>
</div>
<ul class="main_box">
<li id="11">11</li>
<li id="12">12</li>
<li id="13">13</li>
<li id="14">14</li>
<li id="21">21</li>
<li id="22">23</li>
<li id="23">23</li>
<li id="24">24</li>
<li id="31">31</li>
<li id="32">32</li>
<li id="33">33</li>
<li id="34">34</li>
<li id="41">41</li>
<li id="42">42</li>
<li id="43">43</li>
<li id="44">44</li>
</ul>
<div style="clear:both;"></div>
<p class="rule">玩法</p>
<p class="rule">1.用键盘上下左右键控制数字走向</p>
<p class="rule">2.当点击了一个方向时,格子中的数字会全部往那个方向移动,直到不能再移动,如果有相同的数字则会合并</p>
<p class="rule">3.当格子中不再有可移动和可合并的数字时,游戏结束</p>
<div>
</body>
</html>
<script type="text/javascript">
var table =
{
11: 0, 12: 0, 13: 0, 14: 0,
21: 0, 22: 0, 23: 0, 24: 0,
31: 0, 32: 0, 33: 0, 34: 0,
41: 0, 42: 0, 43: 0, 44: 0
};
var cur_queue = null;
var score = 0;
var direction = 0;
var max_value = 0;
function is_num_exist()
{
var sum = 0;
for(var i=1;i<=4;i++)
{
sum += table[cur_queue[i]];
}
if(sum>0)
{
return true;
}
else
{
return false;
}
}
function need_move()
{
for(var i=4;i>=2;i--)
{
if (Boolean(table[cur_queue[i]]) >= Boolean(table[cur_queue[i - 1]]))
continue;
else
break;
}
if(i==1)
{
return false;
}
else
{
return true;
}
}
function need_merge()
{
var flag = false;
for(var i=4;i>=2;i--)
{
if (table[cur_queue[i]] == table[cur_queue[i - 1]] && table[cur_queue[i]] && table[cur_queue[i - 1]])
{
flag = true;
break;
}
}
if(flag)
{
return true;
}
else
{
return false;
}
}
function move()
{
for(var i=4;i>=2;i--)
{
if(Boolean(table[cur_queue[i]])<Boolean(table[cur_queue[i-1]]))
{
table[cur_queue[i]] = table[cur_queue[i - 1]];
table[cur_queue[i - 1]] = 0;
break;
}
}
}
function merge()
{
for(var i=4;i>=2;i--)
{
if(table[cur_queue[i]]==table[cur_queue[i-1]])
{
table[cur_queue[i]] += table[cur_queue[i - 1]];
score += table[cur_queue[i]];
table[cur_queue[i - 1]] = 0;
document.getElementById("score").innerHTML = score;
break;
}
}
}
function set_direction()
{
direction = event.keyCode;
}
function set_cur_queue(num)
{
if(direction==37)
{
cur_queue = { 1: num * 10 + 4, 2: num * 10 + 3, 3: num * 10 + 2, 4: num * 10 + 1 };
}
else if(direction==38)
{
cur_queue = { 1: 40 + num, 2: 30 + num, 3: 20 + num, 4: 10 + num };
}
else if(direction==39)
{
cur_queue = { 1: num * 10 + 1, 2: num * 10 + 2, 3: num * 10 + 3, 4: num * 10 + 4 };
}
else if(direction==40)
{
cur_queue = { 1: 10 + num, 2: 20 + num, 3: 30 + num, 4: 40 + num };
}
else
{
cur_queue = { 1: num * 10 + 1, 2: num * 10 + 2, 3: num * 10 + 3, 4: num * 10 + 4 };
}
}
function update_max_value()
{
max_value = 0;
for(var i in table)
{
if(table[i]>max_value)
{
max_value = table[i];
}
}
document.getElementById("max_value").innerHTML = max_value;
}
function draw()
{
for(var i=10;i<=40;i+=10)
{
for(var j=1;j<=4;j++)
{
if(table[i+j]!=0)
{
document.getElementById(i + j).innerHTML = table[i + j];
}
else
{
document.getElementById(i + j).innerHTML = '';
}
}
}
}
function find_empty_box()
{
var empty_box = [];
for(var num in table)
{
if(table[num]==0)
{
empty_box.push(num);
}
}
return empty_box;
}
function set_new_num(empty_box)
{
var num = 0;
var rannum = Math.random() * 100;
if(rannum>80)
{
num = 4;
}
else
{
num = 2;
}
var box_num = Math.floor(Math.random() * empty_box.length)
table[empty_box[box_num]] = num;
}
function creat_and_set_num()
{
var empty_box;
empty_box = find_empty_box();
set_new_num(empty_box);
}
function init()
{
creat_and_set_num();
for(var i=1;i<=4;i++)
{
set_cur_queue(i);
draw();
}
update_max_value();
}
function run()
{
var down = false;
if(event.keyCode>=37&&event.keyCode<=40)
{
set_direction();
for(var i=1;i<=4;i++)
{
set_cur_queue(i);
if(is_num_exist())
{
if (need_move() || need_merge())
{
down = true;
}
while(need_move())
{
move();
}
if(need_merge())
{
if(table[cur_queue[1]]==table[cur_queue[2]]&&table[cur_queue[3]]==table[cur_queue[4]])
{
merge();
while(need_move())
{
move();
}
merge(0);
}
else
{
merge();
while(need_move())
{
move();
}
}
}
}
}
if(down)
{
creat_and_set_num();
}
update_max_value();
draw();
}
}
</script>
<pre class="javascript" name="code">//详细解释
<html>
<head>
<title>2048</title>
<meta http-equiv='content-type' content='text/html;charset=gb2312' />
<style type="text/css">
body, div, ul, li, p {
padding: 0;
margin: 0;
border-radius: 10px;
}
body { /*设置body体的格式*/
font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif;
background-image: url(image/backimage.jpg);
}
.game_box { /*设置游戏大(外)格子(4*4的正方形)的格式*/
margin: 20px auto;
width: 400px;
}
.info { /*设置积分的格式*/
height: 60px;/*字体距离格子的高度*/
color: #ff0000;/*字体颜色*/
font-size:32px;/*字体大小*/
}
.main_box { /*设置小(内)格子的样式*/
border: 2px solid #8E8E8E; /*小格子与大格子之间的边框宽度和颜色*/
background-color: #8E8E8E; /*格子之间空隙处的颜色*/
height: 400px;/*游戏格子(4*4的)的高度*/
color: #333; /*数字颜色*/
font-size: 32px;/*数字的大小*/
font-weight: 700;/*字体加粗程度*/
text-align: center;/*字体出现的位置*/
line-height: 90px;/*距离小格子上边框距离*/
}
.main_box li {/*小格子的格式*/
float: left;
background: #d0d0d0;/*小格子的背景色*/
border: 4px solid #8E8E8E;/*小格子之间的边框宽度和颜色*/
height: 91px;/*小格子的高和宽*/
width: 91px;
}
.rule {/*设置规则说明的格式*/
color: #333;/*字体颜色是黑色*/
font-size: 16px;/*字体大小*/
}
</style>
</head>
<body οnlοad="init();" οnkeyup="run();">
<div class="game_box">
<div class="info">
<p style="float:right;">得分:<span id="score">0</span></p>
最大值:<span id="max_value">0</span>
</div>
<ul class="main_box">
<li id="11"></li>
<li id="12"></li>
<li id="13"></li>
<li id="14"></li>
<li id="21"></li>
<li id="22"></li>
<li id="23"></li>
<li id="24"></li>
<li id="31"></li>
<li id="32"></li>
<li id="33"></li>
<li id="34"></li>
<li id="41"></li>
<li id="42"></li>
<li id="43"></li>
<li id="44"></li>
</ul>
<div style="clear:both;"></div>
<p class="rule">玩法:</p>
<p class="rule">1.用键盘上下左右键控制数字走向</p>
<p class="rule">2.当点击了一个方向时,格子中的数字会全部往那个方向移动,直到不能再移动,如果有相同的数字则会合并</p>
<p class="rule">3.当格子中不再有可移动和可合并的数字时,游戏结束</p>
</div>
</body>
</html>
<script type="text/javascript">
var table = //初始化整个表格,11:0表示id号为11的格子内的数为0;
{
11: 0, 12: 0, 13: 0, 14: 0,
21: 0, 22: 0, 23: 0, 24: 0,
31: 0, 32: 0, 33: 0, 34: 0,
41: 0, 42: 0, 43: 0, 44: 0
};
var cur_queue = null;//由于移动时是一行或一列移动的,此变量代表需要处理的当前行和列
var direction = 0;//当前操作移动的方向
var max_value = 0;//最大值
var score = 0;//最高分数
function is_num_exist()
{ //判断当前处理行(列)是否有数字,有则进行处理,无则不用处理
if (table[cur_queue[1]] + table[cur_queue[2]] + table[cur_queue[3]] + table[cur_queue[4]] > 0)
{
return true;
}
else
{
return false;
}
}
function need_move()
{ //当前行(列)是否需要移动(不包括合并)
if (Boolean(table[cur_queue[4]]) >= Boolean(table[cur_queue[3]]) && Boolean(table[cur_queue[3]]) >= Boolean(table[cur_queue[2]]) && Boolean(table[cur_queue[2]]) >= Boolean(table[cur_queue[1]]))
{
return false;
}
else
{
return true;
}
}
function need_merge()
{ //当前行(列)是否需要合并
if ((table[cur_queue[4]] == table[cur_queue[3]]) && table[cur_queue[4]] && table[cur_queue[3]] || (table[cur_queue[3]] == table[cur_queue[2]]) && table[cur_queue[3]] && table[cur_queue[2]] || (table[cur_queue[2]] == table[cur_queue[1]]) && table[cur_queue[2]] && table[cur_queue[1]])
{
return true;
}
else
{
return false;
}
}
function move()
{ //对当前行(列)的数字进行移动
for (var i = 4; i >= 2; i--)
{
if (Boolean(table[cur_queue[i]] < Boolean(table[cur_queue[i - 1]])))
{
table[cur_queue[i]] = table[cur_queue[i - 1]];
table[cur_queue[i - 1]] = 0;
break;
}
}
}
function merge()
{ //对当前行(列)的数字进行合并
for (var i = 4; i >= 2; i--)
{
if (table[cur_queue[i]] == table[cur_queue[i - 1]])
{
table[cur_queue[i]] = table[cur_queue[i]] + table[cur_queue[i - 1]];
score = score + table[cur_queue[i]];
table[cur_queue[i - 1]] = 0;
document.getElementById("score").innerHTML = score;//更新最高分
break;
}
}
}
function run()
{ //点击上下左右键时开始执行
var done = false;
if (event.keyCode >= 37 && event.keyCode <= 40)
{ //只有上下左右四个键
set_direction();//设置移动方向参数
for (var i = 1; i <= 4; i++)
{ //由于一个方向上移动时有4行(列)所以需要逐行处理
set_cur_queue(i);//设置当前行(列)
if (is_num_exist())
{
if (need_move() || need_merge())
{
done = true;//此变量用来限制每次只合并一次
}
while (need_move())
{ //如果可以移动则一直移动
move();
}
if (need_merge())
{ //如果需要合并
if (table[cur_queue[1]] == table[cur_queue[2]] && table[cur_queue[3]] == table[cur_queue[4]])
{ //特例,当一行(列)上四个数字全部相同时候,进行两次合并
merge();
while (need_move())
{
move();
}
merge();
}
else
{
merge();
while (need_move())
{
move();
}
}
}
}
}
//var empty_box = find_empty_box();//获取当前空格子集合
//if(empty_box.length==0&&!need_merge()) {//如果没有没有空位且不能合并
// alert('Game over');
// return;
//}
if (done)
{ //如果此次有移动或合并,即有效操作,则生成新的数字
create_and_set_num();
}
update_max_value();//更新最大值
draw();//重新绘制表格用于显示
}
}
function update_max_value()
{
max_value = 0;
for (var i in table)
{
if (table[i] > max_value)
{
max_value = table[i];
}
}
document.getElementById("max_value").innerHTML = max_value;
}
function set_cur_queue(queue_num)
{
if (direction == 37) //左
{
cur_queue = { 1: queue_num * 10 + 4, 2: queue_num * 10 + 3, 3: queue_num * 10 + 2, 4: queue_num * 10 + 1 };
}
else if (direction == 38) //上
{
cur_queue = { 1: 40 + queue_num, 2: 30 + queue_num, 3: 20 + queue_num, 4: 10 + queue_num };
}
else if (direction == 39) //右
{
cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 };
}
else if (direction == 40) //下
{
cur_queue = { 1: 10 + queue_num, 2: 20 + queue_num, 3: 30 + queue_num, 4: 40 + queue_num };
}
else
{
cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 };
}
}
function draw()
{ //整体刷新16个格子
for (var i = 10; i <= 40; i += 10)
{
for (var j = 1; j <= 4; j++)
{
if (table[i + j] != 0)
{
document.getElementById(i + j).innerHTML = table[i + j];
}
else
{
document.getElementById(i + j).innerHTML = '';
}
}
}
}
function set_direction()
{ //设置此次移动的方向
direction = event.keyCode;
}
function set_new_num(empty_box)
{ //生成新的数字
var num = 0;
var ranNum = Math.random() * 100;//产生0--100以内的随机数确定2和4出现的概率为4:1
if (ranNum > 80)
{
num = 4;
}
else
{
num = 2;
}
var box_num = Math.floor(Math.random() * (empty_box.length));//找到是空箱子的编号,floor向下取整
table[empty_box[box_num]] = num;//将这个空箱子赋值
}
function find_empty_box()
{ //获得所有的空格子,即值为0的格子集合
var empty_box = [];
for (var num in table)
{
if (table[num] == 0)
{
empty_box.push(num);
}
}
return empty_box;
}
function init()
{
create_and_set_num();
for (var i = 1; i <= 4; i++)
{
set_cur_queue(i);
draw();
}
update_max_value();
}
function create_and_set_num()
{
var empty_box;
empty_box = find_empty_box();
set_new_num(empty_box);
}
</script>