vue实现一个简单的自适应贪吃蛇

最新推荐文章于 2024-04-20 16:57:40 发布
最新推荐文章于 2024-04-20 16:57:40 发布
阅读量3.1k 收藏 15
点赞数 7
分类专栏： 前端 技术分享 文章标签： 前端 vue 贪吃蛇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dacbe/article/details/90021306
版权

前一阵用vue写了一个贪吃蛇，主要练习一下自己的逻辑拆分能力，在此与大家分享一下。

此贪吃蛇可以通过分辨率比例自动计算格子数量，用二维数组实现。

<<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .tetris-wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      overflow: auto;
    }
    .game-wrapper {
      position: absolute;
      top: 0.1rem;
      bottom: 0.1rem;
      left: 0.1rem;
      right: 0.1rem;
      display: flex;
      flex-direction: column;
      background-color: grey;
    }
    .block-group {
      flex: 1;
      position: relative;
      display: flex;
    }
    .block {
      flex: 1;
      border: 0.01rem solid #000;
    }
    .green {
      background-color: green;
    }
    .red {
      background-color: red;
    }
    .blue {
      background-color: blue;
    }
    .black {
      background-color: black;
    }
  </style>
</head>

<body>
  <div id="game"
  class="tetris-wrapper"
  @click="test"
  ref="test"
  @swipeup="changeMoveDirection(0)"
  @swiperight="changeMoveDirection(1)"
  @swipedown="changeMoveDirection(2)"
  @swipeleft="changeMoveDirection(3)">
    <div class="game-wrapper" ref="container">
      <div class="block-group" v-for="(item, index) in structureArray" :key="index">
        <div class="block"
        v-for="(block, blockIndex) in item"
        :key="blockIndex"
        :class="{green: block.state === 1, red: block.state === 2, blue: block.state === 3, black: block.state === 4}">
        </div>
      </div>
    </div>
  </div>
</body>

<script>
  let app = new Vue ({
    el: '#game',
    data () {
      return {
        timer: null, // 存储定时器
        interval: 200, // 定时间隔时间
        transverse: 20, // 横坐标方格数量
        structureArray: [], // 游戏画布结构数组
        moveDirection: 1, // 蛇的移动方向，0、1、2、3，上右下左
        nextMoveDirection: 1, // 将要移动的方向，0、1、2、3，上右下左
        snakeHead: {}, // 蛇头的坐标
        snakeTail: {}, // 蛇尾坐标
        foodCoordinate: {} // 食物坐标
      }
    },
    methods: {
      test () {
        console.log(this.$refs.container.clientHeight);
        console.log(this.$refs.container.clientWidth);
        console.log(this.longitudinal);
      },
      changeMoveDirection (direction) { // 改变蛇的运动方向
        let judge = direction - this.moveDirection; // 判断非法的蛇头转向
        if (judge === 2 || judge === -2) return;
        this.nextMoveDirection = direction;
      },
      mobileRule () { // 蛇的移动规则定义
        let {x, y} = this.snakeHead; // 当前蛇头的坐标
        let headCode = this.structureArray[y][x].code; // 获取当前蛇头的code,用来生成新蛇头时++使用
        this.structureArray[y][x].state = 1; // 取消原来的蛇头状态
        switch(this.nextMoveDirection) { // 移动方向，计算移动后的横纵坐标
          case 0:
            y--;
            break;
          case 1:
            x++
            break;
          case 2:
            y++;
            break;
          case 3:
            x--;
            break;
          default:
            throw new Error('蛇的移动规则判断出错');
            break;
        }
        this.structureArray[y].splice(x, 1, {state: 2, code: ++headCode}); // 生成新的蛇头
        this.snakeHead = {x, y};
        this.moveDirection = this.nextMoveDirection;
        this.whetherEatFood(); // 判断是否吃到食物（蛇头和食物坐标是否重合）
      },
      whetherEatFood () { // 是否吃到食物判断
        let state = JSON.stringify(this.snakeHead) === JSON.stringify(this.foodCoordinate); // 判断食物和蛇头是否在一个坐标上
        if (state) { // 吃到了
          this.generateFood(); // 生成食物
          this.integralRule(); // 走积分
          this.increaseDifficulty(); // 增加难度
        } else { // 没吃到食物
          this.generateSnakeTail(); // 重新生成蛇尾
        }
      },
      generateFood () { // 生成食物,生成随机食物坐标
        let x = Math.floor(Math.random() * this.transverse); // 生成随机数
        let y = Math.floor(Math.random() * this.longitudinal); // 生成随机数
        if (this.structureArray[y][x].state === 0) { // 是空位置
          this.foodCoordinate = {x, y}; // 新的食物坐标
          this.structureArray[y].splice(x, 1, { state: 4, code: Infinity}); // 修改坐标状态值,code无限大用来计算蛇尾时不会出错
        } else { // 位置不为空，重新生成
          this.generateFood();
        }
      },
      integralRule () { // 积分规则

      },
      increaseDifficulty () { // 增加难度规则
        if (this.interval <= 100) return;
        this.interval -= 4;
        this.clearTimer();
        this.initializationTimer();
      },
      generateSnakeTail () { // 重新生成蛇尾(在没有吃到食物的情况下调用)
        let {x, y} = this.snakeTail; // 获取蛇尾坐标
        // let tailCode = this.structureArray[y][x].code + 1; // 计算将要作为蛇尾的code -------- 这里code取错了，这样的话取得是蛇头的，改成取上下左右最小的code
        // 销毁之前的蛇尾(若当前蛇尾蛇尾位置是蛇头，则不做处理，因为头先生成)
        if (this.structureArray[y][x].state !== 2) this.structureArray[y].splice(x, 1, {state: 0});
        // 接下来重新定位蛇尾坐标
        /*if (this.structureArray[y + 1][x].state && tailCode === this.structureArray[y + 1][x].code) y++;
        else if (this.structureArray[y - 1][x].state && tailCode === this.structureArray[y - 1][x].code) y--;
        else if (this.structureArray[y][x + 1].state && tailCode === this.structureArray[y][x + 1].code) x++;
        else if (this.structureArray[y][x - 1].state && tailCode === this.structureArray[y][x - 1].code) x--;*/
        // else throw new Error('重新生成蛇尾错误')
        // 取上下左右code最小的是新蛇尾
        let top = (y - 1 >= 0) && this.structureArray[y - 1][x].state ? this.structureArray[y - 1][x].code : Infinity;
        let bottom = (y + 1 < this.longitudinal) && this.structureArray[y + 1][x].state ? this.structureArray[y + 1][x].code : Infinity;
        let left = (x - 1 >= 0) && this.structureArray[y][x - 1].state ? this.structureArray[y][x - 1].code : Infinity;
        let right = (x + 1 < this.transverse) && this.structureArray[y][x + 1].state ? this.structureArray[y][x + 1].code : Infinity;
        let min = Math.min(top, bottom, left, right);
        switch(min) {
          case top:
            y--;
            break;
          case bottom:
            y++;
            break;
          case left:
            x--;
            break;
          case right:
            x++;
            break;
          default:
            console.log('重新生成蛇尾出错了');
            break;
        }
        this.snakeTail = {x, y}; // 保存蛇尾坐标
        this.structureArray[y][x].state = 3; // 将此坐标定义为蛇尾
      },
      deathRule () { // 蛇的死亡规则判断
        let {x, y} = this.snakeHead;
        switch (this.nextMoveDirection) { // 移动方向(碰壁判断和碰蛇身判断)
          case 0:
            if (y - 1 < 0) return false;
            else if (this.structureArray[y - 1][x].state === 1) return false;
            break;
          case 1:
            if (x + 1 > this.transverse - 1) return false;
            else if (this.structureArray[y][x + 1].state === 1) return false;
            break;
          case 2:
            if (y + 1 > this.longitudinal - 1) return false;
            else if (this.structureArray[y + 1][x].state === 1) return false;
            break;
          case 3:
            if (x - 1 < 0) return false;
            else if (this.structureArray[y][x - 1].state === 1) return false;
            break;
          default:
            throw new Error('蛇的死亡规则判断错误');
            break;
        }
        return true;
      },
      deathTreatment () { // 蛇的死亡处理
        this.clearTimer();
        alert('你的小宝贝没了！！！！');
      },
      initializationGrid () { // 初始化网格
        this.structureArray = [];
        for (let i = 0; i < this.longitudinal; i++) {
          this.structureArray.push([]);
          for (let j = 0; j < this.transverse; j++) {
            this.structureArray[i].push({
              state: 0 // 0为空，1为蛇身，2为蛇头，3为蛇尾，4为食物
            });
          }
        }
      },
      initializationSnake () { // 初始化蛇
        this.structureArray[2].splice(4, 1, {state: 2, code: 2});
        this.structureArray[2].splice(3, 1, {state: 1, code: 1});
        this.structureArray[2].splice(2, 1, {state: 3, code: 0});
        this.snakeHead = {x: 4, y: 2}; // 蛇头坐标
        this.snakeTail = {x: 2, y: 2}; // 蛇尾坐标
      },
      initializationTimer () { // 初始化定时器
        this.timer = setInterval(() => {
          // 处理
          if (this.deathRule()) { // 死不了
            this.mobileRule(); // 走移动
          } else { // 死掉了
            this.deathTreatment();
          }
        }, this.interval);
      },
      clearTimer () { // 清理定时器
        clearInterval(this.timer);
      },
      addKeyboardEvents () { // 添加全局键盘按下事件
        document.onkeydown = (event) => {
          console.log(event);
          switch(event.keyCode) {
            case 38:
              this.changeMoveDirection(0);
              break;
            case 39:
              this.changeMoveDirection(1);
              break;
            case 40:
              this.changeMoveDirection(2);
              break;
            case 37:
              this.changeMoveDirection(3);
              break;
          }
        }
      }
    },
    async mounted () {
      await this.initializationGrid(); // 初始化网格
      this.initializationSnake(); // 初始化蛇
      this.initializationTimer(); // 初始化定时器
      this.generateFood(); // 生成食物
      this.addKeyboardEvents(); // 添加键盘按下事件
    },
    destroyed () {
      this.clearTimer();
    },
    computed: {
      longitudinal () { // 获取容器宽高比,计算纵坐标方格数
        let boxWidth = this.$refs.container.clientWidth;
        let boxHeight = this.$refs.container.clientHeight;
        let longitudinal = parseInt((boxHeight / boxWidth) * this.transverse);
        return longitudinal;
      }
    }
  });
</script>
</html>

 

雪松~
关注
  • 7
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue写的贪吃蛇（完整源码）
weixin_44596213的博客
11-17 1966
整个代码页面： <template> <div class="can"> <!-- 游戏界面 --> <div class="content" v-if="show"> <div class="snake-grassland"> <div class="snake" v-for="(item, index) in snake" :...
Vue2模拟贪吃蛇小游戏
qq_44930306的博客
06-04 710
本章借助vue和js模拟了贪吃蛇的原理，主要是移动和边界判断。
贪吃蛇2.0_html_vue贪吃蛇_vue项目贪吃蛇_贪吃蛇_vue小游戏demo_
09-29
这是一个用vue写的贪吃蛇小游戏，用于学习
用vue来实现炫酷贪吃蛇.zip
05-31
用vue来实现炫酷贪吃蛇.zip
贪吃蛇小游戏（详细版）
weixin_45934659的博客
05-30 662
下面是网页版的贪吃蛇代码，感兴趣的小伙伴可以看一下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>简易贪吃蛇（原创）-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> #myCanv
在vue中用canvas画一个简单的贪吃蛇游戏
qq_36093530的博客
09-22 314
【代码】在vue中用canvas画一个简单的贪吃蛇游戏。
自学系列之小游戏---贪吃蛇（vue3+ts+vite+element-plus+sass)（module.scss + tsx）
白开水丶
10-23 616
vue3vitetstsxsass实现贪吃蛇小游戏使用的技术有为了使用而使用的嫌疑，使用还有些不太熟练，望大家多多理解，如有建议欢迎多多评论或私信指教。
使用Vue框架开发的贪吃蛇小游戏
First_llh的博客
12-23 4466
VUE2.0开发的贪吃蛇
11 贪吃蛇小游戏 js版本 + vue版本
970655147的专栏
10-24 2288
缘于一些 小的需求因为一些原因 可能到这里就不会再往后面设计了主要分为了两个版本, html + js 的版本 和 vue 的版本核心的意义是 面向对象的程序设计不过是 基于了这种常见的小游戏 展现出来了。
200 行代码写个贪吃蛇【vue3 + canvas】
最新发布
m0_64435826的博客
04-20 811
贪吃蛇作为一个经典的小游戏，是很多人儿时的记忆，当时的掌机、诺基亚手机里面都有它的身影，随着时间流逝，当年的我们已经变成大人模样，玩着王者，吃鸡等大型游戏；贪吃蛇这种小游戏已经吊不起我们的兴趣了，不过如果你是一名程序员，那还是建议实现一下，毕竟作为 leetcode 353 算法题你总不想在面试的时候遇到它却不会吧。本文让我们来复刻一下这款经典的小游戏吧在线地址let width = ref(600) // 地图默认宽度let height = ref(400) // 地图默认高度。
vue小游戏(扫雷、贪吃蛇)
01-28
Awesome-Game-master.zip
Vue实现input宽度随文字长度自适应操作
10-15
主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用Vue组件实现一个简单弹窗效果
08-27
主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式，props 、 $emit 传参，具体组件代码也传上去了。需要的朋友可以参考下
Vue 自适应高度表格的实现方法
10-15
主要介绍了Vue 自适应高度表格的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+elementUI 实现内容区域高度自适应的示例
10-14
主要介绍了vue+elementUI 实现内容区域高度自适应的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
10 分钟用 Python 编写一个贪吃蛇小游戏
wulishinian的博客
11-14 2790
贪吃蛇，大家应该都玩过。当初第一次接触贪吃蛇的时候 ，还是能砸核桃的诺基亚上，当时玩的不亦乐乎。今天，我们用Python编程一个贪吃蛇游戏，下面我们先看看效果： 好了，先介绍一个思路 所有的游戏最主要的内容都是程序的内循环,这才是保证一个游戏能够正常运行的前提。 以下是编写贪吃蛇小游戏的主要思路。 废话不多说，我们直接来讲解如何利用Python进行贪吃蛇的编写吧 一、调用库以及初始设置 调用...
vue2 贪吃蛇的实现思路
小陈的博客
06-20 689
之前用原生的写过一次贪吃蛇，逻辑稍显复杂，后面用做过一个优化，但是整体的效果不是很好，这里我们用来粗略地实现。要让一条蛇在画板上跑，因此首先我们要新建一个画板元素，先暂时固定宽高，然后给定一个背景色，样式后面再来优化。然后我们再来放一条蛇，新增一个的数据，然后初始化它的坐标为，其中表示每一个元素位于多少行，表示位于多少列。 然后我们要渲染到画板上，同时配上位置函数，将每个元素都位置都放好。 现在我们来让这条蛇元素动起来，很简单，列表中的数据，后一个的坐标来覆盖前一个的坐标即可，而最后一个元素，也就是蛇头，我
Vue3+Ts实现贪吃蛇小游戏
qq_46258819的博客
02-23 378
启动必须在DOM渲染完成之后再启动即Mounted，否则无法获取到DOM元素。
Springboot+vue3项目,kind-of-bots(实现一个贪吃蛇实时对战系统)
dh99999900的博客
07-20 308
1.解决跨域问题2.创建菜单和游戏界面(上)3.创建菜单和游戏界面(下)4.配置mysql和登陆注册模块5.创建个人中心界面6.匹配系统7.Bot代码的执行8.创建对战列表和排行榜页面t=N6B9昌文 林 / King Of Bots · GitLab (acwing.com)https://git.acwing.com/lcwyyds/king-of-bots。
vue 实现pc端项目自适应
05-24
这样可以根据不同的屏幕大小，自动调整页面布局，从而实现自适应。 2. 使用百分比布局：在Vue的模板中，可以使用百分比来定义元素的大小和位置，这样可以根据不同的屏幕大小，自动调整元素的大小和位置。 3. 使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值