Vue-maze

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

PLAY DEMO

• Fit to the component size automatically

• Mousemove/Touchmove/ArrowKey to move the player

• Choose difficulty

• Choose maze generating strategy

• Use your own avator/goal 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