文章詳情頁

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

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

最近在學(xué)習(xí)算法方面的知識，看到了一個(gè)由算法主導(dǎo)的小游戲，這里給大家分享下代碼：

效果：

代碼：

<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; //定義隨機(jī)數(shù) var random = document.getElementById('random'); var showNums = [2,4,8,16,32,64,128,256,512,1024]; var showNum = 0; //定義背景色數(shù)組 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)']; //初始化程序,生成隨機(jī)數(shù) /* 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 */ //根據(jù)數(shù)字顯示背景顏色 /* 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('很遺憾！本局游戲結(jié)束。。。'); }} } /* 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>

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

JavaScript

上一條：詳解JS ES6變量的解構(gòu)賦值下一條：JS不要再到處使用絕對等于運(yùn)算符了

相關(guān)文章：

1. SSM框架整合之Spring+SpringMVC+MyBatis實(shí)踐步驟2. 使用Blazor框架實(shí)現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel3. 解決vue 給window添加和移除resize事件遇到的坑4. Vue為什么要謹(jǐn)慎使用$attrs與$listeners5. ASP基礎(chǔ)知識Command對象講解6. 一文帶你徹底理解Java序列化和反序列化7. 如何從Python的cmd中獲得.py文件參數(shù)8. javascript實(shí)現(xiàn)貪吃蛇小練習(xí)9. Python-openpyxl表格讀取寫入的案例詳解10. JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例

排行榜

					
					ASP基礎(chǔ)知識Command對象講解
使用Blazor框架實(shí)現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel
Python-openpyxl表格讀取寫入的案例詳解
如何對php程序中的常見漏洞進(jìn)行攻擊
JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例
為eclipse和IDEA配置tomcat服務(wù)器的方法
idea2020.1無法自動加載maven依賴的jar包問題及解決方法
SSM框架整合之Spring+SpringMVC+MyBatis實(shí)踐步驟
Spring MVC 開發(fā)快速入門
一文帶你徹底理解Java序列化和反序列化
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
				