尝试用Vue.js开发网页小游戏的过程
2021-03-18 19:25
YPE html>
标签：就会 methods || container enter func meta pow current
准备
首先去官方下载并安装VSCODE，下载地址 https://code.visualstudio.com/。安装后打开会发现是英文版的，需要去安装插件来汉化。具体是在扩展插件搜索chinese，选择第一个安装然后重启软件，这样打开就是中文界面了。
网页
去这个网站 https://getbootstrap.com/docs/4.4/examples/album/ 将源代码Copy下来，然后打开VSCODE选择项目文件夹
在你的项目目录新建个src文件夹用来存放源代码，并在src下新建个index.html文件，将复制的代码拷贝进去
如果想要实时看到页面可以在扩展插件中安装个live server作为本地服务器
安装后在回到项目文件夹里的index.html文件，右键选择Open with live server就可以查看了，但是你会发现样式乱了这时候需要去修改一下代码，将代码第15行修改成下面的样子
保存后再次打开网页就好了
但是你会发现导航按钮好像不能使用这是因为没用正确的引用js，还需要修改一下代码。替换
前面的三个标签，替换代码如下：
这样保存之后导航菜单就可以使用了。接下来新建一个img文件夹在src目录，并放入这张图片
再新建一个style.css样式文件在src目录，填入如下内容
#dog, #fox{
position: absolute;
font-size: xx-large;
}
#forest{
background-image: url("./img/forest.jpg");
height: 160px;
}
span.arrow-key {
font-size: xx-large;
cursor: pointer
}
开始
现在正式开始进入Vue开发，这是Vue的开发文档 https://cn.vuejs.org/v2/guide/。在index.html的前面添加
代码中custom.js文件需要在项目中自己建一个，接下来替换 在 顺便把这里修改下 文件 保存后预览就会发现狗狗动起来了。接下来实现按键的功能，将操作说明的内容改为 操作说明： 点击
?
?
?
? 控制狗狗方向 然后将 保存后就会发现可以通过键盘或者点击图标来控制狗狗移动了。接下来要在森林中添加狐狸，在狗狗图标下添加 并且添加动画样式文件 在 可以看到动画其效果了。那么继续接下来就是如何抓捕狐狸，我们需要在 保存刷新一下界面，可以看到当狗狗碰到狐狸的时候会被捕获成功监听器捕获到。接下来开发再来一次功能，把 然后是 然后开发记录抓捕时间功能，下面我直接贴出完整的 index.html 这是一个由Vue.js开发的游戏小案例。课程链接 https://www.bilibili.com/video/BV1V7411R7dP?p=5 访问我的博客 操作说明： 点击 ? ? ? ? 控制狗狗方向 ??
抓捕时间：{{ dog.抓捕时间 }}
custom.js内容如下var app = new Vue({
el: ‘#app‘,
data: {
forest: {
width: $(‘#forest‘)[0].offsetWidth,
height: $(‘#forest‘)[0].offsetHeight
},
dog: {
width: $(‘#dog‘)[0].offsetWidth,
height: $(‘#dog‘)[0].offsetHeight,
x: 0,
y: 0,
step: {
x: 10,
y: 2
},
抓捕时间: 0
}
},
methods: {
move_dog(){
this.dog.x += this.dog.step.x
this.dog.y += this.dog.step.y
this.dog.抓捕时间 = Math.round((this.dog.抓捕时间 + 0.1) * 10) / 10
}
},
mounted: function(){
this.timer1 = setInterval(this.move_dog, 100)
},
watch: {
‘dog.x‘: function(){
let x = this.dog.x
let w = this.forest.width
if(x = (w - this.dog.width)){
this.dog.step.x = - this.dog.step.x
}
},
‘dog.y‘: function(){
let y = this.dog.y
let h = this.forest.height
if(y = (h - this.dog.height)){
this.dog.step.y = - this.dog.step.y
}
}
}
})
js的内容改成var app = new Vue({
...
methods: {
...
change_dog_direct(k) {
if (k === 37 && this.dog.step.x > 0 || k === 39 && this.dog.step.x 0 || k === 40 && this.dog.step.y ??
js文件定义狐狸对象，并且让狐狸随机移动且“得瑟起来”var app = new Vue({
...
data: {
...
fox: {
width: $(‘#fox‘)[0].offsetWidth,
height: $(‘#fox‘)[0].offsetHeight,
x: 0,
y: 100,
class: ‘‘
},
},
methods: {
...
random_fox() {
this.fox.x = Math.ceil(Math.random() * this.forest.width / 2)
this.fox.y = Math.ceil(Math.random() * (this.forest.height - this.fox.height))
this.fox.class = this.fox.class ? ‘‘: ‘animated jello‘
},
},
mounted: function(){
this.timer1 = setInterval(this.move_dog, 100)
this.timer2 = setInterval(this.random_fox, 1000)
window.addEventListener(‘keyup‘, this.change_dog_direct_keyboard)
},
...
})
js文件中添加功能var app = new Vue({
...
data: {
...
dog: {
...
与狐狸的距离: 999,
抓捕成功: false,
class: ‘‘
},
...
},
methods: {
move_dog(){
if (this.dog.抓捕成功) return
...
this.dog.与狐狸的距离 = getDistanceBetweenTwoPoints(
this.dog.x,
this.dog.y,
this.fox.x,
this.fox.y
)
},
...
bounce_dog() {
if (this.dog.抓捕成功) {
this.dog.class = this.dog.class ? ‘‘ : ‘animated bounce‘
}
},
...
random_fox() {
if (this.dog.抓捕成功) return
...
},
},
mounted: function(){
this.timer1 = setInterval(this.move_dog, 100)
this.timer2 = setInterval(this.random_fox, 1000)
this.timer3 = setInterval(this.bounce_dog, 2000);
window.addEventListener(‘keyup‘, this.change_dog_direct_keyboard)
},
watch: {
...
‘dog.与狐狸的距离‘: function(val) {
let min_d = this.dog.width / 2 + this.fox.width / 2
if(val html代码中的再来一次按钮修改成
js文件需要为再来一次添加功能var app = new Vue({
...
data: {
...
btn_play_again: {
class: ‘‘
}
},
methods: {
...
bounce_dog() {
if (this.dog.抓捕成功) {
this.dog.class = this.dog.class ? ‘‘ : ‘animated bounce‘
this.btn_play_again.class = this.btn_play_again.class ? ‘‘ : ‘animated swing delay-1s‘
}
},
...
play_again() {
if (!this.dog.抓捕成功) return
this.dog.抓捕成功 = false
this.dog.抓捕时间 = 0
this.fox.x = 0
this.fox.y = 100
}
},
...
})
...
js代码和html代码
通过游戏学编程
No.
抓捕时间（秒）
{{index+1}}
{{seconds}}
平均时间：
{{dog.平均抓捕时间}}
custom.js
var app = new Vue({
el: ‘#app‘,
data: {
forest: {
width: $(‘#forest‘)[0].offsetWidth,
height: $(‘#forest‘)[0].offsetHeight
},
dog: {
width: $(‘#dog‘)[0].offsetWidth,
height: $(‘#dog‘)[0].offsetHeight,
x: 0,
y: 0,
step: {
x: 10,
y: 2
},
抓捕时间: 0,
与狐狸的距离: 999,
抓捕成功: false,
class: ‘‘,
平均抓捕时间: 0,
logs: []
},
fox: {
width: $(‘#fox‘)[0].offsetWidth,
height: $(‘#fox‘)[0].offsetHeight,
x: 0,
y: 100,
class: ‘‘
},
btn_play_again: {
class: ‘‘
}
},
methods: {
move_dog(){
if (this.dog.抓捕成功) return
this.dog.x += this.dog.step.x
this.dog.y += this.dog.step.y
this.dog.抓捕时间 = Math.round((this.dog.抓捕时间 + 0.1) * 10) / 10
this.dog.与狐狸的距离 = getDistanceBetweenTwoPoints(
this.dog.x,
this.dog.y,
this.fox.x,
this.fox.y
)
},
change_dog_direct(k) {
if (k === 37 && this.dog.step.x > 0 || k === 39 && this.dog.step.x 0 || k === 40 && this.dog.step.y = (w - this.dog.width)){
this.dog.step.x = - this.dog.step.x
}
},
‘dog.y‘: function(){
let y = this.dog.y
let h = this.forest.height
if(y = (h - this.dog.height)){
this.dog.step.y = - this.dog.step.y
}
},
‘dog.与狐狸的距离‘: function(val) {
let min_d = this.dog.width / 2 + this.fox.width / 2
if(val 这样一来这个小游戏就开发完成了！
预览
如果想要预览该项目可以在 https://www.meitubk.com/my/demo1/ 此链接访问。
本文章是根据 https://www.bilibili.com/video/BV1V7411R7dP?p=10 教程所记录的笔记。
尝试用Vue.js开发网页小游戏的过程
标签：就会 methods || container enter func meta pow current
原文地址：https://www.cnblogs.com/meitubk/p/12766695.html