adrien/Webtris
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

line clear animation

Browse Source
This commit is contained in:
Adrien MALINGREY 2019-10-27 13:20:45 +01:00
parent eba036cffd
commit 29387428b6
1 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
js/webtris.js
View File

@ -34,7 +34,7 @@ const LOCK_DELAY = 500
const FALL_DELAY = 1000 const FALL_DELAY = 1000
const AUTOREPEAT_DELAY = 250 const AUTOREPEAT_DELAY = 250
const AUTOREPEAT_PERIOD = 10 const AUTOREPEAT_PERIOD = 10
const ANIMATION_DELAY = 67 const ANIMATION_DELAY = 100
const TEMP_TEXTS_DELAY = 700 const TEMP_TEXTS_DELAY = 700
const MOVEMENT = { const MOVEMENT = {
LEFT: [-1, 0], LEFT: [-1, 0],
@ -357,8 +357,12 @@ class Matrix {
this.centerX = this.width / 2 this.centerX = this.width / 2
this.centerY = this.height / 2 this.centerY = this.height / 2
this.piece = null this.piece = null
this.trail_length = 0 this.trail = {
this.trailStartPos = [] minoesPos: [],
height: 0,
gradient: null
}
this.linesCleared = []
} }
cellIsOccupied(x, y) { cellIsOccupied(x, y) {
@ -397,20 +401,28 @@ class Matrix {
})) }))
// trail // trail
if (this.trail_length) { if (this.trail.height) {
var height = this.trail_length * MINO_SIZE this.context.fillStyle = this.trail.gradient
var gradient = this.context.createLinearGradient(0, 0, 0, height) this.trail.minoesPos.forEach(topLeft => {
gradient.addColorStop(0,"rgba(255, 255, 255, 0)") this.context.fillRect(...topLeft, MINO_SIZE, this.trail.height)
gradient.addColorStop(1, this.piece.ghostColor )
this.context.fillStyle = gradient
this.trailStartPos.forEach(topLeft => {
this.context.fillRect(...topLeft, MINO_SIZE, height)
}) })
} }
// falling piece // falling piece
if (this.piece) if (this.piece)
this.piece.draw(this.context, ghost_pos) this.piece.draw(this.context, ghost_pos)
// Lines cleared
if (this.linesCleared.length) {
this.context.save()
this.context.shadowColor = "white"
this.context.shadowOffsetX = 0
this.context.shadowOffsetY = 0
this.context.shadowBlur = 5
this.context.fillStyle = "white"
this.linesCleared.forEach(y => this.context.fillRect(0, y, this.width, MINO_SIZE))
this.context.restore()
}
} }
// text // text
@ -555,16 +567,17 @@ function locksDown(){
} }
// Complete lines // Complete lines
var linesCleared = [] matrix.linesCleared = []
matrix.cells.forEach((row, y) => { matrix.cells.forEach((row, y) => {
if (row.filter(mino => mino.length).length == MATRIX_COLUMNS) { if (row.filter(mino => mino.length).length == MATRIX_COLUMNS) {
matrix.cells.splice(y, 1) matrix.cells.splice(y, 1)
matrix.cells.unshift(Array(MATRIX_COLUMNS)) matrix.cells.unshift(Array(MATRIX_COLUMNS))
linesCleared.push(y * MINO_SIZE) matrix.linesCleared.push((y-3) * MINO_SIZE)
} }
}) })
scheduler.setTimeout(clearLinesCleared, ANIMATION_DELAY)
stats.locksDown(tSpin, linesCleared.length) stats.locksDown(tSpin, matrix.linesCleared.length)
if (stats.goal <= 0) if (stats.goal <= 0)
newLevel() newLevel()
@ -573,6 +586,10 @@ function locksDown(){
} }
} }
function clearLinesCleared() {
matrix.linesCleared = []
}
function gameOver() { function gameOver() {
state = STATE.GAME_OVER state = STATE.GAME_OVER
scheduler.clearTimeout(lockPhase) scheduler.clearTimeout(lockPhase)
@ -647,16 +664,19 @@ function softDrop() {
function hardDrop() { function hardDrop() {
scheduler.clearTimeout(lockPhase) scheduler.clearTimeout(lockPhase)
scheduler.clearTimeout(locksDown) scheduler.clearTimeout(locksDown)
matrix.trailStartPos = Array.from(matrix.piece.minoesAbsPos).map(pos => pos.mul(MINO_SIZE)) matrix.trail.minoesPos = Array.from(matrix.piece.minoesAbsPos).map(pos => pos.mul(MINO_SIZE))
for (this.matrix.trail_length=0; move(MOVEMENT.DOWN); this.matrix.trail_length++) { for (matrix.trail.height=0; move(MOVEMENT.DOWN); matrix.trail.height += MINO_SIZE) {
stats.score += 2 stats.score += 2
} }
locksDown() locksDown()
matrix.trail.gradient = matrix.context.createLinearGradient(0, 0, 0, matrix.trail.height)
matrix.trail.gradient.addColorStop(0,"rgba(255, 255, 255, 0)")
matrix.trail.gradient.addColorStop(1, matrix.piece.ghostColor)
scheduler.setTimeout(clearTrail, ANIMATION_DELAY) scheduler.setTimeout(clearTrail, ANIMATION_DELAY)
} }
function clearTrail() { function clearTrail() {
matrix.trail_length = 0 matrix.trail.height = 0
requestAnimationFrame(draw) requestAnimationFrame(draw)
} }