javascript實現html網頁版的2048遊戲原始碼
原文:javascript實現html網頁版的2048遊戲原始碼
在這裡看到了很多有意思的程式碼。本著分享的精神把自己寫的2048的程式碼也貼出來。當然本人是一個超級菜鳥,有些地方沒有完善。歡迎各位大神解決。(介面很醜,不要介意)
支援觸屏及電腦鍵盤操作(wasd四個按鍵)
index.html
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>2048</title> <style type="text/css"> table { table-layout: fixed } table tr td{ background-color: #D7CE80; border:#666666; font-size:48px; } </style> </head> <script type="text/javascript" src="jquery-1.11.0.js"></script> <script type="text/javascript" src="canvas.js"></script> <body> <div id="version"></div> <table cellspacing="5px" frame="border"> <tr> <td id="0"> </td> <td id="1"> </td> <td id="2"> </td> <td id="3"> </td> </tr> <tr> <td id="4"> </td> <td id="5"> </td> <td id="6"> </td> <td id="7"> </td> </tr> <tr> <td id="8"> </td> <td id="9"> </td> <td id="10"> </td> <td id="11"> </td> </tr> <tr> <td id="12"> </td> <td id="13"> </td> <td id="14"> </td> <td id="15"> </td> </tr> </table> <script type="text/javascript" src="setHeight.js"></script> <script type="text/javascript"> var startX = 0, startY = 0,d=-1; //touchstart事件 function touchSatrtFunc(evt) { try { evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X座標 var y = Number(touch.pageY); //頁面觸點Y座標 //記錄觸點初始位置 startX = x; startY = y; } catch (e) { alert('touchSatrtFunc:' + e.message); } } //touchmove事件,這個事件無法獲取座標 function touchMoveFunc(evt) { try { evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X座標 var y = Number(touch.pageY); //頁面觸點Y座標 //判斷滑動方向 if((y-startY)>0&&Math.abs((y-startY)/(x-startX))>1) { d=0; } else if(y-startY<0&&Math.abs((y-startY)/(x-startX))>1) { d=1; } else if((x-startX)>0&&Math.abs((y-startY)/(x-startX))<1) { d=2; } else { d=3; } } catch (e) { alert('touchMoveFunc:' + e.message); } } //touchend事件 function touchEndFunc(evt) { try { evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等 if(d==0) { down();//下 } else if(d==1) { up();//上 } else if(d==2) { right();//右 } else if(d==3) { left();//左 } } catch (e) { alert('touchEndFunc:' + e.message); } } //繫結事件 function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); document.addEventListener('touchend', touchEndFunc, false); } //判斷是否支援觸控事件 function isTouchDevice() { // document.getElementById("version").innerHTML = navigator.appVersion; document.createEvent("TouchEvent"); bindEvent(); //繫結事件 } document.onkeypress=function(evt) { var evt=window.event?window.event:evt; if (evt.keyCode=='119' ) { up();//上 } if(evt.keyCode=='115') { down();//下 } if(evt.keyCode=='100') { right(); } if(evt.keyCode=='97') { left(); } } window.onload = isTouchDevice; </script> </body> </html>
setHeight.js
// JavaScript Document $(document).ready( function(){ x=$(window).width(); y=$(window).height(); if(x<=y) { $("td").css("width",x/6) .css("height",x/6); } else { $("td").css("width",y/6) .css("height",y/6); } }); num=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0); i=Math.floor(Math.random()*16); num[i]=2; i=Math.floor(Math.random()*16); num[i]=2; strArr=num.toString(); ga(strArr); donum();
canvas.js
// JavaScript Document getArr=new Array(); function ga(str) { getArr = str.split(","); } function donum() { for(i=0;i<16;i++) { if(getArr[i]!=0) { document.getElementById(i).innerText=getArr[i]; } else { document.getElementById(i).innerText=""; } } } function randnum() { var num; for(j=0;j<16;j++) { if(getArr[j]!=0) { num++; } } if(num!=16) { while(1) { i=Math.floor(Math.random()*16); if(getArr[i]==0) { var rn=Math.ceil(Math.random()*10); if(rn>0&&rn<=6) { getArr[i]=2; } else if(rn>6&&rn<=9) { getArr[i]=4; } else { getArr[i]=8; } break; } } } donum(); } function down() { for(var num=12;num<=15;num++) { if(getArr[num]==getArr[num-4]) { getArr[num]=parseInt(getArr[num-4])+parseInt(getArr[num]); getArr[num-4]=0; if(getArr[num-8]==getArr[num-12]) { getArr[num-8]=parseInt(getArr[num-8])+parseInt(getArr[num-12]); getArr[num-12]=0; } } else if(getArr[num-4]==getArr[num-8]) { getArr[num-4]=parseInt(getArr[num-8])+parseInt(getArr[num-4]); getArr[num-8]=0; } else if(getArr[num-8]==getArr[num-12]) { getArr[num-8]=parseInt(getArr[num-12])+parseInt(getArr[num-8]); getArr[num-12]=0; } for(var j=num;j>=num-8;j=j-4) { if(getArr[j]==0) { for(var i=j-4;i>=0;i=i-4) { if(getArr[i]!=0) { getArr[j]=getArr[i]; getArr[i]=0; break; } } } } } donum(); randnum(); } function up() { for(var num=3;num>=0;num--) { if(getArr[num]==getArr[num+4]) { getArr[num]=parseInt(getArr[num+4])+parseInt(getArr[num]); getArr[num+4]=0; if(getArr[num+8]==getArr[num+12]) { getArr[num+8]=parseInt(getArr[num+8])+parseInt(getArr[num+12]); getArr[num+12]=0; } } else if(getArr[num+4]==getArr[num+8]) { getArr[num+4]=parseInt(getArr[num+8])+parseInt(getArr[num+4]); getArr[num+8]=0; } else if(getArr[num+8]==getArr[num+12]) { getArr[num+8]=parseInt(getArr[num+12])+parseInt(getArr[num+8]); getArr[num+12]=0; } for(var j=num;j<=num+8;j=j+4) { if(getArr[j]==0) { for(var i=j+4;i<=15;i=i+4) { if(getArr[i]!=0) { getArr[j]=getArr[i]; getArr[i]=0; break; } } } } } donum(); randnum(); } function right() { for(var num=15;num>=3;num=num-4) { if(getArr[num]==getArr[num-1]) { getArr[num]=parseInt(getArr[num-1])+parseInt(getArr[num]); getArr[num-1]=0; if(getArr[num-2]==getArr[num-3]) { getArr[num-2]=parseInt(getArr[num-2])+parseInt(getArr[num-3]); getArr[num-3]=0; } } else if(getArr[num-1]==getArr[num-2]) { getArr[num-1]=parseInt(getArr[num-2])+parseInt(getArr[num-1]); getArr[num-2]=0; } else if(getArr[num-2]==getArr[num-3]) { getArr[num-2]=parseInt(getArr[num-3])+parseInt(getArr[num-2]); getArr[num-3]=0; } for(var j=num;j>=num-2;j=j-1) { if(getArr[j]==0) { for(var i=j-1;i>=num-3;i=i-1) { if(getArr[i]!=0) { getArr[j]=getArr[i]; getArr[i]=0; break; } } } } } donum(); randnum(); } function left() { for(var num=0;num<=12;num=num+4) { if(getArr[num]==getArr[num+1]) { getArr[num]=parseInt(getArr[num+1])+parseInt(getArr[num]); getArr[num+1]=0; if(getArr[num+2]==getArr[num+3]) { getArr[num+2]=parseInt(getArr[num+2])+parseInt(getArr[num+3]); getArr[num+3]=0; } } else if(getArr[num+1]==getArr[num+2]) { getArr[num+1]=parseInt(getArr[num+2])+parseInt(getArr[num+1]); getArr[num+2]=0; } else if(getArr[num+2]==getArr[num+3]) { getArr[num+2]=parseInt(getArr[num+3])+parseInt(getArr[num+2]); getArr[num+3]=0; } for(var j=num;j<=num+2;j=j+1) { if(getArr[j]==0) { for(var i=j+1;i<=num+3;i=i+1) { if(getArr[i]!=0) { getArr[j]=getArr[i]; getArr[i]=0; break; } } } } } donum(); randnum(); }
演示地址:http://myway5.com/html5/2048
由最程式碼官方編輯於2014-9-20 18:04:19
相關文章
- HTML小遊戲2—— 2048網頁版(附完整原始碼)HTML遊戲網頁原始碼
- javascript實現前端小遊戲2048JavaScript前端遊戲
- 200 行程式碼實現簡易版 2048 遊戲行程遊戲
- (完整原始碼)貪吃蛇小遊戲——HTML+CSS+JavaScript實現原始碼遊戲HTMLCSSJavaScript
- 2048原始碼原始碼
- 好看的404頁面html原始碼 網站404原始碼分享HTML原始碼網站
- javascript實現網頁跳轉的程式碼例項JavaScript網頁
- html網頁中如何實現居中效果(程式碼分享)HTML網頁
- javascript實現網頁平滑定位程式碼例項JavaScript網頁
- iOS專案開發實戰——網頁原始碼實現二進位制和HTML的轉換iOS網頁原始碼HTML
- HTML實體與網頁編碼HTML網頁
- JavaScript實現垃圾分類小遊戲教程,附原始碼!JavaScript遊戲原始碼
- 網上書店Html網頁—— table實現HTML網頁
- 一段實現HTML頁面內定期觸發事件的JavaScript程式碼HTML事件JavaScript
- bash shell實現2048小遊戲詳解遊戲
- html網頁新增音樂影片的實現示例HTML網頁
- 【html】網頁呼叫本地exe程式的實現方法HTML網頁
- 成品直播原始碼,html頁面點選按鈕實現頁面跳轉的兩種方法原始碼HTML
- vue實現2048Vue
- 把HTML插入canvas實現網頁截圖HTMLCanvas網頁
- bootstrap實現的線上教育網站首頁、頻道頁html模板boot網站HTML
- html+css+JavaScript實現愛恩斯坦棋遊戲HTMLCSSJavaScript遊戲
- 設為首頁程式碼(html原始碼)HTML原始碼
- C語言在linux終端下實現2048小遊戲:第二版C語言Linux遊戲
- [ 邏輯鍛鍊] 用 JavaScript 做一個小遊戲 ——2048 (初級版)JavaScript遊戲
- [ 邏輯鍛鍊] 用 JavaScript 做一個小遊戲 ——2048 (詳解版)JavaScript遊戲
- 如何實現婚戀app原始碼移動端網頁特效?APP原始碼網頁特效
- Html網頁實現鍵盤Enter響應功能HTML網頁
- iOS專案開發實戰——iOS網路程式設計獲取網頁Html原始碼iOS程式設計網頁HTML原始碼
- javascript實現網頁截圖匯出方案JavaScript網頁
- javascript實現網頁截圖操作介紹JavaScript網頁
- 購書網站前端實現(HTML+CSS+JavaScript)網站前端HTMLCSSJavaScript
- 抓取網頁中的原始碼.網頁原始碼
- TP5開發海賊王版2048遊戲遊戲
- app直播原始碼,平臺登入頁面實現和修改密碼頁面實現APP原始碼密碼
- 網頁常用JavaScript程式碼網頁JavaScript
- 直播app原始碼,HTML + jQuery 實現輪播圖APP原始碼HTMLjQuery
- 【問題&解決】手機網頁Html程式碼實現(解決顯示頁面很小的問題)網頁HTML