Vue-8-puzzle

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

View demo Download Source

Vue-8-puzzle

Images/Videos for source

Vue-8-puzzle2

Auto-resize

Vue-8-puzzlec

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

GitHub