尝试用Vue.js开发网页小游戏的过程

2021-03-18 19:25

阅读：501

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文件需要在项目中自己建一个，接下来替换

为
 

在
...
添加如下内容
??

顺便把这里修改下
抓捕时间：{{ 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代码
index.html






?? Dog & ?? Fox - 美图博客







 
     
      
       
       故事 
       通常，人们认为，狗狗是我们人类的朋友，而狐狸则相反，它代表着奸诈,狡猾，人们都想除掉它，让美丽的森林恢复宁静 ... 于是人们派出了狗狗，开始了一场铲除邪恶的战斗 ... 
       
      
     
    
    
     
      
      ?? Dog & ?? Fox  
      
     
    
  
 
     通过游戏学编程 
     这是一个由Vue.js开发的游戏小案例。课程链接 https://www.bilibili.com/video/BV1V7411R7dP?p=5 
      访问我的博客 
     
   
 
     
      
       
        
         
         ?? 
         ?? 
         
         
          操作说明： 点击 ? ? ? ? 控制狗狗方向  
          
           
            
           
          抓捕时间：{{ dog.抓捕时间 }} 
          
         
        
       
      
      
       
       

No. 
          抓捕时间（秒） 
         

{{index+1}} 
          {{seconds}} 
         

平均时间： 
          {{dog.平均抓捕时间}} 
         

 
      
     
    
  
 
     ?  
    祝您玩得愉快。 
    www.meitubk.com

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

上一篇：[Asp.Net Core] 关于 Blazor Server Side 的一些杂项, 感想

下一篇：浅析 CSS 中的边距重叠

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：尝试用Vue.js开发网页小游戏的过程
文章链接：http://soscw.com/index.php/essay/65908.html

亲，登录后才可以留言！

尝试用Vue.js开发网页小游戏的过程

准备

网页

开始

故事

通过游戏学编程

预览

评论

热门文章

推荐文章

最新文章

置顶文章