VUE+WebPack实现精美Html5游戏设计：cardBattle的启动场景设计

更详细的讲解和代码调试演示过程，请点击链接

上一节，我们介绍了纸牌战争游戏的基本内容，本节我们进入游戏的具体设计和实现阶段。整个游戏分为三个场景，分别是启动场景，游戏场景，和结束场景。启动场景就是游戏正式开始前，页面显示给用户的启动界面，我们先看看这个启动界面是如何实现的。

首先进入代码目录src/components,在里面生成一个新文件名为gamecontainer.vue, 一个.vue文件对应一个组件，一个组件一般来说需要实现三部分功能，这三部分功能对应着MVC设计模式，也就是说一个组件要含有视图功能，也就是组件如何绘制用户界面，组件要含有自有数据，组件的视图由于展示组件的自有数据，用户通关视图展现的图形界面可以更改组件的自有数据，组件还要含有连接前端视图和底部数据的业务逻辑，当视图需要显示组件内部数据时，它会向业务逻辑模块发出请求，逻辑模块把数据取出，进行加工后再提交给视图模块，当用户通关视图模块从界面上修改数据后，逻辑模块从视图拿到被修改后的数据，经过加工后再对组件的内部数据进行相应的修改。

基于上面的理论，我们先看gamecontainer组件的视图模块如何实现，打开gamecontainer.vue文件，添加如下代码：

<template>
 <div>
  <header>
    <div class="row">
      <h1>Card Battle!h1>
      <section id="game" class="row">
        <start-scene>start-scene>
      section>
    div>
  header>
  <section class='how-to-play'>
    <h2>玩法介绍h2>
    <p>选择任意一张牌，然后观看点数的pk结果p>
  section>
  <footer>
     <p>给我打个赏把!p>
     <img id="payme" src="../../static/payme.jpg">
   footer>
 div>  
template>

vue组件的视图本质上就是一段html代码，只不过这段代码要放在template标签之内。一个vue组件的视图部分如果需要使用任何资源时例如图片，那么这些资源最好放在代码的static目录下。在该组件的视图代码中，使用到了另一个组件，其对应的就是标签 start-scene，一会我们会研究组件start-scene的实现. 接下来要实现的是组件的数据和业务逻辑模块，接下来添加如下代码：

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

VUE组件的数据和逻辑模块都必须在标签script之内实现，import 语句的作用是从另一个.vue代码文件中加载其实现的组件，于是代码：

import StartScene from './startscenecomponent'

它的意思是从相同目录下的一个名为startscenecomponent.vue的文件中加载这个文件导出的组件，一个组件要向外导出时必须使用export关键字，这就是上面代码 export default 的作用， 组件的数据和逻辑模块就实现在export default 后面的两个大括号之内。如果一个VUE组件要包含其他组件时，被包含的组件需要放置在父组件的components部分，上面代码中：

components: {
  StartScene
}

表示的是StartScene组件将作为GameContainer组件的一部分，被GameContainer组件所拥有。当前我们的GameContainer组件暂时不含有数据和业务逻辑，因此GameContainer组件就只包含一个StartScene子组件。

有html代码，一般就有其对应的CSS代码，继续在GameContainer.vue里面添加如下代码：

<style scoped>
  #game {
    width: 480px;
    height: 600px;
    border-radius: 8px;
    overflow: hidden;
  }

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

  #payme {
    width:240px;
    height: 256px;
  }
style>

用于修饰组件html代码的css代码必须实现在style标签内，scoped关键字表明，这里的css代码只能作用于组件前头template标签内的html代码或者是子组件的html代码。

注意到，使用组件时，必须把组件以标签的方式嵌入到html代码中，前头的html代码有一句是这样的：

<start-scene>start-scene>

上面的语句就是把组件StartScene初始化，然后加载到页面上显示，注意组件的使用方式，组件的名字是由单词拼接而成的，并且单词的首字母必须大写，例如StartScene,但使用时，大写要换成小写，同时两个单词间要用破折号连接，例如StartScene变成start-scene.

接着我们看看StartScene组件的实现，同样是在src/components/目录下，新建一个文件命名为startscenecomponent.vue, 打开该文件，先添加组件的视图代码：

<template>
  <div id="start-scene" class="scene">
    <a href="#" id="start-btn" class="button">a>
  div>
template>

StartScene的视图部分只包含了一个可点击的链接按钮，接下来实现组件的数据和逻辑部分，接着添加如下代码：

<script>
  export default {
  }
script>

我们暂时把组件的数据和逻辑设置为空，随着开发的深入，我们再添加它的代码。接着我们添加针对该组件html代码的css代码，继续在该文件内添加如下代码：

<style scoped>
  #start-scene {background: url(../../static/images/start-scene-bg.png) no-repeat;}

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

代码中，从static/images目录下加载一张图片作为组件视图部分的背景图案，此致游戏的启动页面我们就完成了。最后在src目录下，打开App.vue文件，把里的内容改成如下代码：

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

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

<style>
style>

App.vue 实现的组件是所有组件的根组件，App组件把GameContainer组件加载进来，同时在其html代码部分引用了GameContainer组件，这样会使GameContianer组件加载到页面，GameContainer组件加载后再加载它的子组件StartScene,于是StartScene组件的视图部分就会显示到浏览器页面上，把上面代码保存后，浏览器页面会自动刷新，顺利的话你会看到如下画面：

下一节我们会完成游戏进行场景和结束场景的实现。本节代码可由以下链接下载：
http://pan.baidu.com/s/1pKQwg7h

更多技术信息，包括操作系统，编译器，面试算法，机器学习，人工智能，请关照我的公众号：