Javascript-Mini Game 2048 Super Detailed Teaching Instructions
foreword
Recently, I am learning the front end, and I am looking for a few small games to practice while it is hot.
The rules of the 2048 game will not be described too much, here mainly use html, css, JavaScript related knowledge.
Code source: https://blog.csdn.net/bs775926015/article/details/115447514
1. Game page layout
Each square is a div tag. Since div tags are block-level elements, they are arranged vertically by default. To achieve an intermediate effect. These 17 div tags need to have a parent class as the background box, and the remaining 16 child elements are sorted internally. The elastic layout is used here, which is faster and more convenient than floating. The button is an inline block element, and the above arrangement is realized by turning it into a block-level element.
Supplement : Floating layout is mainly used to solve the problem that multiple block elements coexist in one line. Although floating can solve the problem of multiple block elements coexisting in one line, it will also have bad effects. such as off-label
html main code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="c2048.css">
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<button id="rebutton" onclick="restart()">重新开始 </button>
<script src="j2048.js"></script>
</body>
</html>
The css code is as follows:
#box{
width: 500px;
height: 500px;
background-color: #BBADA0;
border-radius: 0.5em;
margin: 50px auto;
margin-bottom: 20px;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
/* 后代选择器 */
#box div{
width: 100px;
height: 100px;
background-color: #CDC1B4;
border: 1px solid transparent;
border-radius: 10px;
margin-top: 10px;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 100px;
}
#rebutton{
width: 70px;
height: 30px;
background-color: hsl(64, 60%, 52%);
display: block;
border: 1px solid transparent;
border-radius: 10px;
margin: auto;
}
2. Game implementation
The display and transformation of numbers mainly use the innerHTML of the element to realize the function of obtaining object content or inserting content into the object;
first: create a 4*4 array for storing 16 sub-div elements,
var divs= document.querySelectorAll("#box>div");
var arr = [[],[],[],[]];
var num=0;
for(var i = 0;i <arr.length;i++){
for(var j = 0;j <arr.length;j++){
arr[i][j] = divs[num];
num++;
}
}
Subsequent operations are mainly to modify the div elements in this array
// 在4*4的随机位置产生数字2或4 ，出现比率是1：4
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.2 ? 2 : 4;
}else{
rand();
}
}
//判断是否游戏结束函数：(1)、数组数组是否已满 (2)相邻元素是否相同
function end(){
var bool=true;
for(var i = 0;i <arr.length;i++){
for(var j = 0;j <arr.length;j++){
if(arr[i][j].innerHTML == "" ){
bool = false;
}
}
}
if(bool){
cheak();
}else{
rand();
}
}
function cheak(){
var bool = true;
for(var i = 0;i < arr.length-1 ;i++){
for(var j = 0;j< arr.length-1;j++){
if(arr[i][j].innerHTML == arr[i][j+1].innerHTML || arr[i][j].innerHTML == arr[i+1][j].innerHTML || arr[i+1][j].innerHTML == arr[i+1][j+1].innerHTML || arr[i][j+1].innerHTML == arr[i+1][j+1].innerHTML ){
bool = false;
}
}
}
if(bool){
alert("游戏结束！")
}
}
//游戏重新开始的函数
function restart(){
for(var i = 0;i <arr.length;i++){
for(var j = 0;j <arr.length;j++){
arr[i][j].innerHTML = "";
}
}
bgcolor();
rand();
rand();
}
//设置背景颜色
function bgcolor(){
for(var i = 0;i <arr.length;i++){
for(var j = 0;j <arr.length;j++){
switch(arr[i][j].innerHTML){
case '2': arr[i][j].style.backgroundColor = "#EEE4DA" ;break;
case '4': arr[i][j].style.backgroundColor = "#EDE0C8" ;break;
case '8': arr[i][j].style.backgroundColor = "#F2B179" ;break;
case '16': arr[i][j].style.backgroundColor = "#F59563" ;break;
case '32': arr[i][j].style.backgroundColor = "#F67C5F" ;break;
case '64': arr[i][j].style.backgroundColor = "#F65E3B" ;break;
case '128': arr[i][j].style.backgroundColor = "#EDCF72" ;break;
case '256': arr[i][j].style.backgroundColor = "#EDCC61" ;break;
case '512': arr[i][j].style.backgroundColor = "#EDC850" ;break;
case '1024': arr[i][j].style.backgroundColor = "yellowgreen" ;break;
case '2048': arr[i][j].style.backgroundColor = "perple" ;break;
default: arr[i][j].style.backgroundColor = "#CDC1B4" ;break;
}
}
}
}
//上下左右按下执行的函数
function downright(){
for(var i = 0;i <4;i++){
for(var j = 0;j <4;j++){
if( j<3&&arr[i][j].innerHTML !=""&& arr[i][j+1].innerHTML==""){
arr[i][j+1].innerHTML = arr[i][j].innerHTML;
arr[i][j].innerHTML="";
downright();
}else if(j<3&&arr[i][j].innerHTML !=""&& arr[i][j].innerHTML == arr[i][j+1].innerHTML){
arr[i][j+1].innerHTML *=2;
arr[i][j].innerHTML ="";
}
}
}
}
function downleft(){
for(var i = 0;i <4;i++){
for(var j = 0;j <4;j++){
if( j>0&&arr[i][j].innerHTML !=""&& arr[i][j-1].innerHTML==""){
arr[i][j-1].innerHTML = arr[i][j].innerHTML;
arr[i][j].innerHTML="";
downleft();
}else if(j>0&&arr[i][j].innerHTML !=""&& arr[i][j].innerHTML == arr[i][j-1].innerHTML){
arr[i][j-1].innerHTML *=2;
arr[i][j].innerHTML ="";
}
}
}
}
function downfoot(){
for(var i = 0;i <4;i++){
for(var j = 0;j <4;j++){
if( i<3&&arr[i][j].innerHTML !=""&& arr[i+1][j].innerHTML==""){
arr[i+1][j].innerHTML = arr[i][j].innerHTML;
arr[i][j].innerHTML="";
downfoot();
}else if(i<3&&arr[i][j].innerHTML !=""&& arr[i][j].innerHTML == arr[i+1][j].innerHTML){
arr[i+1][j].innerHTML *=2;
arr[i][j].innerHTML ="";
}
}
}
}
function downup(){
for(var i = 0;i <4;i++){
for(var j = 0;j <4;j++){
if( i>0&&arr[i][j].innerHTML !=""&& arr[i-1][j].innerHTML==""){
arr[i-1][j].innerHTML = arr[i][j].innerHTML;
arr[i][j].innerHTML="";
downup();
}else if(i>0&&arr[i][j].innerHTML !=""&& arr[i][j].innerHTML == arr[i-1][j].innerHTML){
arr[i-1][j].innerHTML *=2;
arr[i][j].innerHTML ="";
}
}
}
}
Game start process:
//游戏开始产生2个随机数
rand();
rand();
bgcolor();
//上下左右的监听事件
window.onkeydown = function(e){
switch(e.keyCode){
case 37 : end(); downleft();bgcolor(); break;//左
case 38 : end(); downup();bgcolor(); break;//上
case 39 : end(); downright();bgcolor(); break;//右
case 40 : end(); downfoot(); bgcolor(); break;//下
}
}