第一次尝试——2048前端开发（HTML+CSS+JS）
实现4*4 2048的三种工具利用：
HTML：实现页面的基本框架。
CSS：实现页面的样式。
JS：实现2048的功能。
利用JS实现功能的思路：
- 初始化每个格子，随机生成2个数
- 生成随机数
- 实现键盘监听事件
- 实现上下左右移动
- 记录游戏得分
- 判断是否有空余格子
- 判断是否还能移动格子
- 实现重新游戏
一、HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>2048小游戏</title> 8 <link rel="stylesheet" href="./home.css"> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 body { 16 background-color: antiquewhite; 17 } 18 </style> 19 </head> 20 21 <body> 22 23 <div class="scores"> 24 <p>分数：<span id="score"></span></p> 25 </div> 26 <div class="outframe" id="box"> 27 <div class="frame"></div> 28 <div class="frame"></div> 29 <div class="frame"></div> 30 <div class="frame"></div> 31 <div class="frame"></div> 32 <div class="frame"></div> 33 <div class="frame"></div> 34 <div class="frame"></div> 35 <div class="frame"></div> 36 <div class="frame"></div> 37 <div class="frame"></div> 38 <div class="frame"></div> 39 <div class="frame"></div> 40 <div class="frame"></div> 41 <div class="frame"></div> 42 <div class="frame"></div> 43 </div> 44 <button id="resetgame" style="position: relative;left: 100px;bottom:350px;font-size: 25px;">重玩</button> 45 <script type="text/javascript" src="./main.js"></script> 46 </body> 47 48 </html>
二、CSS
1 .scores { 2 width: 150px; 3 height: 30px; 4 font-size: 25px; 5 position: relative; 6 top: 55px; 7 margin: auto; 8 } 9 10 .outframe { 11 width: 410px; 12 height: 410px; 13 position: relative; 14 top: 85px; 15 background-color: burlywood; 16 margin: auto; 17 } 18 19 .frame { 20 width: 90px; 21 height: 90px; 22 background-color: white; 23 border-radius: 10px; 24 text-align: center; 25 line-height: 90px; 26 font-size: 40px; 27 color: cadetblue; 28 opacity: 0.5; 29 float: left; 30 margin: 10px 0px 0px 10px; 31 32 }
三、JS
1、初始化容器，另每个容器为空。
1 function init() { 2 for (var i = 0; i < arr.length; i++) { 3 for (var j = 0; j < arr.length; j++) { 4 arr[i][j] = divs[num]; 5 arr[i][j].innerHTML = " "; 6 num++; 7 } 8 } 9 rand(); 10 rand(); 11 }
2、生成随机数
function rand() { var x = Math.floor(Math.random() * 4); var y = Math.floor(Math.random() * 4); if (arr[x][y].innerHTML == " ") { arr[x][y].innerHTML = Math.random() > 0.5 ? 2 : 4; } else { rand(); } }
3、上下左右监听事件
1 window.onkeydown = function (e) { 2 var key = e.keyCode; 3 //向左移动 4 if (key == 65) { 5 left(); 6 isfull(); 7 } 8 //向上移动 9 else if (key == 87) { 10 up(); 11 isfull(); 12 } 13 //向右移动 14 else if (key == 68) { 15 right(); 16 isfull(); 17 }
4、实现移动（向左）其他方向类似
1 function left() { 2 for (var i = 0; i < 4; i++) { 3 for (var j = 0; j < 4; j++) { 4 if (j > 0 && arr[i][j].innerHTML != " " && arr[i][j - 1].innerHTML == " ") { 5 arr[i][j - 1].innerHTML = arr[i][j].innerHTML; 6 arr[i][j].innerHTML = " "; 7 left(); 8 9 } else if (j > 0 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i][j - 1].innerHTML) { 10 arr[i][j - 1].innerHTML = arr[i][j - 1].innerHTML * 2; 11 addscores(arr[i][j - 1].innerHTML) 12 arr[i][j].innerHTML = " "; 13 } 14 } 15 } 16 17 }
5、记录游戏分数
1 function addscores(s) { 2 score += parseInt(s); 3 // console.log(score); 4 var score1 = document.getElementById("score"); 5 score1.innerHTML = score; 6 }
6、判断容器是否满
1 function isfull() { 2 var bool = 1; 3 for (var i = 0; i < 4; i++) { 4 for (var j = 0; j < 4; j++) { 5 if (arr[i][j].innerHTML == " ") { 6 bool = 0; 7 } 8 } 9 } 10 if (bool == 1) { 11 change(); 12 } 13 else (bool == 0); { 14 rand(); 15 } 16 }
7、判断容器是否能移动
1 function change() { 2 var bool = 1; 3 for (var i = 0; i < arr.length - 1; i++) { 4 for (var j = 0; j < arr.length - 1; j++) { 5 if (arr[i][j].innerHTML == arr[i][j + 1].innerHTML || arr[i][j].innerHTML == arr[i + 1][j].innerHTML || arr[i][j + 1].innerHTML == arr[i + 1][j + 1].innerHTML || arr[i + 1][j].innerHTML == arr[i + 1][j + 1].innerHTML) { 6 bool = 0; 7 } 8 } 9 } 10 if (bool == 1) { 11 alert("游戏结束"); 12 regame(); 13 } 14 }
8、实现新游戏
1 function regame() { 2 for (var a = 0; a < 16; a++) { 3 divs[a].innerHTML = " "; 4 } 5 var newscore = document.getElementById("score").innerHTML = 0; 6 rand(); 7 rand(); 8 9 }
四、完整的js代码
1 var score = 0; 2 var divs = document.querySelectorAll('#box div'); 3 var arr = [[], [], [], []]; 4 var num = 0; 5 init(); 6 //上下左右监听事件 7 window.onkeydown = function (e) { 8 var key = e.keyCode; 9 //向左移动 10 if (key == 65) { 11 left(); 12 isfull(); 13 14 } 15 //向上移动 16 else if (key == 87) { 17 up(); 18 isfull(); 19 } 20 //向右移动 21 else if (key == 68) { 22 right(); 23 isfull(); 24 } 25 26 //向下移动 27 if (key == 83) { 28 dwon(); 29 isfull(); 30 } 31 32 } 33 //初始化容器，另每个容器为空 34 function init() { 35 for (var i = 0; i < arr.length; i++) { 36 for (var j = 0; j < arr.length; j++) { 37 arr[i][j] = divs[num]; 38 arr[i][j].innerHTML = " "; 39 num++; 40 } 41 } 42 rand(); 43 rand(); 44 } 45 //生成随机数 46 function rand() { 47 var x = Math.floor(Math.random() * 4); 48 var y = Math.floor(Math.random() * 4); 49 if (arr[x][y].innerHTML == " ") { 50 arr[x][y].innerHTML = Math.random() > 0.5 ? 2 : 4; 51 } 52 else { 53 rand(); 54 } 55 } 56 //设置重玩按键 57 function regame() { 58 for (var a = 0; a < 16; a++) { 59 divs[a].innerHTML = " "; 60 } 61 var newscore = document.getElementById("score").innerHTML = 0; 62 rand(); 63 rand(); 64 65 } 66 //分数 67 function addscores(s) { 68 score += parseInt(s); 69 // console.log(score); 70 var score1 = document.getElementById("score"); 71 score1.innerHTML = score; 72 } 73 //判断容器是否满 74 function isfull() { 75 var bool = 1; 76 for (var i = 0; i < 4; i++) { 77 for (var j = 0; j < 4; j++) { 78 if (arr[i][j].innerHTML == " ") { 79 bool = 0; 80 } 81 } 82 } 83 if (bool == 1) { 84 change(); 85 } 86 else (bool == 0); { 87 rand(); 88 } 89 } 90 //判断是否还能移动 91 function change() { 92 var bool = 1; 93 for (var i = 0; i < arr.length - 1; i++) { 94 for (var j = 0; j < arr.length - 1; j++) { 95 if (arr[i][j].innerHTML == arr[i][j + 1].innerHTML || arr[i][j].innerHTML == arr[i + 1][j].innerHTML || arr[i][j + 1].innerHTML == arr[i + 1][j + 1].innerHTML || arr[i + 1][j].innerHTML == arr[i + 1][j + 1].innerHTML) { 96 bool = 0; 97 } 98 } 99 } 100 if (bool == 1) { 101 alert("游戏结束"); 102 regame(); 103 } 104 } 105 106 //向右移动 107 function right() { 108 for (var i = 0; i < 4; i++) { 109 for (var j = 0; j < 4; j++) { 110 if (j < 3 && arr[i][j].innerHTML != " " && arr[i][j + 1].innerHTML == " ") { 111 arr[i][j + 1].innerHTML = arr[i][j].innerHTML; 112 arr[i][j].innerHTML = " "; 113 right(); 114 } else if (j < 3 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i][j + 1].innerHTML) { 115 arr[i][j + 1].innerHTML = arr[i][j + 1].innerHTML * 2; 116 addscores(arr[i][j + 1].innerHTML) 117 arr[i][j].innerHTML = " "; 118 } 119 } 120 } 121 122 } 123 124 //向左移动 125 function left() { 126 for (var i = 0; i < 4; i++) { 127 for (var j = 0; j < 4; j++) { 128 if (j > 0 && arr[i][j].innerHTML != " " && arr[i][j - 1].innerHTML == " ") { 129 arr[i][j - 1].innerHTML = arr[i][j].innerHTML; 130 arr[i][j].innerHTML = " "; 131 left(); 132 133 } else if (j > 0 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i][j - 1].innerHTML) { 134 arr[i][j - 1].innerHTML = arr[i][j - 1].innerHTML * 2; 135 addscores(arr[i][j - 1].innerHTML) 136 arr[i][j].innerHTML = " "; 137 } 138 } 139 } 140 141 } 142 143 //向上移动 144 function up() { 145 for (var i = 0; i < 4; i++) { 146 for (var j = 0; j < 4; j++) { 147 if (i > 0 && arr[i][j].innerHTML != " " && arr[i - 1][j].innerHTML == " ") { 148 arr[i - 1][j].innerHTML = arr[i][j].innerHTML; 149 arr[i][j].innerHTML = " "; 150 up(); 151 152 } else if (i > 0 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i - 1][j].innerHTML) { 153 arr[i - 1][j].innerHTML = arr[i - 1][j].innerHTML * 2; 154 addscores(arr[i - 1][j].innerHTML) 155 arr[i][j].innerHTML = " "; 156 } 157 } 158 } 159 } 160 //向下移动 161 function dwon() { 162 for (var i = 0; i < 4; i++) { 163 for (var j = 0; j < 4; j++) { 164 if (i < 3 && arr[i][j].innerHTML != " " && arr[i + 1][j].innerHTML == " ") { 165 arr[i + 1][j].innerHTML = arr[i][j].innerHTML; 166 arr[i][j].innerHTML = " "; 167 dwon(); 168 169 } else if (i < 3 && arr[i][j].innerHTML != " " && arr[i][j].innerHTML == arr[i + 1][j].innerHTML) { 170 arr[i + 1][j].innerHTML = arr[i + 1][j].innerHTML * 2; 171 addscores(arr[i + 1][j].innerHTML) 172 arr[i][j].innerHTML = " "; 173 } 174 } 175 } 176 } 177 //重玩事件 178 var resetgame = document.getElementById("resetgame"); 179 180 resetgame.onclick = function () { 181 regame(); 182 console.log("resetgame"); 183 }
五、结果
六、参考链接
1、https://blog.csdn.net/qq_63806300/article/details/131418662?spm=1001.2014.3001.5502