Want to achieve 2048 game writing code can be divided into three steps

First, the HTML part

Write the HTML first to build the structure of the game

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> </head> <body> <! <div class="outermost"> <div class="outermost"> <div class="outermost"> - the title - > < span class = "top" > < b > SCORE: < span id = "score01" > < / span > < / b > < / span > / / at the top of the real-time display of the game SCORE <! <div class="cell" id="c00">< div class="cell" id="c00"> id="c01"></div> <div class="cell" id="c02"></div> <div class="cell" id="c03"></div> <div class="cell" id="c10"></div> <div class="cell" id="c11"></div> <div class="cell" id="c12"></div> <div class="cell" id="c13"></div> <div class="cell" id="c20"></div> <div class="cell" id="c21"></div> <div class="cell" id="c22"></div> <div class="cell" id="c23"></div> <div class="cell" id="c30"></div> <div class="cell" id="c31"></div> <div class="cell" id="c32"></div> <div class="cell" Id ="c33"></div> - prompt box - > < div class = "tips" id = "gameover" > < p > GAME OVER!!!!!! <br> SCORE: <span id="score02">0</span><br> <span class="startbtn"> restart </button> </p> </div> <! <div class="foot"> <button class="replay"><a> replay </a></button> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="index.js"></script> </body> </html>Copy the code

Second, the CSS part

After the first step of framing the game, the second step is to add style to the game and make it visible

*{ padding: 0px; margin: 0px auto; font-family: Arial; }.outermost{width: 480px; height: 600px; font-size: 40px; margin-top: 120px; } /*title*/ <! -->.top{margin: auto; } .top span{ color: red; } /* big{width: 480px; height: 480px; background:pink; border-radius: 8px; } <! -- add style to each box -->.cell{list-style: none; float: left; display: inline-block; width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: #fbf8cd; margin-left: 16px; margin-top: 16px; border-radius: 6px; } <! N2 {background-color:#f65e3b; #f65e3b; color:#776e65} .n4{background-color:#33b5e5; color:#776e65} .n8{background-color:#f2b179; color:#776e65} .n16{background-color:#f59563; color:#776e65} .n32{background-color:#f67c5f; color:#776e65} .n64{background-color:#f65e3b; color:#776e65} .n128{background-color:#edcf72; color:#776e65} .n256{background-color:#edcc61; color:#776e65} .n512{background-color:#9c0; color:#776e65} .n1024{background-color:#33b5e5; color:#776e65; font-size:40px} .n2048{background-color:#09c; color:#776e65; Border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; background: #FFFFFF; width: 400px; height: 200px; border-radius: 10px; color: #ff4456; text-align: center; line-height: 60px; position: absolute; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; display: none; } .tips .startbtn{ height: 50px; width: 200px; color: #FFFFFF; font-size: 20px; line-height: 50px; border-radius: 10px; background: cornflowerblue; border: none; } /* Replay */.foot{width: 200px; height: 50px; } .foot>.replay{ width: 200px; height: 50px; background: aquamarine; margin-top: 60px; color: lightpink; border:0; font-size: 24px; font-weight: bold; border-radius: 6px; }Copy the code

The HTML+CSS part of the game looks like this:

Third, JS part

Here comes the final and most critical step —- add behavior, which is the writing of the JS part, to add effect to it

Var game = {data: [], // define an array to store all game data score: 0, // define a score attribute gamerunning: Gameover: 0, gameover: 0, gameover: 0, gameover: 0, gameover: 0, gameover: 0, gameover: 0 This == game this.status = this.gamerunning; // this == game this.status = this.gamerunning; // This. Score = 0; / / an array of all the elements in the whole set to 0. This data = [,0,0,0 [0], [0,0,0,0], [0,0,0,0], [0,0,0,0]]. this.randomNum(); This.randomnum (); this.randomnum (); this.randomnum (); this.randomnum (); // Call this.dataView() twice because this is the method used at the start of the game. // Call the update view method as shown below},Copy the code
// a function that generates random numbers randomly when you start, and randomNum when you move: Function (){while(true){var r = math.floor (math.random () * 4); Var c = math.floor (math.random () * 4); If (this.data[r][c] == 0){var num = math.random () > 0.5? 2:4; This. Data [r][c] = num; break; }}},Copy the code
DataView: function(){for(var r = 0; r < 4; r++){ for(var c = 0; c < 4; Var div = document.getelementById ("c" + r + c); If (this.data[r][c]! = 0){div. InnerHTML = this.data[r][c]; ClassName = "cell n" + this.data[r][c]; }else{ div.innerHTML = ""; div.className = "cell" } } }Copy the code
Document.getelementbyid ("score01").innerhtml = this.score; If (this.status == this.gamerunning){document.getelementById ("gameover").style.display = "none"; }else{ document.getElementById("gameover").style.display = "block"; document.getElementById("score02").innerHTML = this.score; }},Copy the code
Isgameover: function(){for(var r = 0; r < 4; r++){ for(var c = 0; c < 4; {if(this.data[r][c] == 0){return false if(this.data[r][c] == 0); If (this.data[r][c] == this.data[r][c+1]){return false;} if(this.data[r][c] == this.data[r][c+1]){return false; } } if(r < 3){ if(this.data[r][c] == this.data[r+1][c]){ return false; } } } } return true; },Copy the code

// Move the method, left right top bottom four parts

MoveLeft: function(){var before = String(this.data); For (var r = 0; var r = 0; r < 4; r ++){ this.moveLeftInRow(r); } var after = String(this.data); // If (before = after); // If (before = after); = after){ this.randomNum(); If (this.isgameOver ()){// Change the game state this.status = this.gameover} // Update the view this.dataView(); }}, moveLeftInRow: function(r){for(var c = 0; c < 3; c++){ var nextc = this.getNextinRow(r,c); if(nextc ! = 1) {if (this. Data [r] [c] = = 0) {/ / if equal to zero, directly replace this. Data [r] [c] = this. Data [r] [nextc]; this.data[r][nextc] = 0; // restore position to 0; / / to make location back to the in situ} else if (this. Data [r] [c] = = this. Data [r] [nextc]) {this. Data [r] [c] * = 2; This.data [r][nextc] = 0; this.score += this.data[r][c]; // Update the score}}else{// Not found break; }}, getNextinRow: function(r,c){for(var I = c + 1; i < 4; i++){ if(this.data[r][i] ! = 0){ return i; }} return -1;}} return -1; MoveRight: function(){var before = String(this.data); for(var r = 0; r < 4; r++){ this.moveRightInRow(r); } var after = String(this.data); if(before ! = after){ this.randomNum(); if(this.isgameover()){ this.status = this.gameover; } this.dataView(); } }, moveRightInRow: function(r){ for(var c = 4; c > 0; c--){ var prevc = this.getPrevInRow(r,c); if(prevc ! = -1){ if(this.data[r][c] == 0){ this.data[r][c] = this.data[r][prevc]; this.data[r][prevc] = 0; c ++ }else if(this.data[r][c] == this.data[r][prevc]){ this.data[r][c] *= 2; this.data[r][prevc] = 0; this.score += this.data[r][c]; } }else{ break; } } }, getPrevInRow: function(r,c){ for(var i = c - 1; i >= 0; i--){ if(this.data[r][i] ! = 0){ return i; } } return -1; }, // moveUp: function(){var before = String(this.data); for(var c = 0; c < 4; c++){ this.moveUpInCol(c); } var after = String(this.data); if(before ! = after){ this.randomNum(); if(this.isgameover()){ this.status = this.gameover; } this.dataView(); } }, moveUpInCol: function(c){ for(var r = 0; r < 4; r++){ var nextr = this.getNextInCol(r,c); if(nextr ! = -1){ if(this.data[r][c] == 0){ this.data[r][c] = this.data[nextr][c]; this.data[nextr][c] = 0; r -- ; }else if(this.data[r][c] == this.data[nextr][c]){ this.data[r][c] *= 2; this.data[nextr][c] = 0; this.score += this.data[r][c]; } }else{ break; } } }, getNextInCol: function(r,c){ for(var i = r + 1; i < 4; i++){ if(this.data[i][c] ! = 0){ return i; } } return -1; }, // moveDown: function(){var before = String(this.data); for(var c = 0; c < 4; c++){ this.moveDownInCol(c); } var after = String(this.data); if(before ! = after){ this.randomNum(); if(this.isgameover()){ this.status = this.gameover; } this.dataView(); } }, moveDownInCol: function(c){ for(var r = 3; r > 0; r--){ var prev = this.getPrevIncol(r,c); if(prev ! = -1){ if(this.data[r][c] == 0){ this.data[r][c] = this.data[prev][c]; this.data[prev][c] = 0; r -- ; }else if(this.data[r][c] == this.data[prev][c]){ this.data[r][c] *= 2; this.data[prev][c] = 0; this.score += this.data[r][c]; } }else{ break; } } }, getPrevIncol: function(r,c){ for(var i = r - 1; i >= 0; i--){ if(this.data[i][c] ! = 0){ return i; } } return -1; }, } game.start(); console.log(game.data) console.log(game.status); console.log(game.score); Document.onkeydown = function(){if(event.keycode == 37){//console.log(" left ") game.moveleft (); }else if(event.keycode == 38){//console.log(" up ") game.moveup ()}else if(event.keycode == 39){//console.log(" right ") }else if(event.keycode == 40){//console.log(" down ") game.moveDown()}} //touch event // finger press var startX; // Set the x coordinate of the start position var startY; Var endX; var endX; Var endY; var endY; / / set the end of the sliding the y coordinate of the document. The addEventListener (' touchstart ', function () {/ / console log (" finger down the screen ") the console. The log (event); startX = event.touches[0].pageX; startY = event.touches[0].pageY; }) / / mobile/finger/document. The addEventListener (' touchmove ', function () {/ / console log (" the movement of the finger ") / /}) / / fingers Document. The addEventListener (" touchend ", function () {/ / console log (" fingers ") the console. The log (event); endX = event.changedTouches[0].pageX; X endY = event.touches [0].touches [0].touches; var X = endX - startX; var Y = endY - startY var absX = Math.abs(X) > Math.abs(Y); var absY = Math.abs(Y) > Math.abs(X); If (X > 0 && absX){console.log(" right slide ") game.moveright ()}else if(X < 0 && absX){console.log(" left slide ") game.moveleft ()}if(Y > 0 &&absy){console.log(" slide ") game.movedown ()}if(Y < 0 &&absy){console.log(" slide ") game.moveup ()}})Copy the code

The following is a rendering of the game

So a simple 2048 game is completed

Pay attention to me, next period to explain how to pack this 2048 mobile phone, into a small mobile game ！！！！