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

如题，假设你为了向更多访问你博客的人展示你的技术，你决定小试身手开发一个飞机大战小游戏。

功能：开始游戏前用户名必填，玩家可以发射子弹，敌军与行星随机出现，鼠标可操控玩家移动，敌军可发射子弹

一、实现思路

如题所述：

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

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

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

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

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

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

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

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

二、所需知识点

Vue 事件绑定
Vue 监听事件
Vue 计算属性
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="data: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="data:image/plane.png" alt="plane"><!-- 敌军 --><img v-for="(item,index) of e.arr" :style="{top:item.y + 'px',left:item.x+'px'}" src="data: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 : {// 玩家 Playerw : 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 planearr : [],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"; } }
});

最后这里附上成品包，如果有别的功能想要实现只要在这个基础上改一下就好

Vue 开发一个简略版的飞机大战小游戏相关推荐

使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序二.页面实现三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...
点击list view中一行内容可以在combox中显示_java版飞机大战小游戏详细教程（零基础小白也可以分分钟学会！）...
一:游戏展示飞机大战小游戏我们都玩过,通过移动飞机来打敌机,这里给大家展示一下游戏成果:呜呜呜由于gif只能上传5M大小,所以就不能给大家展示操作了,如果大家有兴趣可以自己自己做出来再玩哟. 这里面 ...
matlab飞机大战小游戏（第二版）
第一版链接:https://blog.csdn.net/slandarer/article/details/88025006 游戏截图: ------------------------ 游戏动图: ...
proj Java_proj 一个炫酷的飞机大战java游戏,很好玩的，很酷炫用了的图形界面 Games 256万源代码下载- www.pudn.com...
文件名称: proj下载收藏√ [ 5 4 3 2 1 ] 所属分类: Games 开发工具: Java 文件大小: 3435 KB 上传时间: 2016-05-11 下载次数: 0 提 ...
html+javascript实现的网页版飞机大战小游戏源码
html+javascript实现的网页版飞机大战小游戏源码完整代码下载地址: html+javascript实现的网页版飞机大战小游戏源码 index.html <!DOCTYPE html ...
华为官方解析开源鸿蒙 OpenHarmony 3.1关键特性画布，教你如何完成飞机大战小游戏
华为技术有限公司的江英杰为大家揭晓了关于开源鸿蒙 OpenHarmony 3.1 Beta 版中的一个关键特性,也就是 ArkUI 开发框架中的 canvas 画布. 据介绍,canvas 是 Ark ...
飞机大战小游戏(超详细)
偷学Python之最后的项目二:飞机大战小游戏(超详细) 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼甜甜先说这次用Python中的pygame模块来完成一个飞机大战的小游戏:基本思 ...
C语言—飞机大战小游戏
哈工大经典C语言大作业-飞机大战小游戏,源码如下,已经通过编译获得评分19+ (满分20)当时还是太菜了呜呜呜. 可以给大家参考一下,好像本来是加了音乐的,但是你们可能没有对应的音乐MP3文件,所以如 ...
基于Java语言在窗体上实现飞机大战小游戏
全套资料下载地址:https://download.csdn.net/download/sheziqiong/85594271 项目介绍飞机大战:用 Java 语言在窗体上实现飞机大战小游戏,运行程 ...

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

文章目录

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

一、实现思路

二、所需知识点

三、实现步骤

Vue 开发一个简略版的飞机大战小游戏相关推荐

最新文章

热门文章