fix: vue demo

examples/vue/config.js

@@ -4,5 +4,5 @@ module.exports = {
   entry: resolve(__dirname, './src/entry.js'),
   dist: resolve(__dirname, '../dist/vue'),
   sourceMap: false,
-  homepage: 'https://wasd-org.github.io/wasd-flappy/vue/'
+  homepage: '/wasd-flappy/vue/'
 }

examples/vue/src/app.vue

@@ -1,13 +1,33 @@
 <template>
   <main class="app" :class="{ 'mobile': isMobile }">
-    <h1 v-if="!isMobile">Flappy Bird for Vue.js</h1>
+    <h1 v-if="!isMobile">Vue.js Flappy Bird</h1>
 
-    <f-canvas ref="canvas" v-bind="flappy._canvas">
+    <p>
+      High Score: {{ highScore }}
+      <a
+        @click="flappy.restart()"
+        v-if="gameState === 'OVER'">Restart</a>
+    </p>
+
+    <f-canvas
+      :bg-image="images[0]"
+      :ground-image="images[3]"
+      ref="canvas"
+      :score="score"
+      v-bind="flappy._canvas">
       <template scope="props">
         <f-bird
+          :image="images[1]"
           :state="birdState"
           :ctx="props.ctx"
           :data="bird" />
+        <f-tube
+          :key="tube.id"
+          :image="images[2]"
+          v-for="tube in tubes"
+          :ctx="props.ctx"
+          :data="tube"
+        />
       </template>
     </f-canvas>
 
@@ -18,9 +38,17 @@
 </template>
 
 <script>
-  import FBird from './bird.vue'
-  import FTube from './tube.vue'
+  import FBird from './bird'
+  import FTube from './tube'
   import FCanvas from './canvas.vue'
+  import loadImage from 'image-promise'
+
+  const promise = loadImage([
+    require('./assets/bg.png'),
+    require('./assets/bird.png'),
+    require('./assets/tube.png'),
+    require('./assets/ground.png')
+  ])
 
   export default { // eslint-disable-line
     components: { FCanvas, FBird, FTube },
@@ -30,28 +58,37 @@
     data () {
       return {
         score: 0,
+        lastScore: 0,
         gameState: '',
         birdState: '',
-        bird: {}
+        bird: {},
+        tubes: [],
+        images: []
+      }
+    },
+
+    computed: {
+      highScore () {
+        return this.lastScore > this.score ? this.lastScore : this.score
       }
     },
 
     mounted () {
-      const canvas = this.$refs.canvas
+      promise.then(all => {
+        const canvas = this.$refs.canvas
 
-      this.flappy.on(['game:progress', 'game:ready'], stats => {
-        canvas.clear()
-        this.bird = stats.player
-        this.score = stats.score
-        this.gameState = stats.state
-      })
-      this.flappy.on(['game:hitblock', 'game:hitfloor'], stats => {
-        console.log('done')
-        this.flappy.pause()
-      })
-      this.flappy.on('game:start', _ => {
-        this.birdState = 'MOTION'
-        this.gameState = 'PROGRESS'
+        this.images = all
+        this.flappy.on(['game:progress', 'game:ready'], stats => {
+          canvas.reset()
+          this.bird = stats.player
+          this.tubes = stats.blocks
+          this.score = stats.score
+          this.gameState = stats.state
+        })
+        this.flappy.on(['player:hitblock', 'player:hitfloor'], stats => {
+          this.flappy.gameover()
+          this.lastScore = this.score
+        })
       })
     }
   }
@@ -65,14 +102,15 @@
     font-size: 14px;
     margin: 0;
     padding: 0;
+    overflow: hidden;
   }
 
   a {
     color: #42b983;
+    cursor: pointer;
   }
 
   .app:not(.mobile) {
     margin-top: 10vh;
   }
-
 </style>

examples/vue/src/bird.js

@@ -0,0 +1,49 @@
+const STATE = {
+  QUIET: 'QUIET',
+  DEATH: 'DEATH',
+  MOTION: 'MOTION'
+}
+
+export default {
+  name: 'bird',
+
+  props: {
+    image: {},
+    ctx: {},
+    data: Object,
+    state: {
+      type: String,
+      default: STATE.QUIET
+    }
+  },
+
+  created () {
+    this.count = 0
+  },
+
+  render () {},
+
+  watch: {
+    data: {
+      deep: true,
+      handler () {
+        const { startX, startY, width, height, offset } = this.data
+        const cur = parseInt(++this.count / 10, 10) % 3 * width
+        const angle = offset * 2 * Math.PI / 180
+        const cosA = Math.cos(angle)
+        const sinA = Math.sin(angle)
+        const x = cosA * startX - sinA * startY
+        const y = cosA * startY + sinA * startX - width / 2
+
+        this.ctx.save()
+        this.ctx.rotate(-angle)
+        this.ctx.drawImage(this.image,
+          cur, 0,
+          width, height,
+          x, y,
+          width, height)
+        this.ctx.restore()
+      }
+    }
+  }
+}

examples/vue/src/canvas.vue

@@ -8,17 +8,44 @@
   export default {
     name: 'canvas',
 
-    props: ['width', 'height'],
+    props: {
+      width: Number,
+      height: Number,
+      floorHeight: Number,
+      score: Number,
+      groundImage: {},
+      bgImage: {}
+    },
 
     data () {
       return {
         ctx: {}
       }
     },
 
+    created () {
+      this.count = 0
+      this.groundY = this.height - this.floorHeight
+    },
+
     methods: {
-      clear () {
+      reset () {
+        const offset = ++this.count * 3 % 48
+
         this.ctx.clearRect(0, 0, this.width, this.height)
+        this.ctx.drawImage(this.bgImage, 0, 0)
+        this.ctx.drawImage(this.groundImage,
+          offset, 0,
+          this.width, this.floorHeight,
+          0, this.groundY,
+          this.width, this.floorHeight)
+        this.drawScore()
+      },
+
+      drawScore () {
+        this.ctx.font = 'bold 14px verdana, sans-serif'
+        this.ctx.fillStyle = '#fff'
+        this.ctx.fillText(this.score, 10, 20)
       }
     },
 
@@ -27,9 +54,3 @@
     }
   }
 </script>
-
-<style scoped>
-  .canvas {
-    border: 1px solid #ccc;
-  }
-</style>

examples/vue/src/entry.js

@@ -6,35 +6,42 @@ const isMobile = /mobile/i.test(navigator.userAgent)
 
 // 获取画布宽高
 const canvas = {
-  height: isMobile ? window.screen.height : 600,
-  width: isMobile ? window.screen.width : 400,
+  height: 384,
+  width: 288,
+  floorHeight: 55,
   fps: 50
 }
 
 // 创建角色
 const player = new Player({
   height: 26,
-  width: 35
+  width: 36,
+  startX: 50,
+  velocity: 10
 })
+
+// 创建敌人，随机位置、高度随机生成
+const block = new Block({
+  name: 'tube',
+  width: 52,
+  height: [100, 150]
+})
+
 // 创建 flappy 游戏
 const flappy = new Flappy({
   canvas,
   player,
   levels: [
     {
       score: 0,
-      blocks: [
-        // 创建敌人，随机位置出现
-        new Block({
-          name: 'tube',
-          placement: 'random'
-        })
-      ]
+      blocks: [block],
+      blockDistance: [30, 60]
     }
   ]
 })
 
 document.addEventListener('keydown', e => {
+  if (flappy.state === 'OVER') return
   // space, up, w
   if (e.keyCode === 32 || e.keyCode === 38 || e.keyCode === 87) {
     if (flappy.state === 'READY') {

examples/vue/src/tube.js

@@ -0,0 +1,33 @@
+export default {
+  name: 'tube',
+
+  props: {
+    image: {},
+    ctx: {},
+    data: Object
+  },
+
+  render () {},
+
+  watch: {
+    data: {
+      deep: true,
+      handler () {
+        const { startX, startY, width, height } = this.data
+        let y = startY
+        if (!startY) {
+          y = -height
+          this.ctx.save()
+          this.ctx.scale(1, -1)
+        }
+
+        this.ctx.drawImage(this.image,
+          0, 0,
+          width, height,
+          startX, y,
+          width, height)
+        !startY && this.ctx.restore()
+      }
+    }
+  }
+}