https://github.com/meganetaaan/vue-maze

A Vue.js component of a simple maze game.
https://github.com/meganetaaan/vue-maze

component vue

Last synced: about 1 month ago
JSON representation

A Vue.js component of a simple maze game.

• Host: GitHub
• URL: https://github.com/meganetaaan/vue-maze
• Owner: meganetaaan
• License: mit
• Created: 2017-10-02T03:19:38.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:08:35.000Z (over 2 years ago)
• Last Synced: 2025-05-19T01:48:01.798Z (about 2 months ago)
• Topics: component, vue
• Language: Vue
• Homepage:
• Size: 5.07 MB
• Stars: 66
• Watchers: 3
• Forks: 8
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Vue-maze

===

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

[PLAY DEMO](https://meganetaaan.github.io/maze/)

![maze-vue](doc/maze-vue.png)

* Fit to the component size automatically

![maze-vue-resize](doc/maze-resize.gif)

* Mousemove/Touchmove/ArrowKey to move the player

![maze-vue2](doc/maze-vue2.gif)

* Choose difficulty

![maze-vue-difficulty](doc/maze-difficulty.gif)

* Choose maze generating strategy

![maze-vue-strategy](doc/maze-strategy.gif)

* Use your own avator/goal image

![maze-vue-image](doc/maze-image.gif)

## Install

```bash

$ npm install maze vue-maze --save

```

```JavaScript

import Vue from 'vue'

import Maze from 'vue-maze'

let v = new Vue({

  el: '#app',

  template: `

    

        

    `,

  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