765 lines
23 KiB
JavaScript
765 lines
23 KiB
JavaScript
Array.prototype.add = function(other) {
|
|
return this.map((x, i) => x + other[i])
|
|
}
|
|
|
|
Array.prototype.mul = function(k) {
|
|
return this.map(x => k * x)
|
|
}
|
|
|
|
Array.prototype.translate = function(vector) {
|
|
return this.map(pos => pos.add(vector))
|
|
}
|
|
|
|
Array.prototype.rotate = function(spin) {
|
|
return [-spin*this[1], spin*this[0]]
|
|
}
|
|
|
|
Array.prototype.pick = function() {
|
|
return this.splice(Math.floor(Math.random()*this.length), 1)[0]
|
|
}
|
|
|
|
|
|
const MINO_SIZE = 20
|
|
const NEXT_PIECES = 5
|
|
const HOLD_ROWS = 6
|
|
const HOLD_COLUMNS = 6
|
|
const MATRIX_ROWS = 20
|
|
const MATRIX_COLUMNS = 10
|
|
const NEXT_ROWS = 20
|
|
const NEXT_COLUMNS = 6
|
|
const HELD_PIECE_POSITION = [2, 2]
|
|
const FALLING_PIECE_POSITION = [4, 0]
|
|
const NEXT_PIECES_POSITIONS = Array.from({length: NEXT_PIECES}, (v, k) => [2, k*4+2])
|
|
const LOCK_DELAY = 500
|
|
const FALL_DELAY = 1000
|
|
const AUTOREPEAT_DELAY = 250
|
|
const AUTOREPEAT_PERIOD = 10
|
|
const ANIMATION_DELAY = 100
|
|
const TEMP_TEXTS_DELAY = 700
|
|
const MOVEMENT = {
|
|
LEFT: [-1, 0],
|
|
RIGHT: [ 1, 0],
|
|
DOWN: [ 0, 1]
|
|
}
|
|
const SPIN = {
|
|
CW: 1,
|
|
CCW: -1
|
|
}
|
|
const T_SPIN = {
|
|
NONE: "",
|
|
MINI: "MINI\nT-SPIN",
|
|
T_SPIN: "T-SPIN"
|
|
}
|
|
const T_SLOT = {
|
|
A: 0,
|
|
B: 1,
|
|
C: 3,
|
|
D: 2
|
|
}
|
|
const T_SLOT_POS = [[-1, -1], [1, -1], [1, 1], [-1, 1]]
|
|
const SCORES = [
|
|
{linesClearedName: "", "": 0, "MINI\nT-SPIN": 1, "T-SPIN": 4},
|
|
{linesClearedName: "SINGLE", "": 1, "MINI\nT-SPIN": 2, "T-SPIN": 8},
|
|
{linesClearedName: "DOUBLE", "": 3, "T-SPIN": 12},
|
|
{linesClearedName: "TRIPLE", "": 5, "T-SPIN": 16},
|
|
{linesClearedName: "TETRIS", "": 8},
|
|
]
|
|
const REPEATABLE_ACTIONS = [moveLeft, moveRight, softDrop]
|
|
const STATE = {
|
|
PLAYING: "PLAYING",
|
|
PAUSED: "PAUSE",
|
|
GAME_OVER: "GAME OVER"
|
|
}
|
|
var ACTIONS = {}
|
|
ACTIONS[STATE.PLAYING] = {
|
|
"ArrowLeft": moveLeft,
|
|
"ArrowRight": moveRight,
|
|
"ArrowDown": softDrop,
|
|
" ": hardDrop,
|
|
"ArrowUp": rotateCW,
|
|
"z": rotateCCW,
|
|
"c": hold,
|
|
"Escape": pause
|
|
}
|
|
ACTIONS[STATE.PAUSED] = {
|
|
"Escape": resume
|
|
}
|
|
ACTIONS[STATE.GAME_OVER] = {}
|
|
|
|
|
|
class Scheduler {
|
|
constructor() {
|
|
this.intervalTasks = new Map()
|
|
this.timeoutTasks = new Map()
|
|
}
|
|
|
|
setInterval(func, delay, ...args) {
|
|
this.intervalTasks.set(func, window.setInterval(func, delay, ...args))
|
|
}
|
|
|
|
setTimeout(func, delay, ...args) {
|
|
this.timeoutTasks.set(func, window.setTimeout(func, delay, ...args))
|
|
}
|
|
|
|
clearInterval(func) {
|
|
if (this.intervalTasks.has(func)) {
|
|
window.clearInterval(this.intervalTasks.get(func))
|
|
this.intervalTasks.delete(func)
|
|
}
|
|
}
|
|
|
|
clearTimeout(func) {
|
|
if (this.timeoutTasks.has(func)) {
|
|
window.clearTimeout(this.timeoutTasks.get(func))
|
|
this.timeoutTasks.delete(func)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
shapes = []
|
|
class Tetromino {
|
|
constructor(position=null, shape=null) {
|
|
this.pos = position
|
|
this.orientation = 0
|
|
this.rotatedLast = false
|
|
this.rotationPoint5Used = false
|
|
this.holdEnabled = true
|
|
this.locked = false
|
|
this.srs = {}
|
|
this.srs[SPIN.CW] = [
|
|
[[0, 0], [-1, 0], [-1, -1], [0, 2], [-1, 2]],
|
|
[[0, 0], [ 1, 0], [ 1, 1], [0, -2], [ 1, -2]],
|
|
[[0, 0], [ 1, 0], [ 1, -1], [0, 2], [ 1, 2]],
|
|
[[0, 0], [-1, 0], [-1, 1], [0, -2], [-1, -2]],
|
|
]
|
|
this.srs[SPIN.CCW] = [
|
|
[[0, 0], [ 1, 0], [ 1, -1], [0, 2], [ 1, 2]],
|
|
[[0, 0], [ 1, 0], [ 1, 1], [0, -2], [ 1, -2]],
|
|
[[0, 0], [-1, 0], [-1, -1], [0, 2], [-1, 2]],
|
|
[[0, 0], [-1, 0], [-1, 1], [0, 2], [-1, -2]],
|
|
]
|
|
if (shape)
|
|
this.shape = shape
|
|
else {
|
|
if (!shapes.length)
|
|
shapes = ['I', 'J', 'L', 'O', 'S', 'T', 'Z']
|
|
this.shape = shapes.pick()
|
|
}
|
|
switch(this.shape) {
|
|
case 'I':
|
|
this.color = "cyan"
|
|
this.lightColor = "rgb(234, 250, 250)"
|
|
this.ghostColor = "rgba(234, 250, 250, 0.5)"
|
|
this.minoesPos = [[-1, 0], [0, 0], [1, 0], [2, 0]]
|
|
this.srs[SPIN.CW] = [
|
|
[[ 1, 0], [-1, 0], [ 2, 0], [-1, 1], [ 2, -2]],
|
|
[[ 0, 1], [-1, 1], [ 2, 1], [-1, -1], [ 2, 2]],
|
|
[[-1, 0], [ 1, 0], [-2, 0], [ 1, -1], [-2, 2]],
|
|
[[ 0, 1], [ 1, -1], [-2, -1], [ 1, 1], [-2, -2]],
|
|
]
|
|
this.srs[SPIN.CCW] = [
|
|
[[ 0, 1], [-1, 1], [ 2, 1], [-1, -1], [ 2, 2]],
|
|
[[-1, 0], [ 1, 0], [-2, 0], [ 1, -1], [-2, 2]],
|
|
[[ 0, -1], [ 1, -1], [-2, -1], [ 1, 1], [-2, -2]],
|
|
[[ 1, 0], [-1, 0], [ 2, 0], [-1, 1], [ 2, -2]],
|
|
]
|
|
break
|
|
case 'J':
|
|
this.color = "blue"
|
|
this.lightColor = "rgb(230, 240, 255)"
|
|
this.ghostColor = "rgba(230, 240, 255, 0.5)"
|
|
this.minoesPos = [[-1, -1], [-1, 0], [0, 0], [1, 0]]
|
|
break
|
|
case 'L':
|
|
this.color = "orange"
|
|
this.lightColor = "rgb(255, 224, 204)"
|
|
this.ghostColor = "rgba(255, 224, 204, 0.5)"
|
|
this.minoesPos = [[-1, 0], [0, 0], [1, 0], [1, -1]]
|
|
break
|
|
case 'O':
|
|
this.color = "yellow"
|
|
this.lightColor = "rgb(255, 255, 230)"
|
|
this.ghostColor = "rgba(255, 255, 230, 0.5)"
|
|
this.minoesPos = [[0, 0], [1, 0], [0, -1], [1, -1]]
|
|
this.srs[SPIN.CW] = [[]]
|
|
this.srs[SPIN.CCW] = [[]]
|
|
break
|
|
case 'S':
|
|
this.color = "green"
|
|
this.lightColor = "rgb(236, 255, 230)"
|
|
this.ghostColor = "rgba(236, 255, 230, 0.5)"
|
|
this.minoesPos = [[-1, 0], [0, 0], [0, -1], [1, -1]]
|
|
break
|
|
case 'T':
|
|
this.color = "magenta"
|
|
this.lightColor= "rgb(242, 230, 255)"
|
|
this.ghostColor = "rgba(242, 230, 255, 0.5)"
|
|
this.minoesPos = [[-1, 0], [0, 0], [1, 0], [0, -1]]
|
|
break
|
|
case 'Z':
|
|
this.color = "red"
|
|
this.lightColor = "rgb(255, 230, 230)"
|
|
this.ghostColor = "rgba(255, 230, 230, 0.5)"
|
|
this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]]
|
|
break
|
|
}
|
|
}
|
|
|
|
get minoesAbsPos() {
|
|
return this.minoesPos.translate(this.pos)
|
|
}
|
|
|
|
draw(context, ghost_pos=[0, 0]) {
|
|
const color = this.locked ? this.lightColor : this.color
|
|
if (ghost_pos[1]) {
|
|
context.save()
|
|
context.shadowColor = this.ghostColor
|
|
context.shadowOffsetX = 0
|
|
context.shadowOffsetY = (ghost_pos[1]-this.pos[1]) * MINO_SIZE
|
|
context.shadowBlur = 3
|
|
this.minoesAbsPos.forEach(pos => drawMino(context, pos, color))
|
|
context.restore()
|
|
}
|
|
this.minoesAbsPos.forEach(pos => drawMino(context, pos, this.lightColor, color, ghost_pos))
|
|
}
|
|
}
|
|
|
|
|
|
function drawMino(context, pos, color1, color2=null, spotlight=[0, 0]) {
|
|
if (color2) {
|
|
var center = pos.add([0.5, 0.5])
|
|
spotlight = spotlight.add([0.5, 0.5])
|
|
var glint = spotlight.mul(0.1).add(center.mul(0.9)).mul(MINO_SIZE)
|
|
const gradient = context.createRadialGradient(
|
|
...glint, 2, ...glint.add([6, 4]), 2*MINO_SIZE
|
|
)
|
|
gradient.addColorStop(0, color1)
|
|
gradient.addColorStop(1, color2)
|
|
context.fillStyle = gradient
|
|
}
|
|
else
|
|
context.fillStyle = color1
|
|
var topLeft = pos.mul(MINO_SIZE)
|
|
context.fillRect(...topLeft, MINO_SIZE, MINO_SIZE)
|
|
context.lineWidth = 0.5
|
|
context.strokeStyle = "white"
|
|
context.strokeRect(...topLeft, MINO_SIZE, MINO_SIZE)
|
|
}
|
|
|
|
|
|
class HoldQueue {
|
|
constructor(context) {
|
|
this.context = context
|
|
this.piece = null
|
|
this.width = HOLD_COLUMNS*MINO_SIZE
|
|
this.height = HOLD_ROWS*MINO_SIZE
|
|
}
|
|
|
|
draw() {
|
|
this.context.clearRect(0, 0, this.width, this.height)
|
|
if (state != STATE.PAUSED) {
|
|
if (this.piece)
|
|
this.piece.draw(this.context)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
timeFormat = new Intl.DateTimeFormat("en-US", {
|
|
hour: "numeric", minute: "2-digit", second: "2-digit", hourCycle: "h24", timeZone: "UTC"
|
|
}).format
|
|
|
|
|
|
class Stats {
|
|
constructor (div) {
|
|
this.div = div
|
|
this._score = 0
|
|
this.highScore = 0
|
|
this.goal = 0
|
|
this.linesCleared = 0
|
|
this.startTime = Date.now()
|
|
this.pauseTime = 0
|
|
this.combo = -1
|
|
this.lockDelay = LOCK_DELAY
|
|
this.fallDelay = FALL_DELAY
|
|
}
|
|
|
|
get score() {
|
|
return this._score
|
|
}
|
|
|
|
set score(score) {
|
|
this._score = score
|
|
if (score > this.highScore)
|
|
this.highScore = score
|
|
}
|
|
|
|
newLevel(level=null) {
|
|
if (level)
|
|
this.level = level
|
|
else
|
|
this.level++
|
|
printTempTexts(["LEVEL", this.level])
|
|
this.goal += 5 * this.level
|
|
if (this.level <= 20)
|
|
this.fallDelay = 1000 * Math.pow(0.8 - ((this.level - 1) * 0.007), this.level - 1)
|
|
if (this.level > 15)
|
|
this.lockDelay = 500 * Math.pow(0.9, this.level - 15)
|
|
}
|
|
|
|
locksDown(tSpin, linesCleared) {
|
|
var pattern_name = []
|
|
var pattern_score = 0
|
|
var combo_score = 0
|
|
|
|
if (tSpin)
|
|
pattern_name.push(tSpin)
|
|
if (linesCleared) {
|
|
pattern_name.push(SCORES[linesCleared].linesClearedName)
|
|
this.combo++
|
|
}
|
|
else
|
|
this.combo = -1
|
|
|
|
if (linesCleared || tSpin) {
|
|
pattern_score = SCORES[linesCleared][tSpin]
|
|
this.goal -= pattern_score
|
|
pattern_score *= 100 * this.level
|
|
pattern_name = pattern_name.join("\n")
|
|
}
|
|
if (this.combo >= 1)
|
|
combo_score = (linesCleared == 1 ? 20 : 50) * this.combo * this.level
|
|
|
|
this.score += pattern_score + combo_score
|
|
|
|
if (pattern_score)
|
|
printTempTexts([pattern_name, pattern_score])
|
|
if (combo_score)
|
|
printTempTexts([`COMBO x${this.combo}`, combo_score])
|
|
}
|
|
|
|
print() {
|
|
this.div.innerHTML = `${this.score}<br/>${this.highScore}<br/>${this.level}<br/>${this.goal}<br/>${this.linesCleared}<br/>${timeFormat(Date.now() - this.startTime)}`
|
|
}
|
|
}
|
|
|
|
|
|
class Matrix {
|
|
constructor(context) {
|
|
this.context = context
|
|
this.context.textAlign = "center"
|
|
this.context.textBaseline = "center"
|
|
this.context.font = "3vw 'Share Tech', sans-serif"
|
|
this.cells = Array.from(Array(MATRIX_ROWS+3), row => Array(MATRIX_COLUMNS))
|
|
this.width = MATRIX_COLUMNS*MINO_SIZE
|
|
this.height = MATRIX_ROWS*MINO_SIZE
|
|
this.centerX = this.width / 2
|
|
this.centerY = this.height / 2
|
|
this.piece = null
|
|
this.trail = {
|
|
minoesPos: [],
|
|
height: 0,
|
|
gradient: null
|
|
}
|
|
this.linesCleared = []
|
|
}
|
|
|
|
cellIsOccupied(x, y) {
|
|
return 0 <= x && x < MATRIX_COLUMNS && y < MATRIX_ROWS ? this.cells[y+3][x] : true
|
|
}
|
|
|
|
spaceToMove(minoesAbsPos) {
|
|
return !minoesAbsPos.some(pos => this.cellIsOccupied(...pos))
|
|
}
|
|
|
|
draw() {
|
|
this.context.clearRect(0, 0, this.width, this.height)
|
|
|
|
// grid
|
|
this.context.strokeStyle = "rgba(128, 128, 128, 128)"
|
|
this.context.lineWidth = 0.5
|
|
this.context.beginPath()
|
|
for (var x = 0; x <= this.width; x += MINO_SIZE) {
|
|
this.context.moveTo(x, 0);
|
|
this.context.lineTo(x, this.height);
|
|
}
|
|
for (var y = 0; y <= this.height; y += MINO_SIZE) {
|
|
this.context.moveTo(0, y);
|
|
this.context.lineTo(this.width, y);
|
|
}
|
|
this.context.stroke()
|
|
|
|
if (state != STATE.PAUSED) {
|
|
// ghost position
|
|
for (var ghost_pos = Array.from(this.piece.pos); this.spaceToMove(this.piece.minoesPos.translate(ghost_pos)); ghost_pos[1]++) {}
|
|
ghost_pos[1]--
|
|
|
|
// locked minoes
|
|
this.cells.slice(3).forEach((row, y) => row.forEach((colors, x) => {
|
|
if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos)
|
|
}))
|
|
|
|
// trail
|
|
if (this.trail.height) {
|
|
this.context.fillStyle = this.trail.gradient
|
|
this.trail.minoesPos.forEach(topLeft => {
|
|
this.context.fillRect(...topLeft, MINO_SIZE, this.trail.height)
|
|
})
|
|
}
|
|
|
|
// falling piece
|
|
if (this.piece)
|
|
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
|
|
var texts = []
|
|
switch(state) {
|
|
case STATE.PLAYING:
|
|
if (tempTexts.length)
|
|
texts = tempTexts[0]
|
|
break
|
|
case STATE.PAUSED:
|
|
texts = ["PAUSED"]
|
|
break
|
|
case STATE.GAME_OVER:
|
|
texts = ["GAME", "OVER"]
|
|
}
|
|
if (texts.length) {
|
|
this.context.save()
|
|
this.context.shadowColor = "black"
|
|
this.context.shadowOffsetX = 1
|
|
this.context.shadowOffsetY = 1
|
|
this.context.shadowBlur = 2
|
|
this.context.fillStyle = "white"
|
|
if (texts.length == 1)
|
|
this.context.fillText(texts[0], this.centerX, this.centerY)
|
|
else {
|
|
this.context.fillText(texts[0], this.centerX, this.centerY - 20)
|
|
this.context.fillText(texts[1], this.centerX, this.centerY + 20)
|
|
}
|
|
this.context.restore()
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
class NextQueue {
|
|
constructor(context) {
|
|
this.context = context
|
|
this.pieces = Array.from({length: NEXT_PIECES}, (v, k) => new Tetromino(NEXT_PIECES_POSITIONS[k]))
|
|
this.width = NEXT_COLUMNS*MINO_SIZE
|
|
this.height = NEXT_ROWS*MINO_SIZE
|
|
}
|
|
|
|
draw() {
|
|
this.context.clearRect(0, 0, this.width, this.height)
|
|
if (state != STATE.PAUSED) {
|
|
this.pieces.forEach(piece => piece.draw(this.context))
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function newLevel(startLevel) {
|
|
stats.newLevel(startLevel)
|
|
generationPhase()
|
|
}
|
|
|
|
function generationPhase(held_piece=null) {
|
|
if (!held_piece) {
|
|
matrix.piece = nextQueue.pieces.shift()
|
|
nextQueue.pieces.push(new Tetromino())
|
|
nextQueue.pieces.forEach((piece, i) => piece.pos = NEXT_PIECES_POSITIONS[i])
|
|
}
|
|
matrix.piece.pos = FALLING_PIECE_POSITION
|
|
if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos)))
|
|
fallingPhase()
|
|
else
|
|
gameOver()
|
|
}
|
|
|
|
function fallingPhase() {
|
|
scheduler.clearTimeout(lockPhase)
|
|
scheduler.clearTimeout(locksDown)
|
|
matrix.piece.locked = false
|
|
scheduler.setTimeout(lockPhase, stats.fallDelay)
|
|
}
|
|
|
|
function lockPhase() {
|
|
if (!move(MOVEMENT.DOWN)) {
|
|
matrix.piece.locked = true
|
|
if (!scheduler.timeoutTasks.has(locksDown))
|
|
scheduler.setTimeout(locksDown, stats.lockDelay)
|
|
}
|
|
requestAnimationFrame(draw)
|
|
}
|
|
|
|
function move(movement, testMinoesPos=matrix.piece.minoesPos) {
|
|
const testPos = matrix.piece.pos.add(movement)
|
|
if (matrix.spaceToMove(testMinoesPos.translate(testPos))) {
|
|
matrix.piece.pos = testPos
|
|
matrix.piece.minoesPos = testMinoesPos
|
|
if (movement != MOVEMENT.DOWN)
|
|
matrix.piece.rotatedLast = false
|
|
if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos.add(MOVEMENT.DOWN))))
|
|
fallingPhase()
|
|
else {
|
|
matrix.piece.locked = true
|
|
scheduler.clearTimeout(locksDown)
|
|
scheduler.setTimeout(locksDown, stats.lockDelay)
|
|
}
|
|
return true
|
|
}
|
|
else {
|
|
return false
|
|
}
|
|
}
|
|
|
|
function rotate(spin) {
|
|
const test_minoes_pos = matrix.piece.minoesPos.map(pos => pos.rotate(spin))
|
|
rotationPoint = 1
|
|
for (const movement of matrix.piece.srs[spin][matrix.piece.orientation]) {
|
|
if (move(movement, test_minoes_pos)) {
|
|
matrix.piece.orientation = (matrix.piece.orientation + spin + 4) % 4
|
|
matrix.piece.rotatedLast = true
|
|
if (rotationPoint == 5)
|
|
matrix.piece.rotationPoint5Used = true
|
|
return true
|
|
}
|
|
rotationPoint++
|
|
}
|
|
return false
|
|
}
|
|
|
|
function locksDown(){
|
|
scheduler.clearInterval(move)
|
|
if (matrix.piece.minoesAbsPos.every(pos => pos.y < 0))
|
|
game_over()
|
|
else {
|
|
matrix.piece.minoesAbsPos.forEach(pos => matrix.cells[pos[1]+3][pos[0]] = [matrix.piece.lightColor, matrix.piece.color])
|
|
|
|
// T-Spin detection
|
|
var tSpin = T_SPIN.NONE
|
|
if (matrix.piece.rotatedLast && matrix.piece.shape == "T") {
|
|
const tSlots = T_SLOT_POS.translate(matrix.piece.pos).map(pos => matrix.cellIsOccupied(pos)),
|
|
a = tSlots[(matrix.piece.orientation+T_SLOT.A)%4],
|
|
b = tSlots[(matrix.piece.orientation+T_SLOT.B)%4],
|
|
c = tSlots[(matrix.piece.orientation+T_SLOT.C)%4],
|
|
d = tSlots[(matrix.piece.orientation+T_SLOT.D)%4]
|
|
if (a && b && (c || d))
|
|
tSpin = T_SPIN.T_SPIN
|
|
else if (c && d && (a || b))
|
|
tSpin = matrix.piece.rotationPoint5Used ? T_SPIN.T_SPIN : T_SPIN.MINI
|
|
}
|
|
|
|
// Complete lines
|
|
matrix.linesCleared = []
|
|
matrix.cells.forEach((row, y) => {
|
|
if (row.filter(mino => mino.length).length == MATRIX_COLUMNS) {
|
|
matrix.cells.splice(y, 1)
|
|
matrix.cells.unshift(Array(MATRIX_COLUMNS))
|
|
matrix.linesCleared.push((y-3) * MINO_SIZE)
|
|
}
|
|
})
|
|
|
|
stats.locksDown(tSpin, matrix.linesCleared.length)
|
|
requestAnimationFrame(draw)
|
|
scheduler.setTimeout(clearLinesCleared, ANIMATION_DELAY)
|
|
|
|
if (stats.goal <= 0)
|
|
newLevel()
|
|
else
|
|
generationPhase()
|
|
}
|
|
}
|
|
|
|
function clearLinesCleared() {
|
|
matrix.linesCleared = []
|
|
requestAnimationFrame(draw)
|
|
}
|
|
|
|
function gameOver() {
|
|
state = STATE.GAME_OVER
|
|
scheduler.clearTimeout(lockPhase)
|
|
scheduler.clearTimeout(locksDown)
|
|
scheduler.clearInterval(clock)
|
|
requestAnimationFrame(draw)
|
|
}
|
|
|
|
function autorepeat() {
|
|
if (actionsToRepeat.length) {
|
|
actionsToRepeat[0]()
|
|
requestAnimationFrame(draw)
|
|
if (scheduler.timeoutTasks.has(autorepeat)) {
|
|
scheduler.clearTimeout(autorepeat)
|
|
scheduler.setInterval(autorepeat, AUTOREPEAT_PERIOD)
|
|
}
|
|
}
|
|
else {
|
|
scheduler.clearTimeout(autorepeat)
|
|
scheduler.clearInterval(autorepeat)
|
|
}
|
|
}
|
|
|
|
function keyDownHandler(e) {
|
|
if (!pressedKeys.has(e.key)) {
|
|
pressedKeys.add(e.key)
|
|
if (e.key in ACTIONS[state]) {
|
|
action = ACTIONS[state][e.key]
|
|
action()
|
|
requestAnimationFrame(draw)
|
|
if (REPEATABLE_ACTIONS.includes(action)) {
|
|
actionsToRepeat.unshift(action)
|
|
scheduler.clearTimeout(autorepeat)
|
|
scheduler.clearInterval(autorepeat)
|
|
if (action == softDrop) {
|
|
scheduler.setInterval(autorepeat, stats.fallDelay / 20)
|
|
}
|
|
else
|
|
scheduler.setTimeout(autorepeat, AUTOREPEAT_DELAY)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function keyUpHandler(e) {
|
|
pressedKeys.delete(e.key)
|
|
if (e.key in ACTIONS[state]) {
|
|
action = ACTIONS[state][e.key]
|
|
if (actionsToRepeat.includes(action)) {
|
|
actionsToRepeat.splice(actionsToRepeat.indexOf(action), 1)
|
|
if (!actionsToRepeat.length) {
|
|
scheduler.clearTimeout(autorepeat)
|
|
scheduler.clearInterval(autorepeat)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function moveLeft() {
|
|
move(MOVEMENT.LEFT);
|
|
}
|
|
|
|
function moveRight() {
|
|
move(MOVEMENT.RIGHT)
|
|
}
|
|
|
|
function softDrop() {
|
|
if (move(MOVEMENT.DOWN))
|
|
stats.score++
|
|
}
|
|
|
|
function hardDrop() {
|
|
scheduler.clearTimeout(lockPhase)
|
|
scheduler.clearTimeout(locksDown)
|
|
matrix.trail.minoesPos = Array.from(matrix.piece.minoesAbsPos).map(pos => pos.mul(MINO_SIZE))
|
|
for (matrix.trail.height=0; move(MOVEMENT.DOWN); matrix.trail.height += MINO_SIZE) {
|
|
stats.score += 2
|
|
}
|
|
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)
|
|
}
|
|
|
|
function clearTrail() {
|
|
matrix.trail.height = 0
|
|
requestAnimationFrame(draw)
|
|
}
|
|
|
|
function rotateCW() {
|
|
rotate(SPIN.CW)
|
|
}
|
|
|
|
function rotateCCW() {
|
|
rotate(SPIN.CCW)
|
|
}
|
|
|
|
function hold() {
|
|
if (this.matrix.piece.holdEnabled) {
|
|
this.matrix.piece.holdEnabled = false
|
|
scheduler.clearInterval(move)
|
|
scheduler.clearInterval(locksDown)
|
|
var shape = this.matrix.piece.shape
|
|
this.matrix.piece = this.holdQueue.piece
|
|
this.holdQueue.piece = new Tetromino(HELD_PIECE_POSITION, shape)
|
|
this.generationPhase(this.matrix.piece)
|
|
}
|
|
}
|
|
|
|
function pause() {
|
|
state = STATE.PAUSED
|
|
stats.pauseTime = Date.now() - stats.startTime
|
|
scheduler.clearTimeout(lockPhase)
|
|
scheduler.clearTimeout(locksDown)
|
|
scheduler.clearTimeout(autorepeat)
|
|
scheduler.clearInterval(clock)
|
|
}
|
|
|
|
function resume() {
|
|
state = STATE.PLAYING
|
|
stats.startTime = Date.now() - stats.pauseTime
|
|
scheduler.setTimeout(lockPhase, stats.fallDelay)
|
|
if (matrix.piece.locked)
|
|
scheduler.setTimeout(locksDown, stats.lockDelay)
|
|
requestAnimationFrame(draw)
|
|
scheduler.setInterval(clock, 1000)
|
|
}
|
|
|
|
function printTempTexts(texts) {
|
|
tempTexts.push(texts)
|
|
if (!scheduler.intervalTasks.has(delTempTexts))
|
|
scheduler.setInterval(delTempTexts, TEMP_TEXTS_DELAY)
|
|
}
|
|
|
|
function delTempTexts(self) {
|
|
if (tempTexts.length)
|
|
tempTexts.shift()
|
|
else
|
|
scheduler.clearInterval(delTempTexts)
|
|
}
|
|
|
|
function clock() {
|
|
stats.print()
|
|
}
|
|
|
|
function draw() {
|
|
holdQueue.draw()
|
|
stats.print()
|
|
matrix.draw()
|
|
nextQueue.draw()
|
|
}
|
|
|
|
window.onload = function() {
|
|
tempTexts = []
|
|
|
|
holdQueue = new HoldQueue(document.getElementById("hold").getContext("2d"))
|
|
stats = new Stats(document.getElementById("stats-values"))
|
|
matrix = new Matrix(document.getElementById("matrix").getContext("2d"))
|
|
nextQueue = new NextQueue(document.getElementById("next").getContext("2d"))
|
|
|
|
pressedKeys = new Set()
|
|
actionsToRepeat = []
|
|
addEventListener("keydown", keyDownHandler, false)
|
|
addEventListener("keyup", keyUpHandler, false)
|
|
|
|
state = STATE.PLAYING
|
|
scheduler = new Scheduler()
|
|
scheduler.setInterval(clock, 1000)
|
|
this.newLevel(1)
|
|
} |