用javascript实现简版2048小游戏
**1、2048小游戏玩法和规则**2048是一款休闲小游戏。2048界面有16宫格，可以用键盘方向键选择上下左右四个方向进行操作，如果有相邻的两个数字相同就会合并，相加组成新数字，并且每次移动或合并后界面会自动增加一个数字。当16宫格中没有空格子，且四个方向都无法操作时，游戏会结束。目的是合并出2048这个数字，获得更高分数。2、游戏界面截图3、2048游戏实现原理1、游戏界面由16宫格组成，可
·
**
1、2048小游戏玩法和规则
**
2048是一款休闲小游戏。
2048界面有16宫格，可以用键盘方向键选择上下左右四个方向进行操作，如果有相邻的两个数字相同就会合并，相加组成新数字，并且每次移动或合并后界面会自动增加一个数字。
当16宫格中没有空格子，且四个方向都无法操作时，游戏会结束。目的是合并出2048这个数字，获得更高分数。
2、游戏界面截图
3、2048游戏实现原理
1、游戏界面由16宫格组成，可以看成是矩阵的形式。
2、在HTML中给每个格子添加类名以及属性，来记录每个格子的位置。
3、游戏开始时，随机生成两个数字，2或者4出现在矩阵中任意位置.
4、游戏核心在于移动
移动由四个方向：上向左右。实现思路如下：
如果触发向左移动
遍历所有非空元素
如果当前元素在第一个位置
不动
如果当前元素不在第一个位置
如果当前元素左侧是空元素
向左移动
如果当前元素左侧是非空元素
如果左侧元素和当前元素的内容不同
不动
如果左侧元素和当前元素的内容相同
向左合并
如果触发向右移动
遍历所有非空元素
如果当前元素在最后一个位置
不动
如果当前元素不在最后一个位置
如果当前元素右侧是空元素
向右移动
如果当前元素右侧是非空元素
如果右侧元素和当前元素的内容不同
不动
如果右侧元素和当前元素的内容相同
向右合并
其他移动的思路和上面一样。
5、然后是判断游戏是否结束
获取所有元素
获取所有非空元素
如果所有元素的个数 == 所有非空元素的个数
循环遍历所有非空元素
上面元素存在 && (当前元素的内容 == 上面元素的内容) return
下面元素存在 && (当前元素的内容 == 下面元素的内容) return
左边元素存在 && (当前元素的内容 == 左边元素的内容) return
右边元素存在 && (当前元素的内容 == 右边元素的内容) return
以上条件都不满足，Game Over!
游戏基本思路就完成了，接下来是实现HTML和JS代码。
HTML和CSS部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 500px;
height: 500px;
/* border: 1px solid #000; */
background-color: #BBADA0;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
border-radius: 0.5em;
margin: 100px auto;
}
#box div{
width: 100px;
height: 100px;
border: 1px solid transparent;
background-color: #CDC1B4;
font-size: 50px;
text-align: center;
line-height: 100px;
font-weight: bold;
border-radius: 10px;
margin-top: 10px;
}
</style>
<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>
<script src="./2048-1.js"></script>
</body>
</html>
Javascript部分:
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++;
}
}
console.log(arr);
//游戏开始产生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;//下
}
}
//产生一个数字
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 : 2;
}else{
rand();
}
}
//判断是否游戏结束函数
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){
chonghe();
}else{
rand();
}
}
function chonghe(){
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 = "";
}
}
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 ="";
}
}
}
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)