純JS寫的2048遊戲,分享之

來源:互聯網
上載者:User

標籤:哈哈   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遊戲,分享之

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: