用Vue实现打地鼠!!!

最新推荐文章于 2024-10-04 00:46:18 发布
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量248 收藏 8
点赞数 4
文章标签： vue.js javascript 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80342078/article/details/141057670
版权

用Vue实现打地鼠!!!

一、目标实现效果：

  • 要求：

    • 难度选择，不同难度地鼠不一样大

    • 点中地鼠后，随机位置，地鼠位置不能超出游戏界面。

    • 游戏重新开始的按钮

    • 计时器功能，时间停止，弹窗得分情况。

在这里插入图片描述

二、分析实现

Vue讲求数据为王，我们只需要更改数据，dom操作Vue内部会帮助我们实现！

分析题目，我们可以把效果分为地鼠移动，难度选择，点击加分，重新开始，倒计时五个部分来实现

  1. 地鼠移动

    • 想要一个东西动态起来，实际上就是在一定时间内不断更改它的位置

      • 更改位置：position(数据)

      • 时间：定时器

    //数据position
new Vue({
        el: '#app',
        data() {
            return {
                //数据position
                // 位置初始值
                position: {
                    top: '0px',
                    left: '0px'
                },
                timerId:null
            }
        },
        //页面加载函数
        created() {
            // 速度和难度绑定，可以不用初始值
            this.autoChange();
        },
        // 函数区
        methods: {
            // 定时器更改位置(清除与再生)
            autoChange() {
                // 清除定时器
                clearInterval(this.timerId);
                this.timerId = setInterval()
            },
            // 改变位置(封装成一个函数，功能更加明显,可以复用)
            changePos() {
                // 随机生成位置，范围应该在0~(父级-自身)
                // 宽高必须固定
                const x = Math.random() * (1200 - size);
                const y = Math.random() * (600 - size);
                this.position = {
                    top: y + 'px',
                    left: x + 'px'
                }
            }
        }
    })

  2. 难度选择

    • 为了可以动态的增添难度选项，可以采用v-for的模式

    • 难度与地鼠的大小绑定（即不同的难度，地鼠的配置不同），可以把地鼠配置数据单独封装起来，可以不断添加想要的效果（例如不同的速度）

    • 地鼠难度与大小要设置初始值

    new Vue({
        el: '#app',
        data() {
            return {
                // 难度
                curLevel: 'easy',
                // 位置初始值
                position: {
                    top: '0px',
                    left: '0px'
                },
                // 大小初始值
                mouseSize: {
                    width: '80px',
                    height: '80px'
                },
                options: [
                    { label: "简单", value: 'easy' },
                    { label: "中等", value: 'middle' },
                    { label: "困难", value: 'hard' }
                ],
                // 把每个难度存起来(游戏配置)
                levelOpts: {
                    easy: {
                        size: 80,
                        speed: 2 * 1000
                    },
                    middle: {
                        size: 60,
                        speed: 1.5 * 1000
                    },
                    hard: {
                        size: 40,
                        speed: 1 * 1000
                    }
                }，
                timerId:null
            }
        },
        created() {
            // 速度和难度绑定，可以不用初始值
            this.autoChange(this.levelOpts[this.curLevel].speed);

        },
        // 函数区
        methods: {
            // 定时器更改位置(清除与再生)
            autoChange(speed) {
                // 清除定时器
                clearInterval(this.timerId);
                this.timerId = setInterval(this.changePos, speed)
            },
            // 改变位置(封装成一个函数，功能更加明显,可以复用)
            changePos() {
                const { size } = this.levelOpts[this.curLevel];

                // 随机生成位置，范围应该在0~(父级-自身)
                // 宽高必须固定
                const x = Math.random() * (1200 - size);
                const y = Math.random() * (600 - size);


                this.position = {
                    top: y + 'px',
                    left: x + 'px'
                }
            }，
            // 难度选择
            levelChange(e) {
                // e.target.value拿到选中值
                this.curLevel = e.target.value;
                // 解构赋值
                const { size, speed } = this.levelOpts[this.curLevel];

                this.mouseSize = {
                    width: size + 'px',
                    height: size + 'px'
                }
                //难度选择完后，要重启定时器
                this.autoChange(speed);
            }
        }
    })

    <select @change="levelChange">
   <option v-for="option in options" :key="option.value" :value="option.value">
            {{option.label}}
   </option>
</select>

  3. 点击加分

    给地鼠设置点击事件

    hit() {
        this.score++;
        // 点击后，马上更换位置!!
        this.changePos();
},

  4. 重新开始

    全部恢复初始设置

    // 重新开始
replay() {
// 重置数据
    this.curLevel = 'easy';
                
    // 解构赋值
    const { size, speed } = this.levelOpts[this.curLevel];

     this.mouseSize = {
           width: size + 'px',
            height: size + 'px'
      }

     this.autoChange(speed);
     this.countDown();
},

  5. 倒计时

     // 倒计时
            countDown() {
                this.score = 0;
                this.show = false;
                this.time = 6;

                clearInterval(this.timerCount);
                this.timerCount = setInterval(() => {
                    if (this.time == 0) {
                        clearInterval(this.timerCount);
                        this.show = true;
                    } else {
                        this.time--;
                    }
                }, 1000)
            }
三、完整代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./utils/vue.js"></script>
    <style>
        .container {
            width: 100%;
        }

        .container .content {
            width: 1200px;
            border: 1px solid black;
            margin: auto;
        }

        .container .content .game-panel {
            width: 100%;
            display: flex;
            justify-content: space-between;
            background-color: rgb(199, 197, 197);
            padding: 10px 20px;
            box-sizing: border-box;
        }

        .container .content .game-panel .right {
            display: flex;
            gap: 10px;
        }

        .container .content .game-panel .left {
            display: flex;
            gap: 10px;
        }

        .container .content .main {
            background-color: aqua;
            width: 100%;
            height: 600px;
            position: relative;
        }

        .container .content .main .mouse {
            background-color: red;
            position: absolute;

            top: 0;
            left: 0;

            width: 80px;
            height: 80px;
        }

        .container .alert {
            width: 200px;
            height: 100px;
            position: fixed;
            top: 200px;
            left: 50%;
            transform: translate(-50%);
            text-align: center;
            line-height: 100px;
            background-color: hwb(0 78% 21%);
            border: 1px solid hwb(0 78% 21%);
            box-shadow: 0px 0px 15px hwb(0 78% 21%);
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="content">
            <div class="game-panel">
                <div class="left">
                    <span>难度:</span>
                    <select @change="levelChange">
                        <option v-for="option in options" :key="option.value" :value="option.value">
                            {{option.label}}
                        </option>
                    </select>
                    <span>倒计时：{{time}}</span>
                </div>
                <div class="right">
                    <button @click="replay">重新开始</button>
                    <span>分数: {{score}}</span>
                </div>
            </div>
            <div class="main">
                <div class="mouse" :style="[position,mouseSize]" @click="hit"></div>
            </div>
        </div>
        <div class="alert" v-show="show==true">
            <div>你的得分为：{{score}}分</div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 分数
                score: 0,
                // 难度
                curLevel: 'easy',
                // 倒计时
                time: 6,
                // 位置初始值
                position: {
                    top: '0px',
                    left: '0px'
                },
                // 大小初始值
                mouseSize: {
                    width: '80px',
                    height: '80px'
                },
                options: [
                    { label: "简单", value: 'easy' },
                    { label: "中等", value: 'middle' },
                    { label: "困难", value: 'hard' }
                ],
                // 把每个难度存起来(游戏配置)
                levelOpts: {
                    easy: {
                        size: 80,
                        speed: 2 * 1000
                    },
                    middle: {
                        size: 60,
                        speed: 1.5 * 1000
                    },
                    hard: {
                        size: 40,
                        speed: 1 * 1000
                    }
                },
                timerId: null,
                timerCount: null,
                // 弹窗显示
                show: false
            }
        },
        created() {
            // 速度和难度绑定，可以不用初始值
            this.autoChange(this.levelOpts[this.curLevel].speed);

            this.countDown();
        },
        // 函数区
        methods: {
            // 定时器更改位置(清除与再生)
            autoChange(speed) {
                // 清除定时器
                clearInterval(this.timerId);
                this.timerId = setInterval(this.changePos, speed)
            },
            // 改变位置(封装成一个函数，功能更加明显,可以复用)
            changePos() {
                const { size } = this.levelOpts[this.curLevel];

                // 随机生成位置，范围应该在0~(父级-自身)
                // 宽高必须固定
                const x = Math.random() * (1200 - size);
                const y = Math.random() * (600 - size);


                this.position = {
                    top: y + 'px',
                    left: x + 'px'
                }
            },
            hit() {
                this.score++;
                // 点击后，马上更换位置
                this.changePos();
            },
            // 难度选择
            levelChange(e) {
                // e.target.value拿到选中值
                this.curLevel = e.target.value;
                // 解构赋值
                const { size, speed } = this.levelOpts[this.curLevel];

                this.mouseSize = {
                    width: size + 'px',
                    height: size + 'px'
                }
                this.autoChange(speed);
                this.countDown();
            },
            // 重新开始
            replay() {
                // 重置数据
                this.curLevel = 'easy';
                
                // 解构赋值
                const { size, speed } = this.levelOpts[this.curLevel];

                this.mouseSize = {
                    width: size + 'px',
                    height: size + 'px'
                }

                this.autoChange(speed);
                this.countDown();
            },
            // 倒计时
            countDown() {
                this.score = 0;
                this.show = false;
                this.time = 6;

                clearInterval(this.timerCount);
                this.timerCount = setInterval(() => {
                    if (this.time == 0) {
                        clearInterval(this.timerCount);
                        this.show = true;
                    } else {
                        this.time--;
                    }
                }, 1000)
            }
        }
    })
</script>

</html>
四、结尾

以上为简易版打地鼠游戏，通过拆分步骤，分别实现。大家有任何其他想法，欢迎讨论！！

前端ing学习
关注
基于vue实现简易打地鼠游戏
11-19
本文实例为大家分享了vue实现简易打地鼠游戏的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打地鼠简易版</title> [removed][removed] <style type="text/css"> *{margin: 0;padding: 0;} #main{border: 1px solid #000;} .ds{ float: left;border: 1px solid #000;box-sizing: borde
vue实现打地鼠小游戏
10-14
在本示例中，我们看到一个使用Vue.js框架开发的小游戏——打地鼠。这个小游戏的实现主要包括以下几个关键点： 1. **模板结构**：Vue组件的`<template>`部分定义了游戏界面的HTML结构。游戏包含一个标题、一个游戏...
vue实现九宫格打地鼠小游戏
qq_51098044的博客
12-31 4004
vue 实现的简单打地鼠游戏
vue3中关于打地鼠游戏逻辑实现
梅花时辰
05-23 474
打地鼠逻辑
python打地鼠代码_vue实现打地鼠小游戏
weixin_39865061的博客
12-08 194
本文实例为大家分享了vue实现打地鼠小游戏的具体代码，供大家参考，具体内容如下效果图如下：代码如下：打地鼠游戏{{n}}号地鼠设置参数速度： 总数：开始统计分数面板总数： {{TOTAL}}击中： {{clickNum}}击中率： {{level}}%export default {name: 'App',data () {return {clickFlag: true, // 单个地鼠只能点击一...
python打地鼠游戏教程_基于vue实现简易打地鼠游戏
weixin_39645249的博客
12-08 169
本文实例为大家分享了vue实现简易打地鼠游戏的具体代码，供大家参考，具体内容如下打地鼠简易版*{margin: 0;padding: 0;}#main{border: 1px solid #000;}.ds{ float: left;border: 1px solid #000;box-sizing: border-box;}.dd{background-color: #3E8F3E;}倒计时{{...
python打地鼠代码_基于vue实现简易打地鼠游戏
weixin_39819671的博客
12-12 256
本文实例为大家分享了vue实现简易打地鼠游戏的具体代码，供大家参考，具体内容如下打地鼠简易版*{margin: 0;padding: 0;}#main{border: 1px solid #000;}.ds{ float: left;border: 1px solid #000;box-sizing: border-box;}.dd{background-color: #3E8F3E;}倒计时{{...
砸地鼠 php源码,一起看看vue实现打地鼠小游戏
weixin_30527875的博客
03-23 214
【相关学习推荐：js视频教程】本文实例为大家分享了vue实现打地鼠小游戏的具体代码，供大家参考，具体内容如下效果图如下：代码如下：打地鼠游戏{{n}}号地鼠设置参数速度： 总数：开始统计分数面板总数： {{TOTAL}}击中： {{clickNum}}击中率： {{level}}%export default {name: 'App',data () {return {clickFlag: tru...
基于vue的简易版打地鼠
长城郭靖的专栏
06-01 777
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打地鼠简易版</title> <script src="js/vue.js"></script> <style type="text/css"> ...
打地鼠游戏源代码+素材
05-30
打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏源代码+素材打地鼠游戏...
使用vue uniapp制作一个打地鼠游戏
weixin_50606255的博客
06-01 1937
实现的效果如下，可在上方设置参数，可以设置地鼠出现的速度和总数； 可在代码中设置专属头像作为地鼠 代码如下，可直接复制： <template> <view class="game"> <view class="scoped"> <view class="set"> <uni-title type="h3" title="设置参数"></uni-title> <view class="setR
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 885
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1215
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 924
自定义指令
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 362
Vue根实例、实例总结
Vue实现简易打地鼠游戏示例与代码详解
本文将详细介绍如何使用Vue.js框架来实现一个简易的打地鼠游戏。作者通过提供具体的代码实例，帮助读者理解如何结合HTML、CSS和Vue的核心概念来构建这个互动游戏。以下是关键知识点的详细解析： 1. **Vue项目结构**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值