微信小程序----贪吃蛇

ゞ浴缸里的玫瑰 2024-04-19 08:06 41阅读 0赞

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]  
代码：

<view id="snake" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
      <view class="score">
        <view class="score-box title">贪吃蛇</view>
    
        <view class="score-box score-detail">
          <text class="scoreDes">得分</text>
          <text class="scoreNum">{
       {score}}</text>
        </view>
    
        <view class="score-box score-detail">
          <text class="scoreDes">最高得分</text>
          <text class="scoreNum">{
       {maxScore}}</text>
        </view>
      </view>
    
      <view class="ground">
        <view wx:for="{
         {ground}}" wx:for-item="cols" class="rows">
          <view wx:for="{
         {cols}}" class="box box_{
         {item}}"></view>
        </view>
      </view>
    
      <modal class="modal" hidden="{
         {modalHidden}}" no-cancel bindconfirm="modalChange">
        <view>游戏结束，重新开始吗？</view>
      </modal>
    </view>

/* pages/snake/snake.wxss */
    #snake{
        
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }
    
    .score{
        
      display: flex;
      margin: 20rpx;
    }
    .score-box{
        
      width: 180rpx;
      height: 120rpx;
      flex: 1;
      margin: 20rpx;
      border-radius: 10rpx;
    }
    .title{
        
      background-color: #3476ff;
      color: #fff;
      text-align: center;
      line-height: 120rpx;
    }
    .score-detail{
        
      background-color: #ccc;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .ground{
        
      width: 660rpx;
      height: 840rpx;
      margin-left: 40rpx;
    }
    .rows{
        
      width: 660rpx;
      height: 30rpx;
    }
    .box{
        
      width: 30rpx;
      height: 30rpx;
      float: left;
      background-color: #ccc;
    }
    .box_1{
        
      background-color: red;
    }
    .box_2{
        
      background-color: green;
    }

// pages/snake/snake.js
    Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        score: 0,
        maxScore: 0,
        ground: [],//操场
        rows: 28,
        cols: 22,
        snake: [],
        food: [],
        startx: 0,
        starty: 0,
        x: 0,
        y: 0,
        direction: '',
        timer: '',
        modalHidden: true
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
        let maxscore = wx.getStorageSync('maxscore');
        if (!maxscore) maxscore = 0
        this.setData({
        
          maxscore: maxscore
        });
    
        this.initGround(this.data.rows, this.data.cols);
        this.initSnake(3);
        this.creatFood();
        this.move();
      },
      //初始化操场
      initGround: function (rows, cols) {
        
        let ground = Array(rows).fill(0).map(item => Array(cols).fill(0));
        this.setData({
        
          ground: ground
        });
      },
      //初始化蛇
      initSnake: function (len) {
        
        let snake = this.data.snake;
        let ground = this.data.ground;
        for (let i = 0; i < len; i++) {
        
          snake.push([0, i]);
          ground[0][i] = 1;
        }
        this.setData({
        
          snake: snake,
          ground: ground
        })
      },
      //生成食物
      creatFood: function () {
        
        let x = Math.floor(Math.random() * this.data.rows);
        let y = Math.floor(Math.random() * this.data.cols);
        let food = [x, y];
        let ground = this.data.ground;
        ground[x][y] = 2;
        this.setData({
        
          food: food,
          ground: ground
        })
      },
      touchStart: function (e) {
        
        let startx = e.touches[0].pageX;
        let starty = e.touches[0].pageY;
        this.setData({
        
          startx: startx,
          starty: starty
        })
      },
      touchMove: function (e) {
        
        this.setData({
        
          x: e.touches[0].pageX - this.data.startx,
          y: e.touches[0].pageY - this.data.starty
        });
      },
      touchEnd: function () {
        
        let x = this.data.x, y = this.data.y;
        let direction = '';
        if (Math.abs(x) > Math.abs(y) && x > 0) {
        
          direction = 'right';
          console.log('right');
        } else if (Math.abs(x) > Math.abs(y) && x < 0) {
        
          direction = 'left';
          console.log('left');
        } else if (Math.abs(x) < Math.abs(y) && y < 0) {
        
          direction = 'up';
          console.log('up');
        } else {
        
          direction = 'down';
          console.log('down');
        }
        this.setData({
        
          direction: direction
        })
      },
      //计分器
      storeScore: function () {
        
        if (this.data.maxScore < this.data.score) {
        
          this.setData({
        
            maxScore: this.data.score
          })
          wx.setStorageSync('maxScore', this.data.maxScore)
        }
      },
      //移动函数
      move: function () {
        
        let that = this;
        this.data.timer = setInterval(function () {
        
          that.changeDir(that.data.direction);
        }, 600)
      },
      changeDir: function (dir) {
        
        if(dir){
        
          let snake = this.data.snake;
          let len = snake.length;
          let snakeHead = snake[len - 1], snakeTail = snake[0];
          let ground = this.data.ground;
          ground[snakeTail[0]][snakeTail[1]] = 0;
          for (let i = 0; i < len - 1; i++) {
        
            snake[i] = snake[i + 1];
          }
          let x = snakeHead[0], y = snakeHead[1];
          switch (dir) {
        
            case 'left':
              y--;
              break;
            case 'right':
              y++;
              break;
            case 'up':
              x--;
              break;
            case 'down':
              x++;
              break;
          };
          snake[len - 1] = [x, y];
          this.checkGame(snakeTail);
          for (let i = 1; i < len; i++) {
        
            ground[snake[i][0]][snake[i][1]] = 1;
          }
          this.setData({
        
            snake: snake,
            ground: ground
          })
        }
      },
      checkGame: function (snakeTail) {
        
        let snake = this.data.snake;
        let len = snake.length;
        let snakeHead = snake[len - 1];
        if (snakeHead[0] < 0 || snakeHead[0] >= this.data.rows || snakeHead[1] < 0 || snakeHead[1] >= this.data.cols) {
        
          clearInterval(this.data.timer);
          this.setData({
        
            modalHidden: false
          })
        }
        if (snakeHead[0] == this.data.food[0] && snakeHead[1] == this.data.food[1]) {
        
          snake.unshift(snakeTail)
          this.setData({
        
            score: this.data.score + 10
          });
          this.storeScore();
          this.creatFood();
        }
      },
      modalChange: function () {
        
        this.setData({
        
          score: 0,
          snake: [],
          ground: [],
          food: [],
          modalHidden: true,
          direction: ''
        });
        this.onLoad();
      }
    })

完整代码： https://github.com/ZLQstart/snake

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/87a73f91a9b04774ae5b1e56822da482.png