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
Sample code for deploying ELK using Docker-compose
environment Host IP 192.168.0.9 Docker version 19...
Detailed graphic instructions for downloading and installing the unzipped version of MySQL 5.7.18 and starting the MySQL service
Because the distribution package of MySQL Communi...
Practice using Golang to play with Docker API
Table of contents Installing the SDK Managing loc...
HTML implements the function of detecting input completion
Use "onInput(event)" to detect whether ...
Nginx operation and maintenance domain name verification method example
When configuring the interface domain name, each ...
Set the default text of the search box. The default text disappears when the mouse is clicked.
Copy code The code is as follows: <input type=...
Docker implements container port binding local port
Today, I encountered a small problem that after s...
JavaScript to make the picture move with the mouse
This article shares the specific code of JavaScri...
Nginx dynamically forwards to upstream according to the path in the URL
In Nginx, there are some advanced scenarios where...
Detailed explanation of Vue's live broadcast function
Recently, the company happened to be doing live b...
Detailed explanation of Angular parent-child component communication
Table of contents Overview 1. Overview of input a...
Solution to Docker pull timeout
Recently, Docker image pull is very unstable. It ...
Making a simple game engine with React Native
Table of contents Introduction Get started A brie...
MySQL master-slave synchronization principle and application
Table of contents 1. Master-slave synchronization...
What to do if you forget the initial password when installing MySQL on Mac
Forgetting the password is a headache. What shoul...