├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── app
    ├── app.css
    ├── app.html
    ├── app.js
    ├── boot.mjs
    ├── tetris
    │   ├── block.vue
    │   ├── cell.vue
    │   ├── ground.vue
    │   ├── player.vue
    │   ├── soundService
    │   │   ├── soundService.mjs
    │   │   └── sounds
    │   │   │   ├── bgm1.mp3
    │   │   │   ├── bgm2.mp3
    │   │   │   ├── bgm3.mp3
    │   │   │   ├── bgm4.mp3
    │   │   │   ├── complete.mp3
    │   │   │   ├── drop.mp3
    │   │   │   ├── gameover.mp3
    │   │   │   ├── lineClear.mp3
    │   │   │   └── title.mp3
    │   ├── stageComputed.js
    │   └── tetris.vue
    └── util
    │   ├── Deferred.mjs
    │   ├── filters.mjs
    │   └── util.mjs
├── package-lock.json
├── package.json
├── webpack.config.base.js
├── webpack.config.js
└── www
    ├── favicon.ico
    └── index.html


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "production": {
 4 |       "presets": [
 5 |         ["es2015", {"modules": false}]
 6 |       ],
 7 |       "comments": false
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "standard",
 3 |   "plugins": [
 4 |     "html"
 5 |   ],
 6 |   "globals": {
 7 |     "_": true,
 8 |     "$": true,
 9 |     "jQuery": true,
10 |     "Vue": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .DS_STORE
 3 | .netbeans
 4 | .node_history
 5 | .vscode
 6 | .tscache
 7 | .idea
 8 | www/**
 9 | !www/favicon.ico
10 | !www/index.html
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Tetris
 2 | Vue based Tetris 🏰 [Try Demo](https://elevista.github.io/vue-tetris)
 3 | 
 4 | [https://github.com/elevista/vue-tetris](https://github.com/elevista/vue-tetris)
 5 | 
 6 | ## License
 7 | The MIT License (MIT)
 8 | 
 9 | Copyright (c) 2018 Elevista
10 | 


--------------------------------------------------------------------------------
/app/app.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/app.css


--------------------------------------------------------------------------------
/app/app.html:
--------------------------------------------------------------------------------
1 | <div class="app">
2 |   <tetris></tetris>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/app/app.js:
--------------------------------------------------------------------------------
 1 | import tetris from './tetris/tetris.vue'
 2 | import 'animate.css/animate.css'
 3 | 
 4 | export default {
 5 |   name: 'app',
 6 |   data () {
 7 |     return {}
 8 |   },
 9 |   components: {tetris},
10 |   templateSrc: './app.html',
11 |   styleSrc: './app.css'
12 | }
13 | 


--------------------------------------------------------------------------------
/app/boot.mjs:
--------------------------------------------------------------------------------
 1 | import app from './app'
 2 | import Vue from 'vue'
 3 | import './util/filters.mjs'
 4 | import _ from 'lodash'
 5 | import { lodashMixin } from './util/util.mjs'
 6 | 
 7 | _.mixin(lodashMixin)
 8 | 
 9 | new Vue({render: h => h(app), el: 'app'}) // eslint-disable-line no-new
10 | 


--------------------------------------------------------------------------------
/app/tetris/block.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span class="block" :class="{shadow}">
 3 |     <cell v-for="cell of cells" :data="cell.data" :stage="stage" :pos="cell.pos" :key="cell.id"></cell>
 4 |   </span>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import cell from './cell.vue'
 9 |   import stageComputed from './stageComputed'
10 | 
11 |   let cellId = 0
12 |   export default {
13 |     name: 'block',
14 |     props: ['stage', 'init', 'shadow'],
15 |     mixins: [stageComputed],
16 |     data () {
17 |       let {pos: [x, y]} = this.init
18 |       return {idx: 0, x, y, fromCellId: cellId}
19 |     },
20 |     created () { cellId += this.shapes.length },
21 |     computed: {
22 |       shapes () { return this.init.shapes },
23 |       length () { return this.shapes.length },
24 |       shape () { return this.shapes[this.idx % this.length] },
25 |       style () { return {left: this.x * this.cellSize + 'px', bottom: this.y * this.cellSize + 'px'} },
26 |       cells () {
27 |         return this.shape.map(([x, y], idx) => {
28 |           return {pos: [x + this.x, y + this.y], data: {class: this.init.class}, id: this.fromCellId + idx}
29 |         })
30 |       }
31 |     },
32 |     methods: {
33 |       predictRotate (n = 0) {
34 |         let {length, shapes, idx, x, y} = this
35 |         return shapes[(idx + 1) % length].map(([_x, _y]) => [x + _x + n, y + _y])
36 |       },
37 |       predictMove (x, y) { return this.shape.map(([_x, _y]) => [_x + this.x + x, _y + this.y + y]) },
38 |       rotate (x = 0) {
39 |         this.x += x
40 |         this.idx++
41 |       },
42 |       move (x, y) {
43 |         this.x += x
44 |         this.y += y
45 |       }
46 |     },
47 |     components: {cell}
48 |   }
49 | </script>
50 | 
51 | <style scoped>
52 |   .block.shadow {opacity: 0.3}
53 | </style>
54 | 


--------------------------------------------------------------------------------
/app/tetris/cell.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :style="style" :class="display" class="cell"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 |   import stageComputed from './stageComputed'
 7 | 
 8 |   export default {
 9 |     name: 'cell',
10 |     props: ['stage', 'data', 'pos'],
11 |     mixins: [stageComputed],
12 |     computed: {
13 |       display () { return this.data.class },
14 |       style () {
15 |         return {
16 |           width: this.cellSize + 'px',
17 |           height: this.cellSize + 'px',
18 |           left: this.pos[0] * this.cellSize + 'px',
19 |           bottom: this.pos[1] * this.cellSize + 'px'
20 |         }
21 |       }
22 |     }
23 |   }
24 | </script>
25 | 
26 | <style scoped>
27 | 
28 | 
29 |   .cell {
30 |     position: absolute;
31 |     box-sizing: border-box;
32 |     border-style: outset;
33 |     border-width: 3px;
34 |     border-top-color: rgba(255, 255, 255, 0.3);
35 |     border-left-color: rgba(255, 255, 255, 0.3);
36 |   }
37 |   .cell.I {
38 |     background-color: cyan;
39 |     border-right-color: cyan;
40 |     border-bottom-color: cyan;
41 |   }
42 |   .cell.O {
43 |     background-color: yellow;
44 |     border-right-color: yellow;
45 |     border-bottom-color: yellow;
46 |   }
47 |   .cell.T {
48 |     background-color: magenta;
49 |     border-right-color: magenta;
50 |     border-bottom-color: magenta;
51 |   }
52 |   .cell.S {
53 |     background-color: lime;
54 |     border-right-color: lime;
55 |     border-bottom-color: lime;
56 |   }
57 |   .cell.Z {
58 |     background-color: red;
59 |     border-right-color: red;
60 |     border-bottom-color: red;
61 |   }
62 |   .cell.J {
63 |     background-color: blue;
64 |     border-right-color: blue;
65 |     border-bottom-color: blue;
66 |   }
67 |   .cell.L {
68 |     background-color: orange;
69 |     border-right-color: orange;
70 |     border-bottom-color: orange;
71 |   }
72 | 
73 | </style>
74 | 


--------------------------------------------------------------------------------
/app/tetris/ground.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ground">
 3 |     <transition-group name="cell">
 4 |       <template v-for="(row,y) of this.ground">
 5 |         <cell v-for="(cell,x) of row" v-if="cell" :data="cell.data" :pos="[x,y]" :stage="stage" :key="cell.id" class="cell"/>
 6 |       </template>
 7 |     </transition-group>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 |   import stageComputed from './stageComputed'
13 |   import cell from './cell.vue'
14 | 
15 |   export default {
16 |     name: 'ground',
17 |     mixins: [stageComputed],
18 |     props: ['stage'],
19 |     data () { return {ground: [[]]} },
20 |     methods: {
21 |       reset () {
22 |         let {width, height} = this.stage
23 |         let total = width * height
24 |         this.ground = _.chain(total).times(() => null).chunk(width).value()
25 |       },
26 |       checkTouched (cells) {
27 |         for (let [x, y] of cells) {
28 |           if (x < 0 || x >= this.width) return 'wall'
29 |           if (y >= this.height) continue
30 |           if (y < 0 || this.ground[y][x]) return 'ground'
31 |         }
32 |         return false
33 |       },
34 |       clearRow () {
35 |         let rows = 0
36 |         let empty = 0
37 |         for (let i = this.ground.length - 1; i >= 0; i--) {
38 |           let row = this.ground[i]
39 |           if (_.every(row)) {
40 |             this.ground.splice(i, 1)
41 |             this.ground.push(_.times(this.width, () => null))
42 |             rows++
43 |             empty++ // current row cleared
44 |           } else if (_.every(row, x => !x)) empty++
45 |         }
46 |         empty === this.ground.length && this.$emit('clearAll')
47 |         rows && this.$emit('clearRow', rows)
48 |       },
49 |       push (cells) {
50 |         let ret = true
51 |         for (let cell of cells) {
52 |           let [x, y] = cell.pos
53 |           this.ground[y] ? this.$set(this.ground[y], x, cell) : ret = false
54 |         }
55 |         this.$nextTick(this.clearRow)
56 |         return ret
57 |       }
58 |     },
59 |     components: {cell}
60 |   }
61 | </script>
62 | 
63 | <style scoped>
64 |   .cell-enter-active {
65 |     animation: rubberBand 0.3s;
66 |   }
67 |   .cell-leave-active {
68 |     z-index: 10;
69 |     animation: fadeOutDown 0.3s;
70 |   }
71 |   .cell { transition: all 0.3s linear}
72 | </style>
73 | 


--------------------------------------------------------------------------------
/app/tetris/player.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="player">
  3 |     <div :style="{height:height*cellSize+'px',width:width*cellSize+'px'}" class="game">
  4 |       <ground :stage="stage" ref="ground" class="ground" @clearRow="clearRow" @clearAll="clearAll"/>
  5 |       <block v-if="curBlock" :init="curBlock" :stage="stage" ref="shadow" :shadow="true"/>
  6 |       <block v-if="curBlock" :init="curBlock" :stage="stage" ref="block" :key="curBlock.id"/>
  7 |     </div>
  8 |     <div class="panel">
  9 |       <h2 class="nextText">Next</h2>
 10 |       <div class="nextBox">
 11 |         <block v-if="nextBlock" :init="nextBlock" :stage="stage" class="next" :style="nextBlockStyle" :key="nextBlock.id"/>
 12 |       </div>
 13 |       <div class="score">
 14 |         <div class="row">
 15 |           <h4 class="title">Level</h4>
 16 |           <span>{{level|numberComma}}</span>
 17 |         </div>
 18 |         <div class="row">
 19 |           <h4 class="title">Score</h4>
 20 |           <span>{{score|numberComma}}</span>
 21 |         </div>
 22 |         <div class="row">
 23 |           <h4 class="title">Rows</h4>
 24 |           <span>{{rowCleared|numberComma}}</span>
 25 |         </div>
 26 |       </div>
 27 |       <div class="statistics">
 28 |         <span class="title">Statistics</span>
 29 |         <div :key="key" v-for="(value, key) in statistics" class="block">
 30 |           <span class="symbol">{{key}}</span>
 31 |           <span class="number">{{value}}</span>
 32 |           <span class="rate">{{((value / statistics.TOTAL) * 100 || 0)| round(2)}}%</span>
 33 |         </div>
 34 |       </div>
 35 |       <div class="buttons">
 36 |         <button v-if="state.playing" @click="pause">{{state.pause?'Resume':'Pause'}}</button>
 37 |         <button v-else @click="start" autofocus>{{state.gameover?'Restart':'Start'}}</button>
 38 |         <button @click="muteSound">mute</button>
 39 |       </div>
 40 |       <h2 class="state">{{stateText}}</h2>
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 |   import block from './block.vue'
 47 |   import ground from './ground.vue'
 48 |   import stageComputed from './stageComputed'
 49 |   import soundService from './soundService/soundService.mjs'
 50 | 
 51 |   let blockId = 0
 52 |   export default {
 53 |     name: 'player',
 54 |     props: ['stage', 'keys'],
 55 |     mixins: [stageComputed, soundService],
 56 |     data () {
 57 |       return {
 58 |         curBlock: null,
 59 |         nextBlock: null,
 60 |         actionOf: {},
 61 |         tickInterval: 0,
 62 |         rowCleared: null,
 63 |         level: null,
 64 |         score: null,
 65 |         state: null,
 66 |         statistics: null
 67 |       }
 68 |     },
 69 |     computed: {
 70 |       tickTime () { return Math.max(11 - this.level, 1) * 50 },
 71 |       nextBlockStyle () {
 72 |         return {left: `calc(50% - ${this.cellSize}px)`, top: `calc(50% + ${this.cellSize}px)`}
 73 |       },
 74 |       canPlay () {
 75 |         let {gameover, pause, playing} = this.state
 76 |         return !gameover && !pause && playing
 77 |       },
 78 |       stateText () {
 79 |         let {gameover, pause} = this.state
 80 |         if (gameover) return 'Game Over!'
 81 |         if (pause) return 'Pause'
 82 |         return ''
 83 |       }
 84 |     },
 85 |     created () {
 86 |       _.forEach(this.keys, (v, k) => this.$set(this.actionOf, v, k))
 87 |       window.addEventListener('keydown', this.keydown)
 88 |       this.reset()
 89 |     },
 90 |     methods: {
 91 |       reset () {
 92 |         Object.assign(this, {
 93 |           rowCleared: 0,
 94 |           level: 0,
 95 |           score: 0,
 96 |           state: {playing: false, gameover: false, pause: false},
 97 |           statistics: _(this.stage.blocks).map(x => [x, 0]).fromPairs().assign({TOTAL: 0}).value()
 98 |         })
 99 |       },
100 |       playBgm (type = `bgm${this.level % 4 + 1}`, isRepeat = true) {
101 |         this.playSound(type, isRepeat)
102 |       },
103 |       playFX (name) { this.playEffect(name) },
104 |       start () {
105 |         if (this.state.playing) return
106 |         this.reset()
107 |         this.$refs.ground.reset()
108 |         this.createNextBlock()
109 |         this.next()
110 |         this.state.playing = true
111 |         this.playBgm()
112 |       },
113 |       tick () {
114 |         if (!this.canPlay) return
115 |         this.move(0, -1)
116 |       },
117 |       setTick () { this.tickInterval = setInterval(this.tick, this.tickTime) },
118 |       clearTick () { this.tickInterval = clearInterval(this.tickInterval) },
119 |       resetTick () {
120 |         this.clearTick()
121 |         this.setTick()
122 |       },
123 |       clearRow (n) {
124 |         this.rowCleared += n
125 |         this.getScore([0, 40, 100, 300, 1200][n] * (this.level + 1))
126 |         this.level = Math.floor(this.rowCleared / 10)
127 |         this.playFX('lineClear')
128 |       },
129 |       clearAll () { this.getScore(3000 * (this.level + 1)) },
130 |       keydown ($event) {
131 |         if ($event.keyCode === 32) $event.preventDefault()
132 |         if (!this.state.playing) return
133 |         if ($event.keyCode === 27) return this.pause()
134 |         if (!this.canPlay) return
135 |         switch (this.actionOf[$event.keyCode]) {
136 |           case 'straight':
137 |             this.moveStraight()
138 |             $event.preventDefault()
139 |             break
140 |           case 'left':
141 |             this.move(-1, 0)
142 |             $event.preventDefault()
143 |             break
144 |           case 'rotate' :
145 |             this.rotate()
146 |             $event.preventDefault()
147 |             break
148 |           case 'right':
149 |             this.move(1, 0)
150 |             $event.preventDefault()
151 |             break
152 |           case 'down':
153 |             this.move(0, -1)
154 |             this.resetTick()
155 |             $event.preventDefault()
156 |             break
157 |         }
158 |       },
159 |       pause () {
160 |         if (this.state.pause) {
161 |           this.state.pause = false
162 |           this.resumeSound()
163 |           this.setTick()
164 |         } else {
165 |           this.state.pause = true
166 |           this.pauseSound()
167 |           this.clearTick()
168 |         }
169 |         this.$emit('pause', this.state.pause)
170 |       },
171 |       pushBlock () {
172 |         let {block, ground} = this.$refs
173 |         this.getScore(3 * (this.level + 1))
174 |         let allPushed = ground.push(block.cells)
175 |         this.curBlock = null
176 |         allPushed ? this.next() : this.gameover()
177 |         this.playFX('drop')
178 |       },
179 |       move (x, y) {
180 |         let {block, ground} = this.$refs
181 |         let touched = ground.checkTouched(block.predictMove(x, y))
182 |         if (!touched) {
183 |           block.move(x, y)
184 |           this.updateShadow()
185 |         } else if (y < 0) this.pushBlock() // go down and touched
186 |         return touched
187 |       },
188 |       moveStraight () {
189 |         while (!this.move(0, -1)) {}
190 |         this.getScore(21 + (3 * this.level))
191 |       },
192 |       getScore (v) {
193 |         if (!this.canPlay) return
194 |         this.score += v
195 |       },
196 |       updateShadow () {
197 |         let {shadow, block, ground} = this.$refs
198 |         let {idx, x, y} = block
199 |         Object.assign(shadow, {idx, x, y})
200 |         while (!ground.checkTouched(shadow.predictMove(0, -1))) shadow.move(0, -1)
201 |       },
202 |       rotate () {
203 |         let {block, ground} = this.$refs
204 |         let rotate = block.predictRotate()
205 |         let touched = ground.checkTouched(rotate)
206 |         if (!touched) {
207 |           block.rotate(0)
208 |           this.updateShadow()
209 |           return
210 |         }
211 |         let x = rotate.map(([x]) => x)
212 |         _(1).range(_.max(x) - _.min(x) + 1)
213 |           .flatMap(x => [-x, x])
214 |           .forEach(x => {
215 |             if (ground.checkTouched(block.predictRotate(x))) return
216 |             block.rotate(x)
217 |             this.updateShadow()
218 |             return false
219 |           })
220 |       },
221 |       createNextBlock () {
222 |         let type = _.sample(this.blocks)
223 |         this.statistics[type]++
224 |         this.statistics.TOTAL++
225 |         let shapes = this.blockType[type]
226 |         this.nextBlock = {shapes, pos: [0, 0], class: type, id: blockId++}
227 |       },
228 |       gameover () {
229 |         if (this.state.gameover) return
230 |         Object.assign(this.state, {gameover: true, playing: false})
231 |         this.clearTick()
232 |         this.$emit('gameover', this)
233 |         this.playBgm('gameover', false)
234 |       },
235 |       next () {
236 |         this.curBlock = Object.assign({}, this.nextBlock)
237 |         this.curBlock.pos = [Math.floor(this.width / 2) - 1, this.height]
238 |         this.$nextTick(() => {
239 |           this.resetTick()
240 |           if (this.move(0, -1)) return
241 |           let {block, ground} = this.$refs
242 |           ground.checkTouched(block.predictMove(0, -1)) || block.move(0, -1)
243 |           this.createNextBlock()
244 |         })
245 |       }
246 |     },
247 |     watch: {
248 |       level (v) { v && this.playBgm() }
249 |     },
250 |     destroyed () { window.removeEventListener('keyodwn', this.keydown) },
251 |     components: {ground, block}
252 |   }
253 | </script>
254 | 
255 | <style scoped>
256 |   .player {white-space: nowrap;display: inline-block;background: #e2f5ec;padding: 30px; color: #222;border: solid 1px #b7b7b7;}
257 |   .player > * {display: inline-block; vertical-align: top;}
258 |   .game {position: relative;outline: solid 1px gray;background-color: black; overflow: hidden;}
259 |   .buttons {text-align: center;}
260 |   .buttons button {font-size: 30px;}
261 |   .panel {padding: 0px 30px;}
262 |   .nextText {height: 20px;text-align: center;}
263 |   .nextBox {width: 160px;height: 160px;position: relative;background-color: #222;}
264 |   .nextBox .next {position: absolute;}
265 |   .score {margin: 20px 0}
266 |   .score .row {font-size: 18px;letter-spacing: -1px;padding: 5px 0;}
267 |   .score .row h4 {display: inline-block;width: 60px;margin: 0;vertical-align: middle;}
268 |   .score .row span {display: inline-block;width: 90px;text-align: right;vertical-align: middle;}
269 |   .state {text-align: center;}
270 |   .statistics {margin-bottom: 20px}
271 |   .statistics .title {font-weight: bold}
272 |   .statistics .block .symbol {display: inline-block;width: 60px;font-weight: bold}
273 |   .statistics .block .number {display: inline-block;width: 40px}
274 |   /*.block:not(.shadow) >>> .cell {transition: all 100ms linear;}*/
275 | </style>
276 | 


--------------------------------------------------------------------------------
/app/tetris/soundService/soundService.mjs:
--------------------------------------------------------------------------------
 1 | import title from './sounds/title.mp3'
 2 | import bgm1 from './sounds/bgm1.mp3'
 3 | import bgm2 from './sounds/bgm2.mp3'
 4 | import bgm3 from './sounds/bgm3.mp3'
 5 | import bgm4 from './sounds/bgm4.mp3'
 6 | import complete from './sounds/complete.mp3'
 7 | import gameover from './sounds/gameover.mp3'
 8 | import drop from './sounds/drop.mp3'
 9 | import lineClear from './sounds/lineClear.mp3'
10 | import _ from 'lodash'
11 | 
12 | const audios = {
13 |   title,
14 |   bgm1,
15 |   bgm2,
16 |   bgm3,
17 |   bgm4,
18 |   complete,
19 |   gameover,
20 |   drop,
21 |   lineClear
22 | }
23 | 
24 | export default {
25 |   data () {
26 |     return {
27 |       currentAudio: null,
28 |       muted: false
29 |     }
30 |   },
31 |   methods: {
32 |     getAudio (fileName) {
33 |       return new window.Audio(audios[fileName])
34 |     },
35 |     playEffect (name) {
36 |       !this.muted && this.getAudio(name).play()
37 |     },
38 |     playSound (name, isRepeat = false) {
39 |       if (this.currentAudio) this.currentAudio.pause()
40 |       this.currentAudio = this.getAudio(name)
41 |       if (isRepeat) this.currentAudio.loop = true
42 |       this.currentAudio.volume = 0.4
43 |       this.currentAudio.muted = this.muted
44 |       this.currentAudio.play()
45 |     },
46 |     pauseSound () {
47 |       this.currentAudio.pause()
48 |     },
49 |     resumeSound () {
50 |       this.currentAudio.play()
51 |     },
52 |     stopSound () {
53 |       if (this.currentAudio.currentTime > 0) {
54 |         this.currentAudio.pause()
55 |         this.currentAudio.currentTime = 0
56 |       }
57 |     },
58 |     muteSound () {
59 |       this.muted = !this.muted
60 |       _.assign(this.currentAudio, {muted: this.muted})
61 |     }
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/bgm1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/bgm1.mp3


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/bgm2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/bgm2.mp3


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/bgm3.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/bgm3.mp3


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/bgm4.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/bgm4.mp3


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/complete.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/complete.mp3


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/drop.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/drop.mp3


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/gameover.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/gameover.mp3


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/lineClear.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/lineClear.mp3


--------------------------------------------------------------------------------
/app/tetris/soundService/sounds/title.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/app/tetris/soundService/sounds/title.mp3


--------------------------------------------------------------------------------
/app/tetris/stageComputed.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   computed: {
 3 |     cellSize () { return this.stage.cellSize },
 4 |     width () { return this.stage.width },
 5 |     height () { return this.stage.height },
 6 |     blocks () { return this.stage.blocks },
 7 |     blockType () { return this.stage.blockType }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/tetris/tetris.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tetris">
 3 |     <player :stage="stage" :keys="{straight:32,left:37,rotate:38,right:39,down:40}" ref="player"/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   import player from './player.vue'
 9 |   import stageComputed from './stageComputed'
10 | 
11 |   export default {
12 |     name: 'tetris',
13 |     mixins: [stageComputed],
14 |     data () {
15 |       return {
16 |         stage: {
17 |           cellSize: 30,
18 |           width: 10,
19 |           height: 22,
20 |           blockType: {
21 |             I: [
22 |               [[-1, 1], [0, 1], [1, 1], [2, 1]],
23 |               [[1, 2], [1, 1], [1, 0], [1, -1]],
24 |               [[2, 0], [1, 0], [0, 0], [-1, 0]],
25 |               [[0, -1], [0, 0], [0, 1], [0, 2]]
26 |             ],
27 |             O: [
28 |               [[0, 0], [0, 1], [1, 1], [1, 0]],
29 |               [[0, 1], [1, 1], [1, 0], [0, 0]],
30 |               [[1, 1], [1, 0], [0, 0], [0, 1]],
31 |               [[1, 0], [0, 0], [0, 1], [1, 1]]
32 |             ],
33 |             T: [
34 |               [[0, 1], [-1, 0], [0, 0], [1, 0]],
35 |               [[1, 0], [0, 1], [0, 0], [0, -1]],
36 |               [[0, -1], [1, 0], [0, 0], [-1, 0]],
37 |               [[-1, 0], [0, -1], [0, 0], [0, 1]]
38 |             ],
39 |             S: [
40 |               [[0, 1], [1, 1], [-1, 0], [0, 0]],
41 |               [[1, 0], [1, -1], [0, 1], [0, 0]],
42 |               [[0, -1], [-1, -1], [1, 0], [0, 0]],
43 |               [[-1, 0], [-1, 1], [0, -1], [0, 0]]
44 |             ],
45 |             Z: [
46 |               [[-1, 1], [0, 1], [0, 0], [1, 0]],
47 |               [[1, 1], [1, 0], [0, 0], [0, -1]],
48 |               [[1, -1], [0, -1], [0, 0], [-1, 0]],
49 |               [[-1, -1], [-1, 0], [0, 0], [0, 1]]
50 |             ],
51 |             J: [
52 |               [[-1, 1], [-1, 0], [0, 0], [1, 0]],
53 |               [[1, 1], [0, 1], [0, 0], [0, -1]],
54 |               [[1, -1], [1, 0], [0, 0], [-1, 0]],
55 |               [[-1, -1], [0, -1], [0, 0], [0, 1]]
56 |             ],
57 |             L: [
58 |               [[1, 1], [1, 0], [0, 0], [-1, 0]],
59 |               [[1, -1], [0, -1], [0, 0], [0, 1]],
60 |               [[-1, -1], [-1, 0], [0, 0], [1, 0]],
61 |               [[-1, 1], [0, 1], [0, 0], [0, -1]]
62 |             ]
63 |           },
64 |           blocks: ['I', 'O', 'T', 'S', 'Z', 'J', 'L']
65 |         }
66 |       }
67 |     },
68 |     components: {player}
69 |   }
70 | </script>
71 | 
72 | 


--------------------------------------------------------------------------------
/app/util/Deferred.mjs:
--------------------------------------------------------------------------------
1 | export function Deferred () {
2 |   this.promise = new Promise((resolve, reject) => Object.assign(this, {resolve, reject}))
3 | }
4 | 


--------------------------------------------------------------------------------
/app/util/filters.mjs:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import _ from 'lodash'
 3 | 
 4 | Vue.filter('numberComma', n => `${n || 0}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','))
 5 | _.forEach(
 6 |   [
 7 |     'ceil',
 8 |     'floor',
 9 |     'max',
10 |     'maxBy',
11 |     'mean',
12 |     'meanBy',
13 |     'min',
14 |     'minBy',
15 |     'round',
16 |     'sum',
17 |     'sumBy',
18 |     'clamp',
19 |     'camelCase',
20 |     'capitalize',
21 |     'endsWith',
22 |     'escape',
23 |     'escapeRegExp',
24 |     'kebabCase',
25 |     'lowerCase',
26 |     'lowerFirst',
27 |     'pad',
28 |     'padEnd',
29 |     'padStart',
30 |     'parseInt',
31 |     'repeat',
32 |     'replace',
33 |     'snakeCase',
34 |     'split',
35 |     'startCase',
36 |     'startsWith',
37 |     'template',
38 |     'toLower',
39 |     'toUpper',
40 |     'trim',
41 |     'trimEnd',
42 |     'trimStart',
43 |     'truncate',
44 |     'unescape',
45 |     'upperCase',
46 |     'upperFirst',
47 |     'words'
48 |   ],
49 |   fn => Vue.filter(fn, _[fn])
50 | )
51 | 


--------------------------------------------------------------------------------
/app/util/util.mjs:
--------------------------------------------------------------------------------
 1 | import _ from 'lodash'
 2 | 
 3 | export function sum (a, b) {
 4 |   return a + b
 5 | }
 6 | 
 7 | let lodash = _.runInContext()
 8 | export let lodashMixin = _(['pull', 'pullAll', 'pullAllBy', 'pullAllWith', 'pullAt', 'remove'])
 9 |   .map(fnName => {
10 |     let fn = lodash[fnName]
11 |     return [
12 |       fnName,
13 |       function (v, ...args) {
14 |         let ret = fn(v, ...args)
15 |         if (v instanceof Array) v.push()
16 |         return ret
17 |       }]
18 |   })
19 |   .fromPairs()
20 |   .value()
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-tetris",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "description": "Vue Tetris",
 6 |   "keywords": [],
 7 |   "devDependencies": {
 8 |     "babel-core": "^6.24.1",
 9 |     "babel-loader": "^7.0.0",
10 |     "babel-plugin-istanbul": "^5.1.0",
11 |     "babel-polyfill": "^6.26.0",
12 |     "babel-preset-es2015": "^6.24.1",
13 |     "css-loader": "^0.28.4",
14 |     "eslint": "^4.15.0",
15 |     "eslint-config-standard": "^10.2.1",
16 |     "eslint-plugin-html": "^4.0.1",
17 |     "eslint-plugin-import": "^2.7.0",
18 |     "eslint-plugin-jasmine": "^2.8.4",
19 |     "eslint-plugin-node": "^5.1.1",
20 |     "eslint-plugin-promise": "^3.5.0",
21 |     "eslint-plugin-standard": "^3.0.1",
22 |     "file-loader": "^0.11.2",
23 |     "jquery": "^3.2.1",
24 |     "lodash": "^4.17.4",
25 |     "node-sass": "^4.7.2",
26 |     "push-dir": "^0.4.1",
27 |     "sass-loader": "^6.0.6",
28 |     "style-loader": "^0.18.2",
29 |     "uglify-js": "^2.8.0",
30 |     "uglifyjs-webpack-plugin": "0.4.3",
31 |     "vue": "^2.5.13",
32 |     "vue-loader": "^13.6.2",
33 |     "vue-template-compiler": "^2.5.13",
34 |     "vuejs-loader": "^2.1.0",
35 |     "webpack": "^2.6.1",
36 |     "webpack-dev-server": "^2.5.1"
37 |   },
38 |   "scripts": {
39 |     "start": "webpack-dev-server --content-base www/ --hot",
40 |     "build": "webpack",
41 |     "build:prod": "webpack --env.prod",
42 |     "gh-pages": "npm run build:prod && node node_modules/push-dir/bin/push-dir --dir=www --branch=gh-pages --cleanup",
43 |     "lint": "eslint app test --ext .js,.mjs,.vue",
44 |     "lint:fix": "eslint app test --ext .js,.mjs,.vue --fix"
45 |   },
46 |   "main": "app.js",
47 |   "repository": {
48 |     "type": "git"
49 |   },
50 |   "author": {
51 |     "name": "Elevista",
52 |     "email": "sunnyholic@sunnyholic.com",
53 |     "homepage": "http://sunnyholic.com"
54 |   },
55 |   "license": "",
56 |   "dependencies": {
57 |     "animate.css": "^3.6.1"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/webpack.config.base.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | module.exports = function (name, env = {}) {
 4 |   return {
 5 |     name,
 6 |     module: {
 7 |       rules: [
 8 |         {test: /\.js$/, include: path.resolve(__dirname, name), loader: 'vuejs-loader'},
 9 |         {test: /\.mjs$/, loader: 'babel-loader'},
10 |         {test: /\.vue$/, include: path.resolve(__dirname, name), loader: 'vue-loader'},
11 |         {test: /\.css$/, loader: 'vue-style-loader!css-loader'},
12 |         {test: /\.scss$/, loader: 'vue-style-loader!css-loader!sass-loader'},
13 |         {test: /\.(png|woff|woff2|eot|ttf|svg|jpg|otf|gif|mp3)$/, loader: 'file-loader?outputPath=files/'}
14 |       ]
15 |     },
16 |     plugins: [new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', _: 'lodash', Vue: 'vue'})],
17 |     resolve: {alias: {'~': path.resolve(__dirname, `${name}`)}}
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | const baseConf = require('./webpack.config.base')
 4 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 5 | 
 6 | module.exports = function (env = {}) {
 7 |   let sourceMapFileNameTemplate = info => 'webpack:///' + info.resourcePath.replace(/\.vue$/, '.vue.html')
 8 |   let sourceMapFileNameDupTemplate = info => sourceMapFileNameTemplate(info) + info.query
 9 | 
10 |   let config = Object.assign(baseConf('app', env), {
11 |     entry: ['./app/boot.mjs'],
12 |     output: {
13 |       filename: 'bundle.js',
14 |       path: path.resolve(__dirname, 'www/'),
15 |       devtoolModuleFilenameTemplate: sourceMapFileNameTemplate,
16 |       devtoolFallbackModuleFilenameTemplate: sourceMapFileNameDupTemplate,
17 |     }
18 |   })
19 |   if (env.prod) {
20 |     process.env.NODE_ENV = 'production'
21 |     config.plugins.push(new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}), new UglifyJSPlugin())
22 |     config.entry.unshift('babel-polyfill')
23 |   } else {
24 |     config.devtool = 'inline-source-map'
25 |   }
26 |   return config
27 | }
28 | 


--------------------------------------------------------------------------------
/www/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Elevista/vue-tetris/d39d1cbba0849569d85ef71b6b54cb68f1941f39/www/favicon.ico


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Vue Tetris</title>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="initial-scale=1,user-scalable=no">
 8 | </head>
 9 | <body>
10 | <app></app>
11 | <script src="bundle.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------