I have been learning about algorithms recently and have come across a small game driven by algorithms. Here is the code for you: Effect: Code: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2048 mini game</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> <!-- Display score and new game button--> <div id="box"> Score: <span id="span">0</span> <input id="but" type="button" value="New Game" /> </div> <!-- Display random number --> <div id="random"></div> <!-- Main layout of the game --> <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"); //Define score var score = 0; //Define random number var random = document.getElementById("random"); var showNums = [2,4,8,16,32,64,128,256,512,1024]; var showNum = 0; //Define background color array 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)"]; // Initialize the program and generate random numbers /* 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 */ //Get the maximum value in the chessboard /* 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 */ //Display the background color according to the number /* 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 */ //Merge algorithm/* start */ function offsetTop(obj,index){//Merge 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){//Merge 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){//Merge leftif(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){//Merge rightif(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 */ //Judge whether the cells are merged/* 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; //Merge top, bottom, left and right score += 16; merge(obj,index); }else{ obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge top, bottom, and left score += 8; merge(obj,index); } }else if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge top, bottom and right score += 8; merge(obj,index); }else{ obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge the upper and lower scores += 4; merge(obj,index); } }else if(offsetLeft(obj,index)){ if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge top, left and right score += 8; merge(obj,index); }else{ obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the top and left score += 4; merge(obj,index); } }else if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge the top and right score += 4; merge(obj,index); }else{ obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge score += 2; merge(obj,index); } }else if(offsetBottom(obj,index)){ if (offsetLeft(obj,index)) { if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2; //Only merge bottom, left and right score += 8; merge(obj,index); }else{ obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the bottom and left score += 4; merge(obj,index); } }else if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the bottom and right score += 4; merge(obj,index); }else{ obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge score += 2; merge(obj,index); } }else if(offsetLeft(obj,index)){ if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge left and right score += 4; merge(obj,index); }else{ obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the left score += 2; merge(obj,index); } }else if(offsetRight(obj,index)){ obj.innerHTML = parseInt(obj.innerHTML)*2; // Only merge the right 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("Unfortunately! This game is over..."); } } } /* 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 */ //Update score /* 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 */ //New game/* start */ but.onclick = function(){ location.reload(); } /* end */ </script> </html> This is the end of this article about sharing the source code of JS native 2048 game. For more relevant js 2048 game content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of ActiveMQ deployment method in Linux environment
>>: Optimize MySQL with 3 simple tweaks
1. Merge the margins of sibling elements The effe...
Table of contents 1. The origin of tomcat 1. Tomc...
This article shares the specific code of JS to ac...
Generally speaking, after the container is starte...
Some students said that they encountered the prob...
Table of contents Preface On-site investigation C...
The Swap partition of the Linux system, that is, ...
In the many projects I have worked on, there is b...
Table of contents introduction 1. Case Overview 2...
1. Modify 1 column update student s, city c set s...
This article summarizes some common MySQL optimiz...
The data URI scheme allows us to include data in a...
In more and more websites, the use of XHTML is rep...
How is Line-height inherited?Write a specific val...
Use HSSFWorkbook in Apache.POI to export to Excel...