標籤：哈哈 queue har file sof nav 產生 over add
這幾天玩兒著2048這個遊戲，突然心血來潮想練習下敲代碼的思路。於是乎就模仿做了一個，到眼下位置還沒有實現動態移動，不是非常好看，只是玩兒著自己模仿的小遊戲還是蠻爽的，哈哈假設沒有玩兒過這個遊戲，最好先試玩兒下，這樣看起下邊的代碼來easy些
用的是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>
純JS寫的2048遊戲，分享之
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
