JS写的2048游戏，和大家分享下
日期：2014-05-16 浏览次数：20398 次
JS写的2048游戏，跟大家分享下
这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈
如果没有玩儿过这个游戏，最好先试玩儿下，这样看起下边的代码来容易些
试玩儿>>
里边好多步骤写得不够简介明了，欢迎指正
这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈
如果没有玩儿过这个游戏，最好先试玩儿下，这样看起下边的代码来容易些
试玩儿>>
里边好多步骤写得不够简介明了，欢迎指正
<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 onload="init();" onkeyup="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&n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
