纯JS写的2048游戏，分享之

来源：互联网发布：人工智能就业前景编辑：程序博客网时间：2024/05/17 22:56

这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈

如果没有玩儿过这个游戏，最好先试玩儿下，这样看起下边的代码来容易些

用的是event，暂时不支持firefox下玩儿。。。

试玩儿>>

里边好多步骤写得不够简介明了，欢迎指正

两个小时构思，主要构思用什么形式存表格，以及其中用到的几个比较关键的方法，比如：是否需要移动，是否需要合并，移动方法，合并方法等，然后开始编程的时候会遇到很多问题，慢慢解决之

<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() {//判断当前处理行（列）是否有数字，有则进行处理，无则不用处理return table[cur_queue[1]]||table[cur_queue[2]]||table[cur_queue[3]]||table[cur_queue[4]];}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 = Math.max(table[11],table[12],table[13],table[14],table[21],table[22],table[23],table[24],table[31],table[32],table[33],table[34],table[41],table[42],table[43],table[44]);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>

如需转载，请注明作者及出处。

7 0