扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue实现飞机大战小游戏
  • 661

0
分享到

Vue实现飞机大战小游戏

2024-04-02 19:04:59 661人浏览 安东尼
摘要

目录使用 Vue 开发一个简略版的飞机大战小游戏一、实现思路二、所需知识点三、实现步骤使用 Vue 开发一个简略版的飞机大战小游戏 如题，假设你为了向更多访问你博客的人展示你的技术，

使用 Vue 开发一个简略版的飞机大战小游戏

如题，假设你为了向更多访问你博客的人展示你的技术，你决定小试身手开发一个飞机大战小游戏。
功能： 开始游戏前用户名必填，玩家可以发射子弹，敌军与行星随机出现，鼠标可操控玩家移动，敌军可发射子弹

一、实现思路

如题所述：

玩家可操控玩家飞机可发射子弹，敌军与行星随机生成；

这意味着我们需要一个单独的玩家飞机dom，以及敌军、行星与子弹 用 vue 循环生成的3个dom。

敌军与行星生成后的dom的位置由数据里的 x 与 y 值决定。

按下空格时产生的子弹由当时按下空格键的时候的飞机的位置来决定。

敌军随机发射的子弹由当时发射子弹的敌军的位置来决定。

游戏开始时用户名必填，那么我们只需要在 Vue 实例里为该 input 绑定一个数据，再为开始游戏按钮绑定点击事件。随后计算用户名的长度只要大于3，就调用游戏开始函数或初始化函数。

玩家鼠标操控移动飞机移动只需要为其父节点绑定鼠标移动事件，然后更改 player 里的 x 与 y 的数据 （x与y的值不能小于0，x与y的值不能大于父节点的宽高） 并且赋予 玩家飞机即可。

击毁敌军只需要拿 子弹与敌军 的 x,y 计算对比即可。

二、所需知识点

1. Vue 事件绑定
2. Vue 监听事件
3. Vue 计算属性
4. Vue Style操作

三、实现步骤

第一步：创建 html 与 CSS 文件

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 飞机大战</title>
        <link rel="stylesheet" href="css/style.css" >
    </head>
    <body>
        <main>
            -
            <div class="game-plane" 
                @mousemove="touchmove"
                :style="{backgroundPosition:'0px '+ positionY +'px'}" ref='plane'>
                
                <div id="hit">
                    <h2>击毁：{{ hitCount }}</h2>
                    <h2>与敌机相撞：{{ boom }}</h2>
                    <h2>被击中次数：{{ HitTimes }}</h2>
                    <h2>用户名：{{ username }}</h2>
                </div>
                
                <!-- 玩家 -->
                <img src="image/player.png" alt="player" id="p" :style="{top:p.y + 'px',left:p.x+'px'}">
                
                <!-- 星球 -->
                <img v-for="(item,index) of plane.arr" :style="{top:item.y + 'px',left:item.x+'px'}" src="image/plane.png" alt="plane">
                
                <!-- 敌军 -->
                <img v-for="(item,index) of e.arr" :style="{top:item.y + 'px',left:item.x+'px'}" src="image/e.png" class="e" alt="e">
                
                <!-- 子弹 -->
                <img v-for="(item,index) of bullets.arr" class="b"
                 :style="{top:item.y + 'px',left:item.x+'px'}" 
                 :src="item.tag == 'p' ? 'image/p_b.png' : 'image/e_b.png' " 
                 alt="p_b">
                
            </div>
        
            <!-- 开始面板 -->
            <div class="alert" ref="alert">
                <div class="content">
                    <div class="left">
                        <h1>Vue 飞机大战</h1>
                        <p>作者：柴不是柴</p>
                        <img :src="faceChange" class="face">
                    </div>
                    <div class="right">
                        <input type="text" v-model="username" placeholder="请输入你的名字">
                        <input type="submit" @click="startBtnClick"  value="开始游戏">
                    </div>
                </div>
            </div>
        </main>
        
        <script src="js/vue.js"></script>
        <script src="js/data.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #282828;
}

main .game-plane {
    position: relative;
    width: 1200px;
    max-width: 1200px;
    height: 900px;
    background-image: url(../image/background.png);
    background-size: 100% auto;
    box-shadow: 0 2px 30px rgba(255,255,255,0.5);
    overflow: hidden;
}

main .game-plane img { position: absolute; }

.alert {
    position: absolute;
    top: calc(50% - 100px);
    left: 0;
    width: 100%;
    height: 200px;
    background: #FFF;
    box-shadow: 0 0 0 999em rgba(0, 0, 0, 0.5);
}

.alert .content {
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-rows: 100%;
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    height: 100%;
}

.alert .content .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.alert .content .left * { margin: 5px 0; }

.alert .content .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.alert .content .right input {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 10px;
}

.e { transfORM: rotate(180deg); }

.b { width: 30px; }#hit {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #FFF;
}

第二步：创建一个全局 data 文件

window.el = document.querySelector(".game-plane");
window.data = {
    p : {// 玩家 Player
        w : document.querySelector("#p").offsetWidth,
        h : document.querySelector("#p").offsetHeight,
        x : el.offsetWidth / 2 - document.querySelector("#p").offsetWidth / 2,
        y : el.offsetHeight - document.querySelector("#p").offsetHeight
    },
    
    e : {// 敌机 enemy plane
        arr : [],
        speed : 6,
    },
    
    plane : { arr : [] },// 星球    
    bullets : { arr : [] },// 子弹
    hitCount : 0,// 击中总数
    boom : 0,// 碰撞次数
    HitTimes : 0,// 被击中次数
    start : false,// 游戏是否开始
    positionY : 0,// 背景 Y 值
    timers : [],// 定时器
    face : "ordinary",// 表情
    username : "" // 玩家名
}

第三步：创建Vue 实例

var Game = new Vue({
    el : "main",
    data,
    
    methods:{
        startBtnClick() {
            if ( this.username.length <= 2 ) return alert("用户名不可少于3位字符哦！");
            this.init();
        },
        
        init() {// 初始化
            let _this = this;
            this.start = true;
            this.$refs.alert.style.display = "none";
            
            this.createE();
            this.createPlane();
            this.timers.push( setInterval( this.bgMove,20 ) )
            this.timers.push( setInterval(function() { _this.move('bullets') }, 20 ) )
        },
        
        bgMove () { // 背景移动 顺带判断玩家是否装上敌军
            this.positionY += 5; 
            if ( this.hit_check(this.p) ) this.boom++;
        },
        
        touchmove(){// 飞机移动
            let touch,x,y;
            if ( !this.start ) return;
            
            if(event.touches) touch = event.touches[0];
            else touch = event;
            
            x = touch.clientX - this.$refs.plane.offsetLeft - this.p.w / 2;
            y = touch.clientY - this.$refs.plane.offsetTop - this.p.h / 2;
            
            y = y < 0 ? 0 : y > (this.$refs.plane.offsetHeight - this.p.h) ? this.$refs.plane.offsetHeight - this.p.h : y;
            x = x < 0 ? 0 : x > (this.$refs.plane.offsetWidth - this.p.w) ? this.$refs.plane.offsetWidth - this.p.w : x;
            
            this.p.x = x;
            this.p.y = y;
        },
        
        createE() { // 创建敌军
            let _this = this,x;
            
            this.timers.push( setInterval( function() {
                x = Math.ceil( Math.random() * ( _this.$refs.plane.offsetWidth - 80 ) );
                _this.build('e',{ x: x, y: 5 })     
            }, 1000 ));
            
            this.timers.push( setInterval( function() { _this.move('e') }, 20 ));
        },
        
        createPlane() {// 创建行星
            let _this = this,x;
            
            this.timers.push( setInterval( function() {
                x = Math.ceil( Math.random() * ( _this.$refs.plane.offsetWidth - 80 ) );
                _this.build('plane',{ x: x, y: 5 }) 
            }, 2000 ));
            
            this.timers.push( setInterval( function() { _this.move('plane') }, 20 ));
        },
        
        createButter(table,e) {// 创建子弹
            if ( !this.start ) return;
            
            let bullter = {
                x:(e.x + (e.w ? e.w : 30) / 2),
                y:e.y - (e.h ? e.h : -30),
                speed : table == "p" ? -6 : 10,
                tag : table
            };
            
            this.build('bullets',bullter);
        },
        
        build(table,data) {// 公共创建
            let _this = this;
            this[table].arr.push( data );
        },
        
        move(table) {// 公共移动
            for( let i = 0; i < this[table].arr.length; i ++ ){
                let e = this[table].arr[i],
                    math = Math.random() * 100,
                    speed = this[table].speed ? this[table].speed : 5;
                
                if ( table == 'bullets' ) speed = e.speed;
                
                e.y += speed;
              
                if ( table !== 'bullets' ) {// 如果不是子弹dom的移动
                    if( e.y > this.$refs.plane.offsetHeight - 55 ) this[table].arr.splice(i,1);
                    
                    if ( table == 'e' && math < 1 ) { this.createButter('e',e); }
                } else {
                    if ( e.tag == 'p' ) {
                        if ( this.hit_check(e) ) this[table].arr.splice(i,1);
                        else if ( e.y < 0 ) this[table].arr.splice(i,1);
                    } else {
                        if ( this.hit(e,this.p) ) {
                            this[table].arr.splice(i,1);
                            this.HitTimes++;
                        }
                        else if ( e.y > this.$refs.plane.offsetHeight - 30 ) this[table].arr.splice(i,1);
                    }
                }
            }
        },
        
        hit_check(b) {// 是否击毁敌军
            for( let i = 0; i < this.e.arr.length; i ++ ){
                if( this.hit(b,this.e.arr[i]) ){ 
                    this.e.arr.splice(i,1);
                    this.hitCount++;
                    return true;
                }
            }
        },
        
        hit(b,e) {// 碰撞
            let d = this.judgeHit( b.x, b.y, e.x, e.y );
            if( d < 35 ) return true;
        },
        
        judgeHit(x1, y1, x2, y2) {// 计算两个点的距离差
            let a = x1 - x2,
                b = y1 - y2,
                result = Math.sqrt( Math.pow( a, 2) + Math.pow( b, 2 ) );
            return Math.round( result );
        },
        
        pause() {// 暂停
            this.start = false;
            this.timers.forEach(element => { clearInterval(element); })
        }
    },
    
    watch: {
        username () {// 监听玩家输入事件
            if ( this.username.length > 2 ) this.face = "shy";
            else this.face = "ordinary";
        }
    },

    mounted(){
        let _this = this;
        document.onkeyup = function(e) {
            ( e.keyCode == 32 ) && _this.createButter("p",_this.p);
            // ( e.keyCode == 80 ) && _this.pause();
        }
    },
    
    computed:{ faceChange() { return "image/"+this.face + ".png"; } }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: Vue实现飞机大战小游戏

本文链接: https://lsjlt.com/news/148227.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue实现飞机大战小游戏
    目录使用 Vue 开发一个简略版的飞机大战小游戏一、实现思路二、所需知识点三、实现步骤使用 Vue 开发一个简略版的飞机大战小游戏 如题，假设你为了向更多访问你博客的人展示你的技术，...
    99+
    2024-04-02
  • javascript实现飞机大战小游戏
    本文实例为大家分享了javascript实现飞机大战游戏的具体代码，供大家参考，具体内容如下 文档结构如下 其中tool文件中只使用了随机数，audio中是存放的音乐文件，imag...
    99+
    2024-04-02
  • java实现飞机大战小游戏
    本文实例为大家分享了java实现飞机大战游戏的具体代码，供大家参考，具体内容如下 MyPanel类 package  P; import java.awt.Font; import...
    99+
    2024-04-02
  • 用JS实现飞机大战小游戏
    本文实例为大家分享了JS实现飞机大战小游戏的具体代码，供大家参考，具体内容如下 小的时候玩的飞机大战感觉还蛮神奇，今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var...
    99+
    2024-04-02
  • Python飞机大战小游戏
    游戏规则：键盘上下左右键控制飞机移动 游戏展示图片： 源码： 第一个py命名为：plane_main.py import pygamefrom plane_sprites import *class PlaneGame(object): ...
    99+
    2023-09-08
    python
  • 原生JS实现飞机大战小游戏
    本文实例为大家分享了JS实现飞机大战小游戏的具体代码，供大家参考，具体内容如下 <html> <head> <title> 飞机大战 &...
    99+
    2024-04-02
  • python实现简单飞机大战小游戏
    为了熟悉Python基础语法，学习了一个经典的案例：飞机大战，最后实现效果如下： 实现步骤： ①下载64位对应python版本的pygame：pygame-1.9.6-cp38-c...
    99+
    2024-04-02
  • javascript实现简单飞机大战小游戏
    本文实例为大家分享了javascript实现飞机大战小游戏的具体代码，供大家参考，具体内容如下 效果图 html文件 <!DOCTYPE html> <html ...
    99+
    2024-04-02
  • JavaScript实现前端飞机大战小游戏
    本文实例为大家分享了JavaScript实现前端飞机大战的具体代码，供大家参考，具体内容如下 html： <!DOCTYPE html> <html>    ...
    99+
    2024-04-02
  • C语言实现飞机大战小游戏
    本文实例为大家分享了C语言实现飞机大战小游戏的具体代码，供大家参考，具体内容如下 技术原型 1、void gotoxy(int x, int y) 函数，该函数可以使光标去到（x,y...
    99+
    2024-04-02
  • java如何实现飞机大战小游戏
    本篇内容介绍了“java如何实现飞机大战小游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！MyPanel类package &nb...
    99+
    2023-07-01
  • JavaScript实现飞机大战游戏
    本文实例为大家分享了canvas ，js 实现一个简单的飞机大战，供大家参考，具体内容如下 预览图： 代码： <!DOCTYPE html> <html>...
    99+
    2024-04-02
  • java实现飞机大战游戏
    java实现飞机大战，供大家参考，具体内容如下 用Java写个飞机大战游戏练习一下，实现可播放游戏背景音乐和游戏的基本功能 设计 1、准备好相应的图片和背景音乐（.wav文件）； 2...
    99+
    2024-04-02
  • jQuery实现飞机大战游戏
    目录一、效果图二、核心代码1.创建地图  2.用户选择飞机界面3.设置背景循环4.创建飞机5.创建敌机6.敌机移动7.设置敌机爆炸8.创建子弹9.检测子弹的移动（...
    99+
    2024-04-02
  • C++实现飞机大战游戏
    本文实例为大家分享了C++实现飞机大战游戏的具体代码，供大家参考，具体内容如下 代码是单线程执行，无界面，（博主下一步学习QT之后融入）还有待改进。先放张界面图： 话不多说 上...
    99+
    2024-04-02
  • Python实战小游戏飞机大战详解
    目录导语​正文一、环境安装二、我方飞机三、敌方飞机四、控制键盘移动五、检测子弹碰撞六、效果图总结导语 “看见别人都那么努力，那么勤奋，那么意气风发地走在成功的道路上，你问...
    99+
    2024-04-02
  • 怎么用Python实现小游戏飞机大战
    本篇内容介绍了“怎么用Python实现小游戏飞机大战”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、环境安装本文是写的游戏代码，基于Pyg...
    99+
    2023-06-25
  • js+css实现飞机大战游戏
    本文实例为大家分享了js+css实现飞机大战游戏的具体代码，供大家参考，具体内容如下 用js和css实现，css中定义样式，js中定义了具体的实现事件，例如碰撞、子弹、飞机等。 ma...
    99+
    2024-04-02
  • JavaScript实现微信飞机大战游戏
    本文实例为大家分享了JavaScript实现微信飞机大战游戏的具体代码，供大家参考，具体内容如下 html代码 <!DOCTYPE> <html> <h...
    99+
    2024-04-02
  • jquery+css+html实现飞机大战游戏
    本文实例为大家分享了jquery+css+html实现飞机大战游戏的具体代码，供大家参考，具体内容如下 本文运用html+css+jquery写了个飞机大战的游戏 分享下自己的思路：...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作