Skip to content

meganetaaan/vue-maze

Repository files navigation

Vue-maze

An itty-bitty maze game made as Vue.js component

PLAY DEMO

maze-vue

  • Fit to the component size automatically

maze-vue-resize

  • Mousemove/Touchmove/ArrowKey to move the player

maze-vue2

  • Choose difficulty

maze-vue-difficulty

  • Choose maze generating strategy

maze-vue-strategy

  • Use your own avator/goal image

maze-vue-image

Install

$ npm install maze vue-maze --save
import Vue from 'vue'
import Maze from 'vue-maze'

let v = new Vue({
  el: '#app',
  template: `
    <app>
        <maze></maze>
    </app>`,
  components: {
    Maze
  }
})

Props

Props Type Description Default
difficulty string difficulty(easy|normal|hard) normal
strategy string maze generating strategy(dig|cluster) cluster
image-path string the src path to avator image (a data url of default image)
goal-image-path string the src path to goal image (a data url of default image)

Events

Event Payload Description
init none the maze is initialized
start none the player starts to move
finish none the player has arrived at the goal