Skip to content

meganetaaan/vue-8-puzzle

Repository files navigation

Vue-8-puzzle

An itty-bitty slide puzzle game made as Vue.js component

PLAY DEMO

8-puzzle

Images/Videos for source

select-source

Auto-resize

resize

Install and Usage

$ npm install vue-8-puzzle --save
import Vue from 'vue'
import PuzzleBoard from 'vue-8-puzzle'
import videoSrc from 'myvideo.webm'

let v = new Vue({
  el: '#app',
  template: `
    <app>
      <puzzle-board
      :src="videoSrc" />
    </app>`,
  components: {
    PuzzleBoard
  }
})

Props

Props Type Description Default
src String source path -
sources Array source paths -
cols number number of columns 4
rows number number of rows 4
autoResize boolean when true the component fits to its root automatically false
showNumber boolean when true the component shows tile numbers on the video true

Events

Event Payload Description
init none the puzzle is initialized
start none the tile start to move
change none the tile changes
finish none all the tile is on correct position