Native js to implement 2048 game
|
2048 mini game, for your reference, the specific content is as follows First of all, the 2048 game cannot be separated from 16 grids. We create the corresponding tags and styles through HTML and CSS, and then start the JS logic <div id="box">//16 small divs in a box <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> </div> Set the corresponding style: (for reference only)
#box{
width: 450px;
height: 450px;
background-color: brown;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
border: 1px solid #000;
margin: 100px auto;
border-radius: 10px;
}
div>div{
margin-top: 5px;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: bisque;
text-align: center;
line-height: 100px;
font-size: 40px;
}The effect is as follows:
Then the real js part really begins. First, use the CSS selector to get all the small grid divs.
var divs = document.querySelectorAll('[id == son]');Then create a two-dimensional array to receive the DOM objects of these 16 small grid divs
var arr = [[],[],[],[]];
var a = 0;
for(var i=0;i < 4; i++){
for(var j=0; j < 4; j++){
arr[i][j] = divs[a];
a++ ;
}
}This forms the i and j axes:
This will facilitate our subsequent mobile operations Now we write a program that randomly generates a random number 2 and 4 from the 16 cells and fills them into an empty cell. We will call it later!
function sj(){ //Generate random numbers var a = Math.floor(Math.random() * 4);
var b = Math.floor(Math.random() * 4);
if(arr[a][b].innerHTML == ""){
if(Math.random()>0.5){
arr[a][b].innerHTML = 2;
}else{
arr[a][b].innerHTML = 4;
}
}else{ //If the grid is not empty, we execute the function sj();
}
}The second one is the function to determine whether the game is over: the game ends when all the values of the grid are not empty! (Called later)
function js(){ //Is the game over? var bool = true;
for(var i=0;i < 4; i++){
for(var j=0; j < 4; j++){
if(arr[i][j].innerHTML == ""){
bool = false;
}else{
}
}
}
if(bool){
alert("Game over");
for(var i=0;i < 4; i++){
for(var j=0; j < 4; j++){
arr[i][j] = null;
}
}
}
}Then we write functions to be executed by pressing the up, down, left, and right keys respectively: Take pressing the up key as an example: ①If the upper number is empty and the lower number is not empty, the upper and lower values are swapped;
function downtop(){ //Function executed by pressing up for(var i=0;i < 4; i++){
for(var j=0; j < 4; j++){
if(arr[i][j].innerHTML == "" && i<3 &&arr[i+1][j].innerHTML != ""){
arr[i][j].innerHTML = arr[i+1][j].innerHTML ;
arr[i+1][j].innerHTML = "";
downtop(); // Execute if the condition is met // If it is not met, it will not enter the if statement }else if(i<3&&arr[i][j].innerHTML !="" && arr[i+1][j].innerHTML !="" &&arr[i][j].innerHTML == arr[i+1][j].innerHTML){
arr[i][j].innerHTML = 2*arr[i+1][j].innerHTML;
arr[i+1][j].innerHTML = "";
}else{
}
}
}
}Similarly, you only need to change (some parameters) to complete the logic of the other 3 keys:
function downbottom(){
for(var i=3 ;i > 0 ; i--){
for(var j=0; j < 4; j++){
if(arr[i-1][j].innerHTML != "" && i>0 &&arr[i][j].innerHTML == "" ){
arr[i][j].innerHTML = arr[i-1][j].innerHTML ;
arr[i-1][j].innerHTML = "";
downbottom();
}
else if(arr[i-1][j].innerHTML !=""&& arr[i][j].innerHTML !="" && i>0 &&arr[i-1][j].innerHTML == arr[i][j].innerHTML){
arr[i][j].innerHTML = 2*arr[i-1][j].innerHTML;
arr[i-1][j].innerHTML = "";
}
}
}
}
function downleft(){
for(var i=0;i < 4; i++){
for(var j=0; j < 4; j++){
if(arr[i][j].innerHTML == "" && j<3 &&arr[i][j+1].innerHTML != ""){
arr[i][j].innerHTML = arr[i][j+1].innerHTML ;
arr[i][j+1].innerHTML = "";
downleft();
}else if( j<3&& arr[i][j].innerHTML !=""&& arr[i][j+1].innerHTML !="" &&arr[i][j].innerHTML == arr[i][j+1].innerHTML){
arr[i][j].innerHTML = 2*arr[i][j+1].innerHTML;
arr[i][j+1].innerHTML = "";
}
}
}
}
function downright(){
for(var i=0;i < 4; i++){
for(var j = 3 ;j > 0; j--){
if(j > 0 && arr[i][j].innerHTML == ""&&arr[i][j-1].innerHTML != ""){
arr[i][j].innerHTML = arr[i][j-1].innerHTML ;
arr[i][j-1].innerHTML = "";
downright();
}else if( j>0 && arr[i][j].innerHTML !=""&& arr[i][j-1].innerHTML !="" &&arr[i][j].innerHTML == arr[i][j-1].innerHTML){
arr[i][j].innerHTML = 2*arr[i][j-1].innerHTML;
arr[i][j-1].innerHTML = "";
}
}
}
}Add different background colors for different values: (optional)
function color(){
for(var i=0;i < 4; i++){
for(var j=0; j < 4; j++){
switch(arr[i][j].innerHTML){
case "": arr[i][j].style.backgroundColor = "bisque";break;
case "2": arr[i][j].style.backgroundColor = "red";break;
case "4": arr[i][j].style.backgroundColor = "orange";break;
case "8": arr[i][j].style.backgroundColor = "yellow";break;
case "16": arr[i][j].style.backgroundColor = "green";break;
case "32": arr[i][j].style.backgroundColor = "blue";break;
case "64": arr[i][j].style.backgroundColor = "#000";break;
case "128": arr[i][j].style.backgroundColor = "aqua";break;
case "256": arr[i][j].style.backgroundColor = "pink";break;
}
}
}
}Then set up keyboard monitoring events for the entire window: keyCode: 38
window.onkeydown = function(e){
switch(e.keyCode){
case 37: downleft(); sj(); color(); js(); break; //left case 38: downtop(); sj(); color(); js(); break; //upper case 39: downright(); sj(); color(); js(); break; //right case 40: downbottom(); sj(); color(); js(); break; //lower}
}
sj(); //The game starts with two default numbers sj();The simple 2048 game is completed! The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to configure ssh/sftp and set permissions under Linux operating system
>>: What to do if you forget your Linux/Mac MySQL password
Recommend
Summary of 7 reasons why Docker is not suitable for deploying databases
Docker has been very popular in the past two year...
React configuration px conversion rem method
Install related dependencies npm i lib-flexible -...
How to implement the builder pattern in Javascript
Overview The builder pattern is a relatively simp...
How to set the style of ordered and unordered list items in CSS
In an unordered list ul>li, the symbol of an u...
VMware installation of Centos8 system tutorial diagram (Chinese graphical mode)
Table of contents 1. Software and system image 2....
MySQL series 6 users and authorization
Table of contents Tutorial Series 1. User Managem...
An IE crash bug
Copy code The code is as follows: <style type=...
Introduction and use of js observer mode
Table of contents I. Definition 2. Usage scenario...
What to do if the online MySQL auto-increment ID is exhausted
Table of contents Table definition auto-increment...
Redission-tomcat quickly implements deployment from single machine to multi-machine deployment
Preface In the early stages of some projects, dev...
Solution to the conflict between Linux kernel and SVN versions
Phenomenon The system could compile the Linux sys...
avue-crud implementation example of multi-level complex dynamic header
Table of contents Preface Background data splicin...
Detailed application of Vue dynamic form
Overview There are many form requirements in the ...
Analysis and treatment of scroll bars in both HTML and embedded Flash
We often encounter this situation when doing devel...
JavaScript to achieve full or reverse selection effect in form
This article shares the specific code of JavaScri...