Javascript-Mini Game 2048 Instrucciones de enseñanza súper detalladas
prefacio
Recientemente, estoy aprendiendo la interfaz y estoy buscando algunos juegos pequeños para practicar mientras hace calor.
Las reglas del juego 2048 no se describirán demasiado, aquí se utilizan principalmente conocimientos relacionados con html, css y JavaScript.
Código fuente: https://blog.csdn.net/bs775926015/article/details/115447514
1. Diseño de la página del juego
Cada cuadrado es una etiqueta div. Dado que las etiquetas div son elementos a nivel de bloque, se organizan verticalmente de forma predeterminada. Para conseguir un efecto intermedio. Estas 17 etiquetas div deben tener una clase principal como cuadro de fondo, y los 16 elementos secundarios restantes se ordenan internamente. Aquí se usa el diseño elástico, que es más rápido y conveniente que flotar. El botón es un elemento de bloque en línea y la disposición anterior se realiza convirtiéndolo en un elemento a nivel de bloque.
Complemento : el diseño flotante se utiliza principalmente para resolver el problema de que varios elementos de bloque coexisten en una línea. Aunque la flotación puede resolver el problema de la coexistencia de múltiples elementos de bloque en una línea, también tendrá efectos negativos. como fuera de etiqueta
código principal html:
<!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>
El código css es el siguiente:
#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. Implementación del juego
La visualización y transformación de números utiliza principalmente el HTML interno del elemento para realizar la función de obtener contenido del objeto o insertar contenido en el objeto; primero:
cree una matriz de 4*4 para almacenar 16 elementos subdiv,
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++;
}
}
Las operaciones subsiguientes son principalmente para modificar los elementos div en esta matriz
// 在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 ="";
}
}
}
}
Proceso de inicio del juego:
//游戏开始产生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;//下
}
}