文章詳情頁

JS原生2048小游戲源碼分享(全網最新)

瀏覽：77日期：2024-03-29 15:11:26

最近在學習算法方面的知識，看到了一個由算法主導的小游戲，這里給大家分享下代碼：

效果：

代碼：

<head> <meta charset='UTF-8'> <meta name='viewport' content='width=360px,user-scalable=no' /> <title>2048小游戲</title> <style>body,h1,div,table,tr,td{ margin: 0px; padding: 0px;}body{ background-color: rgb(0,0,0);}h1{ margin: 36px auto; text-align: center; color: rgba(255,255,255,0.7); font-family: '楷體'; font-size: 48px; text-shadow: 1px 2px 3px rgb(134,134,134);}div{ margin: 12px auto; line-height: 60px;}#box{ margin-top: -24px; width: 240px; height: 60px; text-align: center; font-weight: bold; color: rgb(255,255,255);}#box input{ border: 3px solid rgb(255,255,255); border-radius: 4px; box-shadow: 1px 2px 3px rgb(234,234,234);}#box input:focus{ outline-style: none;}table{ margin: 24px auto; border: 3px solid rgb(255,255,255); border-radius: 6px;}#random,td{ width: 60px; height: 60px; border: 2px solid rgb(255,255,255); border-radius: 18px; text-align: center; font-weight: bold; color: rgb(255,255,255);}td:hover{ cursor: pointer;} </style></head><body> <h1>2 0 4 8</h1><div id='box'> 得分: <span id='span'>0</span> <input type='button' value='新游戲' /></div><div id='random'></div><table border='3px'> <tr><td></td><td></td><td></td><td></td> </tr> <tr><td></td><td></td><td></td><td></td> </tr> <tr><td></td><td></td><td></td><td></td> </tr> <tr><td></td><td></td><td></td><td></td> </tr></table></body><script type='text/javascript'> var span = document.getElementById('span'); var but = document.getElementById('but'); var td = document.getElementsByTagName('td'); //定義得分 var score = 0; //定義隨機數 var random = document.getElementById('random'); var showNums = [2,4,8,16,32,64,128,256,512,1024]; var showNum = 0; //定義背景色數組 var colors = ['rgb(255, 169, 182)','rgb(108, 251, 104)','rgb(255, 150, 46)','rgb(255, 121, 46)','rgb(255, 217, 46)','rgb(46, 200, 255)','rgb(46, 113, 255)','rgb(240, 46, 255)','rgb(46, 255, 175)','rgb(153, 134, 255)']; //初始化程序,生成隨機數 /* start */ function init(){var max = maxNum();var num = 0;for(var i=4;i > 0;i++){ if(max < Math.pow(2,i+1)){num = parseInt(Math.random()*i);break; }else if(max < 2048){continue; }else{num = parseInt(Math.random()*showNums.length);break; }}random.innerHTML = showNums[num];color(random);showNum = showNums[num]; } init(); /* end */ //獲取棋盤中的最大值 /* start */ function maxNum(){var max = 0;for(var i=0;i<td.length;i++){ if(td[i].innerHTML == ''){max = max; }else{if(parseInt(td[i].innerHTML) > max){ max = parseInt(td[i].innerHTML);}else{ max = max;} }}return max; } /* end */ //根據數字顯示背景顏色 /* start */ function color(obj){for(var i=0;i < colors.length;i++){ if(obj.innerHTML == Math.pow(2,i+1)){obj.style = 'background-color: '+colors[i]+';';break; }} } /* end */ //合并算法 /* start */ function offsetTop(obj,index){//合并上if(index > 3){ if(td[(index-4)].innerHTML == obj.innerHTML){td[(index-4)].innerHTML = '';td[(index-4)].style = 'background-color: rgba(0, 0, 0, 0);';return true; }}return false; } function offsetBottom(obj,index){//合并下if(index < 12){ if(td[(index+4)].innerHTML == obj.innerHTML){td[(index+4)].innerHTML = '';td[(index+4)].style = 'background-color: rgba(0, 0, 0, 0);';return true; }}return false; } function offsetLeft(obj,index){//合并左if(index!=0 && index!=4 && index!=8 && index!=12){ if(td[(index-1)].innerHTML == obj.innerHTML){td[(index-1)].innerHTML = '';td[(index-1)].style = 'background-color: rgba(0, 0, 0, 0);'; return true; }}return false; } function offsetRight(obj,index){//合并右if(index!=3 && index!=7 && index!=11 && index!=15){ if(td[(index+1)].innerHTML == obj.innerHTML){td[(index+1)].innerHTML = '';td[(index+1)].style = 'background-color: rgba(0, 0, 0, 0);';return true; }}return false; } /* end */ //判斷單元格是否合并 /* start */ function merge(obj,index){if(offsetTop(obj,index)){ if(offsetBottom(obj,index)){if(offsetLeft(obj,index)){ if(offsetRight(obj,index)){obj.innerHTML = parseInt(obj.innerHTML)*2;//合并上、下、左、右score += 16;merge(obj,index); }else{obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、下、左score += 8;merge(obj,index); }}else if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、下、右 score += 8; merge(obj,index);}else{ obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、下 score += 4; merge(obj,index);} }else if(offsetLeft(obj,index)){if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、左、右 score += 8; merge(obj,index);}else{ obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、左 score += 4; merge(obj,index);} }else if(offsetRight(obj,index)){obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上、右score += 4;merge(obj,index); }else{obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并上score += 2;merge(obj,index); }}else if(offsetBottom(obj,index)){ if(offsetLeft(obj,index)){if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并下、左、右 score += 8; merge(obj,index);}else{ obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并下、左 score += 4; merge(obj,index);} }else if(offsetRight(obj,index)){obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并下、右score += 4;merge(obj,index); }else{obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并下score += 2;merge(obj,index); }}else if(offsetLeft(obj,index)){ if(offsetRight(obj,index)){obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并左、右score += 4;merge(obj,index); }else{obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并左score += 2;merge(obj,index); }}else if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2;//僅合并右 score += 2; merge(obj,index);} } /* end */ //main /* start */ function gameOver(){for(var i=0;i<td.length;i++){ if(td[i].innerHTML == ''){break; } if(i == 15){alert('很遺憾！本局游戲結束。。。'); }} } /* end */ //main /* start */ (function(){for(var i=0;i<td.length;i++){ var choose = td[i]; choose.index = i; choose.onclick = function(){if(this.innerHTML == ''){ this.innerHTML = showNum; merge(this,this.index); if(this.innerHTML >= 2048){this.innerHTML = '';this.style = 'background-color: rgba(0, 0, 0, 0);'; } color(this); init();}updateScore();gameOver(); }} })(); /* end */ //更新得分 /* start */ function updateScore(){if(score > 500){ span.style = 'color: rgb(255,0,0)';}else if(score > 100){ span.style = 'color: rgb(255,0,255)';}else if(score > 50){ span.style = 'color: rgb(255,255,0)';}else if(score > 20){ span.style = 'color: rgb(0,0,255)';}else if(score > 10){ span.style = 'color: rgb(0,255,0)';}span.innerHTML = score; } /* end */ //新游戲 /* start */ but.onclick = function(){location.reload(); } /* end */ </script></html>

到此這篇關于JS原生2048小游戲源碼分享的文章就介紹到這了,更多相關js 2048小游戲內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！

JavaScript

上一條：詳解JS ES6變量的解構賦值下一條：JS不要再到處使用絕對等于運算符了

相關文章：

1. ASP常用日期格式化函數 FormatDate()2. Python 操作 MySQL數據庫3. Python數據相關系數矩陣和熱力圖輕松實現教程4. 開發效率翻倍的Web API使用技巧5. bootstrap select2 動態從后臺Ajax動態獲取數據的代碼6. CSS3中Transition屬性詳解以及示例分享7. js select支持手動輸入功能實現代碼8. 什么是Python變量作用域9. vue使用moment如何將時間戳轉為標準日期時間格式10. python 如何在 Matplotlib 中繪制垂直線

排行榜

					
					Python數據相關系數矩陣和熱力圖輕松實現教程
如何在PHP中讀寫文件
vue-drag-chart 拖動/縮放圖表組件的實例代碼
PHP正則表達式函數preg_replace用法實例分析
php redis setnx分布式鎖簡單原理解析
Java xml數據格式返回實現操作
Django使用channels + websocket打造在線聊天室
一個 2 年 Android 開發者的 18 條忠告
Spring @Primary和@Qualifier注解原理解析
詳解Android 消息處理機制
Vue實現仿iPhone懸浮球的示例代碼
				