Javascript-小游戏2048 超详细教学说明
前言
最近在学前端，趁热找几个小游戏练练手。
2048游戏规则不再过多描述，这里主要用到了html，css，JavaScript相关知识.
代码来源：https://blog.csdn.net/bs775926015/article/details/115447514
一、游戏页面布局
每一个方块就是一个div标签，由于div标签属于块级元素，其默认是垂直排列。想要达到中间的效果。这17个div标签需要有一个父类最为背景框，其余16个子元素在内部排序。这里使用了弹性布局，相比于浮动来说，更加快捷方便。而button属于行内块元素，通过让其转为块级元素实现以上排列。
补充：浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题，但是也会有不好的影响。如脱标
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>
css代码如下：
#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;
}
二、游戏实现
数字的显示和变换主要是利用了元素的innerHTML来实现获取对象内容 或 向对象插入内容的功能；
首先：创建 4*4 数组，用于存放16个子div元素，
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++;
}
}
后续的操作主要就是对这个数组内的div元素进行修改
// 在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 ="";
}
}
}
}
游戏开始流程：
//游戏开始产生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;//下
}
}