2048游戏

于 2021-05-16 20:37:42 发布
阅读量153 收藏
点赞数
文章标签： 游戏 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45743513/article/details/116902549
版权
本文介绍了如何使用HTML、CSS和JavaScript从头创建2048游戏。游戏界面包括一个16宫格的棋盘，通过键盘控制数字方块的移动，当两个相同数字相遇时合并成它们的和。JavaScript逻辑处理了数字的生成、移动和判断游戏结束的条件。此外，还提供了游戏得分的计数功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2048

2048的游戏界面

在这里插入图片描述

游戏html

在这里插入代码片
 <div class="main_box">
        <div class="min_box" id="number00"></div>
        <div class="min_box" id="number01"></div>
        <div class="min_box" id="number02"></div>
        <div class="min_box" id="number03"></div>
        <div class="min_box" id="number10"></div>
        <div class="min_box" id="number11"></div>
        <div class="min_box" id="number12"></div>
        <div class="min_box" id="number13"></div>
        <div class="min_box" id="number20"></div>
        <div class="min_box" id="number21"></div>
        <div class="min_box" id="number22"></div>
        <div class="min_box" id="number23"></div>
        <div class="min_box" id="number30"></div>
        <div class="min_box" id="number31"></div>
        <div class="min_box" id="number32"></div>
        <div class="min_box" id="number33"></div>

html的css样式

在这里插入代码片
* {
    margin: 0px;
    padding: 0px;
}

.case {
    width: 450px;
    height: 600px;
    margin: 20px auto;
    /*overflow: hidden;*/
    position: relative;
    /*border: 1px solid red;*/
}

.above_box {
    width: 450px;
    height: 150px;
    margin: 0px auto;
    /*border: 1px solid red;*/
}

.logo {
    width: 350px;
    height: 150px;
    float: left;
}

.logo_num {
    color: #766f67;
    font-size: 60px;
    font-family: '微软雅黑';
    font-weight: bold;
}

.logo_font {
    color: #9B988F;
    float: left;
    font-size: 16px;
}

.above_box button {
    width: 100px;
    height: 50px;
    color: white;
    font-size: 15px;
    background-color: #8b7c65;
    /*border-radius: 10px: */
    border: none;
    margin-top: 10px;
    float: right;
}

.countScore {
    width: 100px;
    height: 70px;
    background-color: #8b7c65;
    color: white;
    float: right;
    margin-top: 10px;
}

.countScore p {
    /*float: right;
	width: 100px;
	height: 40px;
	background-color: #8b7c65;
	color: white;*/
    /*text-align: center; */
    line-height: 30px;
    text-align: center;
}

.countScore span {
    display: block;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.main_box {
    width: 450px;
    height: 450px;
    margin: 0px auto;
    /*border: 1px solid red;*/
    background-color: #bbada0;
    border-radius: 10px;
    /* position: absolute; */
}

.main_box2 {
    width: 450px;
    height: 450px;
    margin: 0px auto;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    font-size: 50px;
    color: white;
    text-align: center;
    line-height: 450px;
    /*z-index: 1;*/
}

.main_box2 button {
    width: 101px;
    height: 50px;
    color: white;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    position: absolute;
    top: 260px;
    left: 165px;
}

.game {
    z-index: 1;
}

.min_box {
    width: 100px;
    height: 100px;
    background-color: #ccc0b2;
    float: left;
    margin: 10px 0 0 10px;
    border-radius: 5px;
    font-size: 35px;
    line-height: 100px;
    text-align: center;
    color: #796f65;
}


/**/

.n2 {
    background-color: #aae3da
}

.n4 {
    background-color: #ede0c8
}

.n8 {
    background-color: #f2b179
}

.n16 {
    background-color: #f59563
}

.n32 {
    background-color: #f67c5f
}

.n64 {
    background-color: #f65e3b
}

.n128 {
    background-color: #edcf72
}

.n256 {
    background-color: #edcc61
}

.n512 {
    background-color: #9c0
}

.n1024 {
    background-color: #33b5e5
}

.n2048 {
    background-color: #09c9c0
}

.n4096 {
    background-color: #a6c
}

.n8192 {
    background-color: #93c
}

.n2,
.n4 {
    color: #776e65
}

.n1024,
.n2048,
.n4096,
.n8192 {
    font-size: 40px
}

2048js逻辑

在这里插入代码片
//游戏开始 2随机的数字
//单例模式
var game = {
    //定义二维数组的行和列
    RN :4,
    RC :4,
    temp :true,
    lalala :false,
    data:[],
    //初始化data start游戏开始前进行初始化
    start(){
      /* this.data = [
        [4,4,4,4],
        [4,0,0,0],
        [4,0,0,0],
        [4,0,0,0]
      ] */
      for(var i=0;i<this.RN;i++){
        this.data[i] = [];
        for(var j = 0;j<this.RC;j++){
          this.data[i][j] = 0
        }
      }
      this.getrandom();
      this.getrandom();
      console.log(this.data);
    },
    //生成随机数
    getrandom(){
      var n,c;
      
      while(true){
      //下标 行和列  
      n = parseInt(Math.random()*this.RN);
      c = parseInt(Math.random()*this.RC);
      //生成随机的2或者4
      var ran = Math.random()>0.5?4:2;
      if(this.data[n][c] == 0){
        this.data[n][c] = ran;
        break;
        }
      }
    },
    updateView(){
      //使用for循环进行渲染
      for(var r = 0;r<this.RN;r++){
        for(var c = 0;c<this.RC;c++){
          //将数组中不为0的数据渲染到页面中
          if(this.data[r][c]){
            document.getElementById('number'+r+c).innerHTML = this.data[r][c];
            document.getElementById('number'+r+c).className =('min_box '+'n'+this.data[r][c]);
          }else{
            document.getElementById('number'+r+c).innerHTML = '';
            document.getElementById('number'+r+c).className = 'min_box';
          }
        }
      }
    },
    panduan(){
      var nnn = true;
      for(var i=0;i<this.RN;i++){
        for(var j = 0;j<this.RC;j++){
          if(this.data[i][j] == 0){
            nnn=false;
          }
        }
      }
      console.log(nnn);
      if(nnn){
        this.over();
      }
    },
    //左移操作
    leftMove(){
      
      for(var r=0;r<this.RN;r++){
        for(var c = 0;c<this.RC;c++){
          //当前位置有值
          if(this.data[r][c]){
            //循环c后面的数字
            for(var i = c+1;i<this.RC;i++){
              //c后面的数字不为0
              if(this.data[r][i]){
                
                //如果两数相等
                if(this.data[r][c] === this.data[r][i]){
                  this.temp = true;
                  this.data[r][c] *=2;
                  this.data [r][i] = 0;
    
                }else{
                  break;
                }
              }
            }
          }else{
            for(var j = c+1;j<this.RC;j++){
              if(this.data[r][j]){
                this.temp = true;
                this.data[r][c] = this.data[r][j]
                this.data[r][j] = 0;
                c--;
                break;
              }
            }
          }
        }
      }
      this.panduan();
      if(this.temp == true){
        this.getrandom();
        this.updateView();
        this.temp = false;
        
      }
      
    },
    rightMove(){      
      for(var r=0;r<this.RN;r++){
        for(var c = this.RC-1;c>=0;c--){
          //当前位置有值
          if(this.data[r][c]){
            //循环c前面的数字
            for(var i = c-1;i>=0;i--){
              //c前面的数字不为0
              if(this.data[r][i]){
                //如果两数相等
                if(this.data[r][c] === this.data[r][i]){
                  this.temp = true;
                  this.data[r][c] *=2;
                  this.data [r][i] = 0;
  
  
                }else{
                  break;
                }
              }
            }
          }else{
            for(var j = c-1;j>=0;j--){
              if(this.data[r][j]){
                this.temp = true;
                this.data[r][c] = this.data[r][j]
                this.data[r][j] = 0;
                c++;
                break;
              }
            }
          }
        }
      }
      this.panduan();
      if(this.temp == true){
        this.getrandom();
        this.updateView();
        this.temp = false;
  
      }
    },
    topMove(){
      
      //列
      for(var c=0;c<this.RC;c++){
        //行
        for(var r = 0;r<this.RN;r++){
          //当前位置有值
          if(this.data[r][c]){
            //循环c后面的数字
            for(var i = r+1;i<this.RN;i++){
              //c后面的数字不为0
              if(this.data[i][c]){
                //如果两数相等
                if(this.data[i][c] === this.data[r][c]){
                  this.temp = true;
                  this.data[r][c] *=2;
                  this.data[i][c] = 0;  
  
                }else{
                  break;
                }
              }
            }
          }else{
            for(var j = r+1;j<this.RN;j++){
              if(this.data[j][c]){
                this.temp = true;
                this.data[r][c] = this.data[j][c]
                this.data[j][c] = 0;
                r--;
                break;
              }
            }
          }
        }
      }
      this.panduan();
      if(this.temp == true){
        this.getrandom();
        this.updateView();
        this.temp = false;
      }
    },
    bottomMove(){
      
      //列
      for(var c=0;c<this.RC;c++){
        //行
        for(var r = this.RN-1;r>=0;r--){
          //当前位置有值
          if(this.data[r][c]){
            //循环c后面的数字
            for(var i = r-1;i>=0;i--){
              //c后面的数字不为0
              if(this.data[i][c]){
                //如果两数相等
                if(this.data[i][c] === this.data[r][c]){
                  this.temp = true;
                  this.data[r][c] *=2;
                  this.data[i][c] = 0;
                }else{
                  break;
                }
              }
            }
          }else{
            for(var j = r-1;j>=0;j--){
              if(this.data[j][c]){
                this.temp = true;
                this.data[r][c] = this.data[j][c]
                this.data[j][c] = 0;
                r++;
                break;
              }
            }
          }
        }
      }
      this.panduan();
      if(this.temp == true){
        this.getrandom();
        this.updateView();
        this.temp = false;
      }
    },
    over(){
      alert("游戏结束");
      this.start();
    }
  }
  
  console.log(game.start());
  game.updateView();
  window.addEventListener("keydown",function(e){
    var fen =document.getElementsByClassName('fen')[0];
    console.log(e.keyCode);
    if(e.keyCode == 37){
      game.leftMove();
      fen.innerHTML = Number(fen.innerHTML)+8
    }else if(e.keyCode == 39){
      game.rightMove();
      fen.innerHTML = Number(fen.innerHTML)+8
    }else if(e.keyCode == 38){
      game.topMove();
      fen.innerHTML = Number(fen.innerHTML)+8
    }else if(e.keyCode == 40){
      game.bottomMove();
      fen.innerHTML = Number(fen.innerHTML)+8
    }
  })
是小木啊
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值