使用Vue框架开发的贪吃蛇小游戏

已于 2023-03-30 11:47:17 修改
阅读量4.4k 收藏 6
点赞数
文章标签： vue.js 前端 javascript
于 2021-12-23 08:48:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L0317/article/details/122098926
版权

注意：尽量不要用谷歌浏览器运行，因为谷歌浏览器会把GameValue翻译成中文，使游戏掉帧卡顿

解决办法：1.使用Edge浏览器，2.把谷歌浏览器的自动中文翻译关闭即可

游戏截图：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="width=device-width,initial-scale=1.0,user-scalable=0" name="viewport">
    <title>贪吃蛇</title>

    <link href="https://llh317.oss-cn-guangzhou.aliyuncs.com/bootstrap-4.6.1-dist/bootstrap-4.6.1-dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="https://llh317.oss-cn-guangzhou.aliyuncs.com/js-package/js/vue.js"></script>

    <style>
        * {
            user-select: none;
        }

        .mapParent {
            height: 500px;
        }

        .map {
            border: 1px red dashed;
            height: 100%;
            width: 100%;
        }

        .titleAlert {
            font-weight: bold;
        }

        .system {
            color: #909399;
            font-size: 12px;
        }

        .titleValue {
            font-size: 12px;
            color: #909399;
            margin: -10px 0;
        }

        .foot {
            text-align: center;
        }

        .butWASD button {
            font-size: 50px;
            width: 150px;
            height: 150px;
        }

        .hereto {
            color: #909399;
            margin: 0 5px;
            text-decoration: underline;
        }

        .description {
            font-size: 16px;
            color: #909399;
        }

        .footNote {
            font-size: 12px;
            color: #909399;
        }

        .sbody {
            background-color: skyblue;
        }

        .shead {
            background-color: red;
        }

        .food {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
<div class="llh">
    <br>
    <br>
    <div @keydown.65="aKey"
         @keydown.68="dKey"
         @keydown.75="accelerate(true)"
         @keydown.83="sKey"
         @keydown.87="wKey"
         @keydown.down="sKey"
         @keydown.left="aKey"
         @keydown.right="dKey"
         @keydown.up="wKey"
         @keyup.74="gameState(2)"
         @keyup.75="accelerate(false)"
         class="container" id="v1">
        <div class="row">
            <div class="col-sm-3" style="text-align: center;">
                <button :class="{
                        btn:true,
                        'btn-info':buttonColorNum===0,
                        'btn-success':buttonColorNum===1,
                        'btn-danger':buttonColorNum===2,
                        'btn-warning':buttonColorNum===3
                        }" @blur="gameState(1)" @click="gameState(0)">{{buttonPrompt}}
                </button>
                <br><br>
                <h3 style="color: #303133;">得分:{{score}}</h3>
                <h6 class="titleAlert" id="open" style="color: blue;display: none;">[ 已启动加速 ]</h6>
                <h6 class="titleAlert" id="close" style="color: red;">[ 已关闭加速 ]</h6>
            </div>
            <div class="col-sm-6 mapParent">
                <table align="center" class="map" v-html="gameMapData"></table>
            </div>
            <div class="col-sm-3 system">
                <label class="titleValue">游戏参数调试板：</label>
                <br>
                <label class="titleValue">score:~~~</label>{{score}}
                <br>
                <label class="titleValue">snakeLength:~~~</label>{{snakeLength}}
                <br>
                <label class="titleValue">xSnake:~~~</label>{{xSnake}}
                <br>
                <label class="titleValue">ySnake:~~~</label>{{ySnake}}
                <br>
                <label class="titleValue">xTimerLog:~~~</label>{{xTimerLog}}
                <br>
                <label class="titleValue">yTimerLog:~~~</label>{{yTimerLog}}
                <br>
                <label class="titleValue">playerDirection:~~~</label>{{playerDirection}}
                <br>
                <label class="titleValue">X-Y:</label>{{walkList}}
            </div>
        </div>
        <br>
        <div>
            <div class="foot">
                <div class="butWASD" v-if="butWASD">
                    <button @click="wKey" class="btn btn-danger">上</button>
                    <br>
                    <button @click="aKey" class="btn btn-danger">左</button>
                    <button class="btn"></button>
                    <button @click="dKey" class="btn btn-danger">右</button>
                    <br>
                    <button @click="sKey" class="btn btn-danger">下</button>
                </div>
                <hr>
                <div class="description">
                    操作：（ W-A-S-D：方向 ）-（暂停/开始游戏：j ）-（ 加速：k ）-（如果游戏出现停止运行，重新点击按钮即可）
                </div>
                <hr>
                <div class="footNote">
                    Creation time 2021-10-01
                    <a class="hereto" href="https://blog.csdn.net/L0317">©廖利辉</a>
                    <a class="hereto"
                       href="https://blog.csdn.net/L0317/article/details/122098926?spm=1001.2014.3001.5501">®TCS</a>
                    <a class="hereto" href="https://cn.vuejs.org/index.html">™VUE.JS-version:2.0</a>
                </div>
            </div>
        </div>
        <br>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#v1",
        data: {
            /* 按钮样式 */
            buttonColorNum: -1, //按钮颜色
            buttonPrompt: "", //按钮提示

            /* 绘制地图 */
            gameMapData: "", //地图的html数据
            dituSize: 100, //地图的大小

            /* 游戏参数（管远缘量身定做） */
            speed: 70, //速度
            speedMirroring: 0, //速度镜像
            score: 0, //得分
            snakeLength: 10, //蛇身长度

            /* 游戏日志 */
            walkList: [], //行走记录
            xSnake: 0, //横向
            ySnake: 0, //纵向

            xFood: 0, //食物横向
            yFood: 0, //食物纵向

            playerDirection: 0, //保存方向

            /* 计时器 */
            xTimerLog: null, //横向计时器
            yTimerLog: null, //纵向计时器

            /* 手机端按钮 */
            butWASD: false
        },
        methods: {
            accelerate(bool) {
                //加速
                this.speed = bool ? 20 : this.speedMirroring
                this.getllh("open").style.display = bool ? "block" : "none"
                this.getllh("close").style.display = bool ? "none" : "block"
            },
            gameState(state) {
                //0运行 1游戏意外停止（游戏指针转移） 2暂停

                //处理重复手动点击
                if (state === 0 && this.buttonColorNum === 1) {
                    state = 2
                }
                //处理暂停状态时按j
                if (state === 2 && this.buttonColorNum === 3) {
                    state = 0
                }
                //处理停止状态时按j
                if (state === 2 && this.buttonColorNum === 2) {
                    state = 0
                }
                if (state === 0) {
                    /* 游戏开始 */
                    this.buttonPrompt = "游戏正在运行";
                    this.buttonColorNum = 1
                    /* 初始化 */
                    if (this.xSnake === 0 && this.xFood === 0) {
                        //保持从中间出来
                        this.ySnake = this.xSnake = Math.floor(this.dituSize / 2);
                        this.setFood(); //随机产生豆子
                    } else {
                        //启动后,重新启动保持方向
                        if (this.xTimerLog != null && this.playerDirection > 0) {
                            this.xTimerLog = null; //设置为空,方向改变器
                            this.dKey();
                        } else if (this.xTimerLog != null && this.playerDirection < 0) {
                            this.xTimerLog = null; //设置为空,方向改变器
                            this.aKey();
                        } else if (this.yTimerLog != null && this.playerDirection > 0) {
                            this.yTimerLog = null; //设置为空,方向改变器
                            this.sKey();
                        } else if (this.yTimerLog != null && this.playerDirection < 0) {
                            this.yTimerLog = null; //设置为空,方向改变器
                            this.wKey();
                        }
                    }
                } else if (state === 1) {
                    // PC端需要聚焦到开始按钮，手机端不需要
                    if (!this.butWASD) {
                        /* 游戏停止 */
                        this.buttonPrompt = "游戏停止运行(继续运行)";
                        this.buttonColorNum = 2;

                        // 清空计时器
                        this.xTimerLog != null ? clearInterval(this.xTimerLog) : ""
                        this.yTimerLog != null ? clearInterval(this.yTimerLog) : ""
                    }
                } else if (state === 2) {
                    /* 游戏暂停 */
                    this.buttonPrompt = "游戏暂停运行(开始游戏)";
                    this.buttonColorNum = 3;

                    //清空计时器
                    this.xTimerLog != null ? clearInterval(this.xTimerLog) : ""
                    this.yTimerLog != null ? clearInterval(this.yTimerLog) : ""
                }
            },
            wKey() {
                this.direction("y", -1); //y轴减少
            },
            aKey() {
                this.direction("x", -1); //x轴减少
            },
            sKey() {
                this.direction("y", 1); //y轴增多
            },
            dKey() {
                this.direction("x", 1); //x轴增多
            },
            direction(axis, num) {
                /* 方向改变器 */
                //游戏必须处于运行状态
                if (this.buttonColorNum === 1) {
                    if (axis === "x") {
                        /* x轴运动器 */
                        //x轴计时器必须为空
                        if (this.xTimerLog == null) {
                            if (this.yTimerLog != null) this.initializeTimer("y") //初始化y
                            this.playerDirection = num; //保存玩家的方向
                            this.xTimerLog = setInterval(() => {
                                this.xSnake += num //x加1
                                this.addWalkList(this.xSnake, this.ySnake); //保存记录
                                this.walkStart(); //行走
                            }, this.speed)
                        }
                    } else if (axis === "y") {
                        /* y轴运动器 */
                        if (this.yTimerLog == null) {
                            if (this.xTimerLog) this.initializeTimer("x") //初始化x
                            this.playerDirection = num; //保存玩家的方向
                            this.yTimerLog = setInterval(() => {
                                this.ySnake += num //y加1
                                this.addWalkList(this.xSnake, this.ySnake); //保存记录
                                this.walkStart(); //行走
                            }, this.speed)
                        }
                    }
                }
            },
            addWalkList(x, y) {
                /* 记录保存器 */
                function Log(xLog, yLog) { //日志对象
                    this.xLog = xLog;
                    this.yLog = yLog;
                }

                this.walkList[this.walkList.length] = new Log(x, y); //当前记录添加进去

                /* 性能优化(数组长度根据蛇的长度+1去定制) +1是为了获取被清空的那个一格*/
                let performance = [];
                if (this.walkList.length > this.snakeLength) {
                    /* 截取蛇身长度的数值优化 */
                    for (let i = this.walkList.length - 1 - this.snakeLength; i <= this.walkList.length -
                    1; i++) {
                        performance[performance.length] = this.walkList[i];
                    }
                    this.walkList = performance;
                }
            },
            walkStart() {
                /* 行走器 */
                let headObj = this.walkList[this.walkList.length - 1]; //读取玩家头记录
                this.sStyle(headObj.xLog, headObj.yLog, true, "shead"); //设置头

                let bodyObj = this.walkList[this.walkList.length - 2]; //读取玩家身体记录
                if (bodyObj != null) this.sStyle(bodyObj.xLog, bodyObj.yLog, true, "sbody") //设置身体

                let clearObj = this.walkList[this.walkList.length - 1 - this.snakeLength]; //读取清空的记录
                if (clearObj != null) this.sStyle(clearObj.xLog, clearObj.yLog, false) //清空身体

                if (headObj.xLog === this.xFood && headObj.yLog === this.yFood) { //判断头部,是否触碰了食物
                    this.score += 1; //加一分
                    if (this.score % 2 === 0) this.snakeLength += 1 //2个豆子一格身子
                    this.setFood(); //随机产生食物
                }

                for (let i = 0; i <= this.walkList.length - 2; i++) { //遍历身体,判断头部是否触碰到身体
                    if (this.walkList[i].xLog === headObj.xLog && this.walkList[i].yLog === headObj.yLog) {
                        location.reload()
                        alert("游戏结束")
                    }
                }
            },
            setFood() {
                /* 食物放置器 */
                this.xFood = Math.floor(Math.random() * this.dituSize); //食物的x轴
                this.yFood = Math.floor(Math.random() * this.dituSize); //食物的y轴
                this.sStyle(this.xFood, this.yFood, true, "food"); //给食物添加样式
            },
            initializeTimer(axis) {
                /* 计时初始化器 */
                if (axis === "x") {
                    if (this.xTimerLog != null) {
                        clearInterval(this.xTimerLog)
                        this.xTimerLog = null;
                    }
                } else if (axis === "y") {
                    if (this.yTimerLog != null) {
                        clearInterval(this.yTimerLog)
                        this.yTimerLog = null;
                    }
                }
            },
            sStyle(x, y, bool, className) {
                /* 样式改变器*/
                try {
                    if (bool) {
                        /* 设置样式 */
                        this.getllh("llh-" + x + "-" + y).className = className;
                    } else {
                        /* 清空样式 */
                        this.getllh("llh-" + x + "-" + y).className = "";
                    }
                } catch (exception) {
                    location.reload()
                    alert("游戏结束")
                }
            },
            getllh(name) {
                /* 元素获取器 */
                return document.getElementById(name);
            },
            isPC() {
                // 是否为PC端
                let sUserAgent = navigator.userAgent.toLowerCase();
                return !/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent);
            }
        },
        created() {
            /* 初始化地图 */

            console.log(
                `%c 贪吃蛇 %c 作者：廖利辉 %c `,
                'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
                'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
                'background:transparent'
            )

            this.buttonPrompt = "地图渲染中"; // 改变按钮文字

            let size = this.dituSize; // 获取地图的参数

            /* 循环y轴 */
            for (let y = 0; y < size; y++) {
                this.gameMapData += "<tr>";
                /* 循环x轴 */
                for (let x = 0; x < size; x++) {
                    this.gameMapData += "<td id='llh-" + x + "-" + y + "'></td>";
                }
                this.gameMapData += "</tr>";
            }

            this.buttonPrompt = "地图渲染完成(开始游戏)"; // 改变按钮文字
            this.buttonColorNum = 0; // 改变按钮颜色

            this.speedMirroring = this.speed; // 将速度镜像赋值

            /* 为了展示手机端的上下左右按钮，PC不展示 */
            this.butWASD = !this.isPC() // 赋值是否为PC
        }
    })

</script>
</html>

HJAVAH
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[vue]基于vue的单页面应用游戏——桌游:《星期五》
身披白袍的博客
08-01 1万+
跟几个朋友摸鱼的时候弄出来的，规则按照游玩习惯做了点修改。
2048小游戏 vue+uni-app 简单实现了一下
m0_57533694的博客
04-19 3676
做的一个 挺有意思的小游戏
vue小游戏(扫雷、贪吃蛇)
01-28
Awesome-Game-master.zip
vue做游戏vue游戏引擎vue小游戏开发
最新发布
代上老码的专栏
04-08 1372
Vue.js 是一个构建用户界面的渐进式JavaScript框架，它同样可以用于游戏开发。
8个开源的Vue/React小游戏，个个经典
ApologizeError的博客
10-18 873
该项目使用的技术栈包括：TypeScript、Webpack、React、Redux、React Router。其功能包括：15个关卡、快速下落和硬下落、方块放置预览、音效和背景音乐、简化的得分系统等。使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。本文来分享 8 个基于 Vue / React 的小游戏，包括俄罗斯方块、贪吃蛇、扫雷、国际象棋等，个个经典！
vue写的贪吃蛇（完整源码）
weixin_44596213的博客
11-17 1976
整个代码页面： <template> <div class="can"> <!-- 游戏界面 --> <div class="content" v-if="show"> <div class="snake-grassland"> <div class="snake" v-for="(item, index) in snake" :...
Vue中如何进行游戏开发与游戏引擎集成？
Java徐师兄的博客
06-16 5884
Vue.js是一款流行的JavaScript框架，它的MVVM模式和组件化开发思想非常适合构建Web应用程序。但是，如果我们想要开发Web游戏，Vue.js并不是最合适的选择。在本文中，我们将介绍如何在Vue.js中进行游戏开发，并集成一些流行的游戏引擎。
前端实现贪吃蛇小游戏！
03-08
通过Vue3仿照经典版贪吃蛇功能，食物随机位置，蛇可进行移动，吃到食物后身体变长一节，同时分数+1，分数每累积10分等级+1，等级越高蛇移动速度越快，蛇撞墙后或者撞击身体后游戏结束清零重新开始！下载资源后运行两...
用Vue开发小程序的框架
02-20
在尤大微博铺垫着“将会引入一些关于TypeScript的改进”一周之后，代号为LevelE的Vue.js2.5带着日漫风来到了我们眼前。从ReleaseNotes可以看到，Vue.js2.5有着更好的TypeScript...在2.4及更早版本中，我们通常使用全
使用vue框架开发SDK的包
01-03
1，使用的是vue+vite开发的SDK资源包 2，js写法
贪吃蛇2.0_html_vue贪吃蛇_vue项目贪吃蛇_贪吃蛇_vue小游戏demo_
09-29
这是一个用vue写的贪吃蛇小游戏，用于学习
小游戏2048（Vue版） 源码
10-25
在线体验： https://lblbc.cn/redirect/game_2048 2048游戏规则： 一共16个单元格，初始时由2或者4构成。 1、手指向一个方向滑动，所有格子会向那个方向运动。 2、相同数字的两个格子，相遇时数字会相加。 3、每次滑动时，空白处会随机出现一个数字。 4、当所有单元格都不可移动时，游戏结束；当界面中最大数字是2048时，游戏胜利。
用vue来实现炫酷贪吃蛇.zip
05-31
用vue来实现炫酷贪吃蛇.zip
基于Vue的经典扫雷游戏
08-08
基于Vue的经典扫雷游戏
Vue.js-小demo实现简单的游戏购物车table
GG_Zdd的博客
01-21 266
Vue.js-小demo实现简单的游戏购物车table 最近通过学习vue框架，基本熟悉了其中的动态绑定属性，计算属性，监听，条件判断，循环遍历，所以通过一个小demo来巩固一下。这个小demo主要是通过 通过动态绑定v-bind，计算属性computed，v-if和v-else的条件判断，v-for循环遍历的使用以及一个小的打印格式过滤器。 效果图： 整体效果是一个table，购物车嘛，最少就是1，所以我加了个disabled限制当数量为1时，禁止点击提交。代码的话分为三个部分，静态页H5，主体js，
记录一次用 Vue 简单完成小游戏:十滴水 (无动画)
iMingzhen的博客
04-29 1849
记录一次用 Vue 简单完成小游戏:十滴水（无动画） 前言1.游戏规则2.开发思路1.地图设计2.子弹发射事件3.水滴状态4.水滴溅射5.获胜条件3.源码3.1 Template 部分3.2 Script 部分3.3 Style 部分 前言 闲来无事，想起以前经常玩的一个小游戏《十滴水》，简单开发游戏逻辑，时间原因没编写动画和不同难度。 基于 Vue 开发,效果如下。 1.游戏规则 鼠标点击消耗子弹增大水滴，水滴饱和后再加水就会破裂，破裂后会向四方溅射水滴，引起一系列爆炸。 在这里用方块代替水滴，方块内部
VUE+Canvas 实现桌面弹球消砖块小游戏
denglouhen的博客
04-07 6162
大家都玩过弹球消砖块游戏，左右键控制最底端的一个小木板平移，接住掉落的小球，将球弹起后消除画面上方的一堆砖块。 那么用VUE+Canvas如何来实现呢？实现思路很简单，首先来拆分一下要画在画布上的内容： （1）用键盘左右按键控制平移的木板； （2）在画布内四处弹跳的小球； （3）固定在画面上方，并且被球碰撞后就消失的一堆砖块。 将上述三种对象，用requestAnimationFrame()函数平移运动起来，再结合各种碰撞检查，就可以得到最终的结果。 先看看最终的效果： 一、左右平移的木板
一起学Vue自定义组件之拼图小游戏
绳锯木断，水滴石穿，专心写文，无问西东！！！
08-24 1900
通过学习Vue自定义组件，可以开发一些小功能，自娱自乐，巩固学习的基础知识，本文以一个简单的拼图小游戏的例子，简述Vue自定义组件的开发，调用等基本流程，仅供学习分享使用，如有不足之处，还请指正。 涉及知识点 关于Vue组件的基础知识，前篇已有介绍，本例涉及知识点如下： 拼图游戏，只有相邻的元素才可以交换位置，那如何判断两个元素相邻，方法如下： 左右相邻：y轴坐标相同，x轴相减的绝对值等于一个元素的宽度。 上下相邻：x轴坐标相同，y轴相减的绝对值等于一个元素的高度。 如何判断拼图中的可以与
Vue2模拟贪吃蛇小游戏
qq_44930306的博客
06-04 732
本章借助vue和js模拟了贪吃蛇的原理，主要是移动和边界判断。
vue3贪吃蛇小游戏
03-23
Vue3贪吃蛇小游戏是一个基于Vue3框架开发的经典游戏。在这个游戏中，玩家需要控制一条蛇在一个有边界的区域内移动，并吃掉食物来增加长度。当蛇头碰到边界或者碰到自己的身体时，游戏结束。 在Vue3贪吃蛇小游戏中，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值