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

Posted meitubk

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了尝试用Vue.js开发网页小游戏的过程相关的知识，希望对你有一定的参考价值。

准备

首先去官方下载并安装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行修改成下面的样子

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

保存后再次打开网页就好了

技术图片
但是你会发现导航按钮好像不能使用这是因为没用正确的引用js，还需要修改一下代码。替换</body>前面的三个<script>标签，替换代码如下：

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

这样保存之后导航菜单就可以使用了。接下来新建一个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的</body>前面添加

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="custom.js"></script>

代码中custom.js文件需要在项目中自己建一个，接下来替换<div class="album py-5 bg-light">为

<div class="album py-5 bg-light" id="app">

在<div id="forest">...</div>添加如下内容

<span id="dog" :style="{left: dog.x + ‘px‘, top: dog.y + ‘px‘}">??</span>

顺便把这里修改下

<small class="text-muted">抓捕时间：{{ dog.抓捕时间 }}</small>

文件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 <= 0 || 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 <= 0 || y >= (h - this.dog.height)){
                this.dog.step.y = - this.dog.step.y
            }
        }
    }
})

保存后预览就会发现狗狗动起来了。接下来实现按键的功能，将操作说明的内容改为

<p class="card-text"> 操作说明： 点击
<span class="arrow-key" @click="change_dog_direct(37)">?</span>
<span class="arrow-key" @click="change_dog_direct(39)">?</span>
<span class="arrow-key" @click="change_dog_direct(38)">?</span>
<span class="arrow-key" @click="change_dog_direct(40)">?</span> 控制狗狗方向 </p>

然后将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) {
                this.dog.step.x = -this.dog.step.x
            }
            if (k === 38 && this.dog.step.y > 0 || k === 40 && this.dog.step.y < 0) {
                this.dog.step.y = -this.dog.step.y
            }
        },
        change_dog_direct_keyboard(event) {
            this.change_dog_direct(event.keyCode)
        }
    },
    mounted: function(){
        ...
        window.addEventListener(‘keyup‘, this.change_dog_direct_keyboard)
    },
    ...
})

保存后就会发现可以通过键盘或者点击图标来控制狗狗移动了。接下来要在森林中添加狐狸，在狗狗图标下添加

<span id="fox" :class="fox.class" :style="{ left: fox.x + ‘px‘, top: fox.y + ‘px‘}">??</span>

并且添加动画样式文件

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">

在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 < min_d){
                this.dog.抓捕成功 = true
            }
        },
        ‘dog.抓捕成功‘: function(val) {
            if (val) {
                this.fox.class = ‘animated rotateOut delay-2s‘
            } else {
                this.fox.class = ‘‘
                this.dog.class = ‘‘
            }
        }
    }
})

//计算平面中两点距离
function getDistanceBetweenTwoPoints(x1, y1, x2, y2) {
    var a = x1 - x2;
    var b = y1 - y2;

    // c^2 = a^2 + b^2
    // a^2 = Math.pow(a, 2)
    // b^2 = Math.pow(b, 2)
    var result = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    return Math.round(result);
}

保存刷新一下界面，可以看到当狗狗碰到狐狸的时候会被捕获成功监听器捕获到。接下来开发再来一次功能，把html代码中的再来一次按钮修改成

<button type="button" :class="btn_play_again.class" @click="play_again" class="btn btn-sm btn-outline-secondary">
	<span v-if=" !dog.抓捕成功 ">正在抓捕 。。。</span>
	<span v-if=" dog.抓捕成功 "> 抓捕成功！再来一次</span>
</button>

然后是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

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 
  <meta name="description" content="" /> 
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors" /> 
  <meta name="generator" content="Jekyll v3.8.6" /> 
  <title>?? Dog & ?? Fox - 美图博客</title>
  <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/album/" /> 
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet" /> 
  <!-- Bootstrap core CSS --> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> 
  <!-- Favicons --> 
  <meta name="theme-color" content="#563d7c" /> 
  <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style> 
  <!-- Custom styles for this template --> 
  <link href="style.css" rel="stylesheet" /> 
 </head> 
 <body> 
  <header> 
   <div class="collapse bg-dark" id="navbarHeader"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-8 col-md-7 py-4"> 
       <h4 class="text-white">故事</h4> 
       <p class="text-muted">通常，人们认为，狗狗是我们人类的朋友，而狐狸则相反，它代表着奸诈,狡猾，人们都想除掉它，让美丽的森林恢复宁静 ... 于是人们派出了狗狗，开始了一场铲除邪恶的战斗 ...</p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <div class="navbar navbar-dark bg-dark shadow-sm"> 
    <div class="container d-flex justify-content-between"> 
     <a href="#" class="navbar-brand d-flex align-items-center"> 
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewbox="0 0 24 24" focusable="false"> 
       <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" /> 
       <circle cx="12" cy="13" r="4" /> 
      </svg> <strong>?? Dog & ?? Fox</strong> </a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> 
    </div> 
   </div> 
  </header> 
  <main role="main"> 
   <section class="jumbotron text-center"> 
    <div class="container"> 
     <h1>通过游戏学编程</h1> 
     <p class="lead text-muted">这是一个由Vue.js开发的游戏小案例。课程链接 https://www.bilibili.com/video/BV1V7411R7dP?p=5</p> 
     <p> <a href="https://www.meitubk.com/" class="btn btn-primary my-2">访问我的博客</a></p> 
    </div> 
   </section> 
   <div class="album py-5 bg-light" id="app"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="card mb-4 shadow-sm"> 
        <div id="forest"> 
         <span id="dog" :class="dog.class" :style="{left: dog.x + ‘px‘, top: dog.y + ‘px‘}">??</span> 
         <span id="fox" :class="fox.class" :style="{left: fox.x + ‘px‘, top: fox.y + ‘px‘}">??</span> 
        </div> 
        <div class="card-body"> 
         <p class="card-text"> 操作说明： 点击 <span class="arrow-key" @click="change_dog_direct(37)">?</span> <span class="arrow-key" @click="change_dog_direct(39)">?</span> <span class="arrow-key" @click="change_dog_direct(38)">?</span> <span class="arrow-key" @click="change_dog_direct(40)">?</span> 控制狗狗方向 </p> 
         <div class="d-flex justify-content-between align-items-center"> 
          <div class="btn-group"> 
           <button type="button" :class="btn_play_again.class" @click="play_again" class="btn btn-sm btn-outline-secondary"> <span v-if=" !dog.抓捕成功 ">正在抓捕 。。。</span> <span v-if=" dog.抓捕成功 "> 抓捕成功！再来一次</span> </button> 
          </div> 
          <small class="text-muted">抓捕时间：{{ dog.抓捕时间 }}</small> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <table class="table table-striped"> 
        <thead> 
         <tr> 
          <th>No.</th> 
          <th>抓捕时间（秒）</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr v-for="(seconds, index) of dog.logs"> 
          <td>{{index+1}}</td> 
          <td>{{seconds}}</td> 
         </tr> 
        </tbody> 
        <tfoot> 
         <tr> 
          <td>平均时间：</td> 
          <td>{{dog.平均抓捕时间}}</td> 
         </tr> 
        </tfoot> 
       </table> 
      </div> 
     </div> 
    </div> 
   </div> 
  </main> 
  <footer class="text-muted"> 
   <div class="container py-4"> 
    <p class="float-right"> <a href="#">?</a> </p> 
    <p>祝您玩得愉快。</p> 
    <p>www.meitubk.com</p> 
   </div> 
  </footer> 
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
  <script src="custom.js"></script>  
 </body>
</html>

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) {
                this.dog.step.x = -this.dog.step.x
            }
            if (k === 38 && this.dog.step.y > 0 || k === 40 && this.dog.step.y < 0) {
                this.dog.step.y = -this.dog.step.y
            }
        },
        change_dog_direct_keyboard(event) {
            this.change_dog_direct(event.keyCode)
        },

        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‘
            }
        },

        random_fox() {
            if (this.dog.抓捕成功) return

            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‘
        },

        play_again() {
            if (!this.dog.抓捕成功) return

            this.dog.抓捕成功 = false
            this.dog.抓捕时间 = 0
            this.fox.x = 0
            this.fox.y = 100
        }
    },
    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.x‘: function(){
            let x = this.dog.x
            let w = this.forest.width
            if(x <= 0 || 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 <= 0 || 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 < min_d){
                this.dog.抓捕成功 = true
                this.dog.logs.push(this.dog.抓捕时间)
            }
        },
        ‘dog.抓捕成功‘: function(val) {
            if (val) {
                this.fox.class = ‘animated rotateOut delay-2s‘
            } else {
                this.fox.class = ‘‘
                this.dog.class = ‘‘
            }
        },
        ‘dog.logs‘: function(val) {
            let sum = 0
            for (s of val) sum += s
            this.dog.平均抓捕时间 = Math.round(sum / val.length * 100) / 100
        }
    }
})

//计算平面中两点距离
function getDistanceBetweenTwoPoints(x1, y1, x2, y2) {
    var a = x1 - x2;
    var b = y1 - y2;

    // c^2 = a^2 + b^2
    // a^2 = Math.pow(a, 2)
    // b^2 = Math.pow(b, 2)
    var result = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    return Math.round(result);
}

这样一来这个小游戏就开发完成了！

预览

如果想要预览该项目可以在 https://www.meitubk.com/my/demo1/ 此链接访问。

本文章是根据 https://www.bilibili.com/video/BV1V7411R7dP?p=10 教程所记录的笔记。

以上是关于尝试用Vue.js开发网页小游戏的过程的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序代码片段

Vue.js 中的片段

认识vue

基于Boostrap和Vue设计网页

使用带有渲染功能的 Vue.js 3 片段

结对-网页贪吃蛇项目-开发过程