https://github.com/meganetaaan/vue-8-puzzle

A simple 8-puzzle game made as a Vue.js component
https://github.com/meganetaaan/vue-8-puzzle

Last synced: 9 months ago
JSON representation

A simple 8-puzzle game made as a Vue.js component

• Host: GitHub
• URL: https://github.com/meganetaaan/vue-8-puzzle
• Owner: meganetaaan
• License: mit
• Created: 2018-02-22T11:57:58.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T01:21:48.000Z (over 2 years ago)
• Last Synced: 2024-05-01T21:28:57.266Z (over 1 year ago)
• Language: JavaScript
• Size: 29.7 MB
• Stars: 30
• Watchers: 4
• Forks: 9
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-zh - Vue-8拼图 - 作为Vue.js组件制作的itty-bitty幻灯片益智游戏 (UI组件 / 杂)
• awesome-vue - vue-8-puzzle - An itty-bitty slide puzzle game made as Vue.js component (Components & Libraries / UI Components)
• awesome-vue - vue-8-puzzle ★16 - An itty-bitty slide puzzle game made as Vue.js component (UI Components / Miscellaneous)
• awesome-vue - vue-8-puzzle - A simple 8-puzzle game made as a Vue.js component ` 📝 a month ago` (UI Components [🔝](#readme))
• awesome-vue - vue-8-puzzle - An itty-bitty slide puzzle game made as Vue.js component (UI Components / Miscellaneous)

README

          
Vue-8-puzzle

===

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

[PLAY DEMO](https://meganetaaan.github.io/vue-8-puzzle/)

![8-puzzle](doc/cat.gif)

Images/Videos for source

![select-source](doc/select-source.gif)

Auto-resize

![resize](doc/resize.gif)

## Install and Usage

```bash

$ npm install vue-8-puzzle --save

```

```JavaScript

import Vue from 'vue'

import PuzzleBoard from 'vue-8-puzzle'

import videoSrc from 'myvideo.webm'

let v = new Vue({

  el: '#app',

  template: `

    

      

    `,

  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