VUE+WebPack游戏开发：神庙逃亡的游戏设计

原创

wx64884c215f03d 2023-06-14 10:42:52 ©著作权

文章标签 vue-js WebPack 游戏开发加载 3d 文章分类 MySQL 数据库

©著作权归作者所有：来自51CTO博客作者wx64884c215f03d的原创作品，请联系作者获取转载授权，否则将追究法律责任

从本节开始，我们进入新游戏的设计开发，当前这个游戏将作为一个引子，引入几个非常重要的游戏开发概念的技巧。游戏的基本内容如下：

VUE+WebPack游戏开发：神庙逃亡的游戏设计_游戏开发

一个小人在一条快速跑道上奔跑，跑道上会随机出现一些障碍物，玩家通过控制小人的奔跑位置躲避障碍物，一旦小人碰到障碍物，游戏就结束了。本次游戏的设计内容不难，但引入的几个概念却非常重要，今后我们更复杂绚丽的游戏设计都需要依赖于本节引入的概念和技巧,在本游戏中需要引入的重要概念如下：
1，游戏主循环
2，视差背景滚动
3，碰撞检测
4，精灵动画

话不多说，我们即刻开启相关代码的开发，按照流程，我们先完成基本代码的编写，在本地目录根据前几节的办法创建一个新的VUE+WebPack项目，把新生成的项目代码更名为SpaceRuner,进入根目录，打开index.html将里面内容修改成如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Space Runner</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

接着进入src目录，打开App.vue，将其中的template和script两部分代码改成如下所示：

<template>
  <div id="app">
    <game-container></game-container>
  </div>
</template>

<script>
import GameContainer from './components/gamecontainer'
export default {
  components: {
    GameContainer
  },
  name: 'app'
}
</script>

这些修改的原理在以前章节曾经详细讲解过，这里不再讲述。接着继续进入到components目录，在该目录下新建一个文件名为gamecontainer.vue，这个文件将用来开发根组件，这个根组件将用来容纳我们后续开发的各类游戏组件。在新建的gamecontainer.vue里，我们添加如下内容：

<template>
<div class="container">
  <header>
    <div class="row">
      <h1>Space Runner!</h1>
    </div>
  </header>

  <section id="game" class="row">
    <start-scene class="scene"></start-scene>
    <game-over-scene class="scene"></game-over-scene>
  </section>
</div>
</template>

<script>
  import StartScene from './startscenecomponent'
  import GameOverScene from './gameoverscenecomponent'
  export default {
    components: {
      StartScene,
      GameOverScene
    }
  }
</script>

<style scoped>
  .container {
    margin: 0;
    padding: 0;
    color: #2e3b3d;
    background: #a3d7df;
  }

  * {
    box-sizing: border-box;
  }

  p {
    margin: 0;
    padding: 1em 0;
  }

  #game {
    width: 480px;
    height: 600px;
    margin: 0 auto;
    border-radius: 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .row {
    width: 480px;
    margin: 0 auto;
  }

  .scene {
    background: #f9f9f9;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    border-radius: 8px;
    -webkit-transition: all .3s ease-out;
  }

  .scene.out {
    transform: translate3d(100%, 0, 0);
  }

  .scene.in {
    transform: translate3d(0, 0, 0);
  }

  .hidden {
    display: none;
  }

</style>

该组件里加载了两个组件，他们分别是start-scene 和 game-over-scene，这两个组件我们还没开发，接下来要做的就是开发这两个组件，在本地目录下新建一个文件，名为gamescenecomponent.vue,然后在该文件中添加如下代码：

<template>
  <div id="game-scene"  :class="{'scene in' : show,
                                'scene out': !show}">
    <a href="#" id="start-btn" class="button"></a>
  </div>
</template>

<script>
  import Constant from './Constant'
  export default {
    data () {
      return {
        show: true
      }
    },

    mounted () {
      console.log('start scene mounted')
      setTimeout(function () {
        console.log('time out')
        this.show = false
        Constant.Event.$emit(Constant.MSG_SHOW_GAMEOVER_SCENE)
      }.bind(this), 3000)

      Constant.Event.$on(Constant.MSG_SHOW_START_SCENE, function () {
        this.show = true
      }.bind(this))
    }
  }
</script>

<style scoped>
 .button {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
</style>

start-scene 组件当前的逻辑很简单，它被加载后,mounted() 接口被浏览器调用，在里面它启动了一个三秒时常的定时器，一旦时间到达后，他把组件内部变量设置成false,这样组件的内容就不会在页面上显示出来了，接着通过Vue对象接口$emit向系统内广播一个消息，通过该消息的发送激活另一个组件，也就是激活game-over-scene组件，我们看看该组件的实现，在本地目录下新建一个文件gameoverscenecomponent.vue，打开该文件，添加如下代码：

<template>
  <div id="gameover-scene" :class="{'scene in' : show,
                                   'scene out': !show}">
    <p><a href="#" id="back-to-menu-button" class="button" @click="backToStartScene()"></a></p>
  </div>
</template>

<script>
  import Constant from './Constant'
  export default {
    data () {
      return {
        show: false
      }
    },

    mounted () {
      Constant.Event.$on(Constant.MSG_SHOW_GAMEOVER_SCENE, function () {
        this.show = true
      }.bind(this))
    },

    methods: {
      backToStartScene () {
        console.log('back to start scene')
        this.show = false
        Constant.Event.$emit(Constant.MSG_SHOW_START_SCENE)
      }
    }
  }
</script>

<style scoped>
.button {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#gameover-scene {
    background: rgba(0, 0, 0, .5) url(../../static/images/gameover.png);
}
</style>

该组件加载时，它的mounted()接口会被调用，在里面它监听MSG_SHOW_GAMEOVER_SCENE消息，一旦受到该消息后，他把自身的show变量设置成true,这样该组件就能在页面上显示出来了。game-over-scene组件包含一个超链接元素，我们通过VUE将函数backToStartScene与该元素的点击事件关联起来，一旦用户在页面上点击后，相应函数便会执行。在backToStartScene里，组件把自身的show变量设置成false,于是组件的内容就不会在页面上显示，同时发送出MSG_SHOW_START_SCENE消息，该消息会被start-scene组件接收，start-scene组件接收到这个消息后，它就会把自己的界面在页面中显示出来。

最后我们再添加Constant组件的相关实现，在本地目录下新建一个文件名为Constant.vue，打开该文件，添加如下内容：

<template>
</template>

<script>
  import Vue from 'vue'
  export default {
    Event: new Vue(),
    MSG_SHOW_START_SCENE: 'msg-show-start-scene',
    MSG_SHOW_GAMEOVER_SCENE: 'msg-show-gameover-scene'
  }
</script>

<style scoped>
</style>

完成上面代码后，在项目的根目录下运行命令npm run dev，相关代码就会被浏览器加载，代码运行后初始界面如下：

VUE+WebPack游戏开发：神庙逃亡的游戏设计_vue-js_02