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

最新推荐文章于 2024-09-13 08:22:37 发布
最新推荐文章于 2024-09-13 08:22:37 发布
阅读量3.3k 收藏 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>

 

雪松~
关注
专栏目录
贪吃蛇2.0_html_vue贪吃蛇_vue项目贪吃蛇_贪吃蛇_vue小游戏demo_
09-29
这是一个用vue写的贪吃蛇小游戏，用于学习
vue3 贪吃蛇。
m0_67477481的博客
10-10 436
vue3 typescript 贪食蛇
vue写的贪吃蛇（完整源码）
weixin_44596213的博客
11-17 2118
整个代码页面： <template> <div class="can"> <!-- 游戏界面 --> <div class="content" v-if="show"> <div class="snake-grassland"> <div class="snake" v-for="(item, index) in snake" :...
Snake游戏Vue3项目教程
最新发布
gitblog_00478的博客
09-13 534
Snake游戏Vue3项目教程 snake-vue3 The classic "Snake" game implemented in Vue3 项目地址: https://gitcode.com/gh_mirrors/sn/sna...
在vue中用canvas画一个简单的贪吃蛇游戏
qq_36093530的博客
09-22 376
【代码】在vue中用canvas画一个简单的贪吃蛇游戏。
自学系列之小游戏---贪吃蛇（vue3+ts+vite+element-plus+sass)（module.scss + tsx）
白开水丶
10-23 746
vue3vitetstsxsass实现贪吃蛇小游戏使用的技术有为了使用而使用的嫌疑，使用还有些不太熟练，望大家多多理解，如有建议欢迎多多评论或私信指教。
200 行代码写个贪吃蛇【vue3 + canvas】
m0_64435826的博客
04-20 957
贪吃蛇作为一个经典的小游戏，是很多人儿时的记忆，当时的掌机、诺基亚手机里面都有它的身影，随着时间流逝，当年的我们已经变成大人模样，玩着王者，吃鸡等大型游戏；贪吃蛇这种小游戏已经吊不起我们的兴趣了，不过如果你是一名程序员，那还是建议实现一下，毕竟作为 leetcode 353 算法题你总不想在面试的时候遇到它却不会吧。本文让我们来复刻一下这款经典的小游戏吧在线地址let width = ref(600) // 地图默认宽度let height = ref(400) // 地图默认高度。
使用Vue框架开发的贪吃蛇小游戏
First_llh的博客
12-23 4650
VUE2.0开发的贪吃蛇
Vue实现input宽度随文字长度自适应操作
10-15
本文主要介绍如何利用Vue框架实现一个input输入框，让其宽度能够随着用户输入的文字长度动态调整，以适应不同长度的输入内容。 在日常的前端开发过程中，我们经常会遇到需要根据输入内容自动调整宽度的场景，以提升...
Vue 自适应高度表格的实现方法
10-15
在Vue中实现自适应高度的表格是一项常见的需求，尤其是在处理大量数据时，保持页面布局整洁，避免全局滚动条出现，是提升用户体验的关键。本文将详细介绍如何在Vue项目中，特别是在使用Element-UI库的情况下，实现...
详解基于vue-cli配置移动端自适应
08-28
本文主要介绍了基于vue-cli配置移动端自适应的方法，主要涉及到三个方面：lib-flexible库的安装和使用、px到rem的转换、vue-cli配置的修改。 首先，在项目中安装lib-flexible库，使用命令`npm i lib-flexible --...
vue小游戏(扫雷、贪吃蛇)
01-28
Awesome-Game-master.zip
用vue来实现炫酷贪吃蛇.zip
05-31
用vue来实现炫酷贪吃蛇.zip
vue+elementUI 实现内容区域高度自适应的示例
10-14
Vue.js，作为一个流行的前端框架，结合Element UI组件库，能够轻松实现这一功能。本文将深入探讨如何在Vue项目中，利用Element UI来实现内容区域的高度自适应。 首先，我们需要理解Vue.js中的动态绑定。在Vue中，...
vue中echarts3.0自适应的方法
08-27
ECharts 自适应是 Vue 项目中一个常见的问题，通过使用 `window.onresize` 事件或根据 div 大小变化进行自适应，我们可以轻松地实现图表的自适应功能。同时，了解 ECharts 的自适应机制可以帮助我们更好地使用 ...
Vue2模拟贪吃蛇小游戏
qq_44930306的博客
06-04 1014
本章借助vue和js模拟了贪吃蛇的原理，主要是移动和边界判断。
11 贪吃蛇小游戏 js版本 + vue版本
970655147的专栏
10-24 2350
缘于一些 小的需求因为一些原因 可能到这里就不会再往后面设计了主要分为了两个版本, html + js 的版本 和 vue 的版本核心的意义是 面向对象的程序设计不过是 基于了这种常见的小游戏 展现出来了。
前端vue写贪吃蛇
notagoodwriter的博客
06-27 493
本块是蛇在移动过程中，碰到边界则游戏结束，碰到自己的尾巴也是一样的还有吃到食物变长以及监听键盘上下左右移动事件。当中获取了游戏区域的宽高，并利用其宽高计算出了每个格子的长和宽。本块是随机生成食物块 在格子当中横纵坐标不为蛇块的地方生成食物块。我将其分为了每行20块，每列10块的区域，首先我在。是这块当中是否为蛇块。
如何用vue实现简单的贪吃蛇游戏
weixin_42242810的博客
08-20 289
首先，确保你已经安装了Vue CLI。中编写贪吃蛇的游戏逻辑。目录下创建一个新的组件文件。
vue 实现pc端项目自适应
05-24
这样可以根据不同的屏幕大小，自动调整页面布局，从而实现自适应。 2. 使用百分比布局：在Vue的模板中，可以使用百分比来定义元素的大小和位置，这样可以根据不同的屏幕大小，自动调整元素的大小和位置。 3. 使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值