vue-maze - GitLite

KO | EN

gitlite — search

#typescript #llm #go #machine-learning #deep-learning #docker #macos #nodejs #java #cli #awesome-list #vue #ios #openai

vue-maze

(★ 67)

A Vue.js component of a simple maze game.

File Explorer

Download Latest Version (.zip)

- devcontainer.json
- Dockerfile
- maze-difficulty.gif
- maze-image.gif
- maze-resize.gif
- maze-strategy.gif
- maze-vue.png
- maze-vue2.gif
- favicon.ico
- index.html
- - flag.png
  - getMaze.ts
  - getMaze2.ts
  - Maze.vue
  - Renderer.ts
  - tori.png
- App.vue
- main.ts
- shims-tsx.d.ts
- shims-vue.d.ts
- - example.spec.ts
.browserslistrc
.editorconfig
.eslintrc.js
.gitignore
.npmignore
babel.config.js
jest.config.js
LICENSE
package-lock.json
package.json
README.md
tsconfig.json

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd vue-maze

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ npm install maze vue-maze --save

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Vue-maze
===

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

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

![maze-vue](https://raw.githubusercontent.com/meganetaaan/vue-maze/master/doc/maze-vue.png)

* Fit to the component size automatically

![maze-vue-resize](https://raw.githubusercontent.com/meganetaaan/vue-maze/master/doc/maze-resize.gif)

* Mousemove/Touchmove/ArrowKey to move the player

![maze-vue2](https://raw.githubusercontent.com/meganetaaan/vue-maze/master/doc/maze-vue2.gif)

* Choose difficulty

![maze-vue-difficulty](https://raw.githubusercontent.com/meganetaaan/vue-maze/master/doc/maze-difficulty.gif)

* Choose maze generating strategy

![maze-vue-strategy](https://raw.githubusercontent.com/meganetaaan/vue-maze/master/doc/maze-strategy.gif)

* Use your own avator/goal image

![maze-vue-image](https://raw.githubusercontent.com/meganetaaan/vue-maze/master/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: `
    <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