typetris
Download
const primaryColor = '#CE5127'
const primaryColorLight = ' #E98A70'
const secondaryColor = '#27A2CC'
const secondaryColorLight = '#86CFE4'
const textColor = '#4B4B4B'
const backgroundColor = '#F9F4F2'
const WIDTH = 10
const HEIGHT = 20 // TODO 24
const CELLSIZE = 16
// colors are material 700const blocks = [
{
color: '#0097A7', // cyan
coords: [
[[0, 1], [1, 1], [2, 1], [3, 1]],
[[1, 0], [1, 1], [1, 2], [1, 3]],
[[0, 1], [1, 1], [2, 1], [3, 1]],
[[1, 0], [1, 1], [1, 2], [1, 3]]],
shape: 'I'
}, {
color: '#7B1FA2', // purple
coords: [
[[0, 1], [1, 1], [2, 1], [2, 2]],
[[1, 0], [1, 1], [1, 2], [2, 0]],
[[0, 1], [0, 2], [1, 2], [2, 2]],
[[1, 2], [2, 0], [2, 1], [2, 2]]],
shape: 'J'
}, {
color: '#F57C00', // orange
coords: [
[[0, 1], [0, 2], [1, 1], [2, 1]],
[[1, 0], [1, 1], [1, 2], [2, 2]],
[[0, 2], [1, 2], [2, 1], [2, 2]],
[[1, 0], [2, 0], [2, 1], [2, 2]]],
shape: 'L'
}, {
color: '#FBC02D', // yellow
coords: [
[[1, 1], [1, 2], [2, 1], [2, 2]],
[[1, 1], [1, 2], [2, 1], [2, 2]],
[[1, 1], [1, 2], [2, 1], [2, 2]],
[[1, 1], [1, 2], [2, 1], [2, 2]]],
shape: 'O'
}, {
color: '#388E3C', // green
coords: [
[[0, 2], [1, 1], [1, 2], [2, 1]],
[[1, 0], [1, 1], [2, 1], [2, 2]],
[[0, 2], [1, 1], [1, 2], [2, 1]],
[[1, 0], [1, 1], [2, 1], [2, 2]]],
shape: 'S'
}, {
color: '#1976D2', // blue
coords: [
[[0, 1], [1, 1], [1, 2], [2, 1]],
[[1, 0], [1, 1], [1, 2], [2, 1]],
[[0, 2], [1, 1], [1, 2], [2, 2]],
[[1, 1], [2, 0], [2, 1], [2, 2]]],
shape: 'T'
}, {
color: '#D32F2F', // red
coords: [
[[0, 1], [1, 1], [1, 2], [2, 2]],
[[1, 1], [1, 2], [2, 0], [2, 1]],
[[0, 1], [1, 1], [1, 2], [2, 2]],
[[1, 1], [1, 2], [2, 0], [2, 1]]],
shape: 'Z'
}
]
// IRenderer provides primitives to render blocks and score statisticsinterface IRenderer {
draw(x: number, y: number, color: string): void
score(score: number, lines: number): void
}
class CanvasRenderer implements IRenderer {
private context: CanvasRenderingContext2D | null
constructor(canvas: HTMLCanvasElement) {
canvas.setAttribute('width', '' + (WIDTH + 6) * CELLSIZE)
canvas.setAttribute('height', '' + HEIGHT * CELLSIZE)
this.context = canvas.getContext('2d')
this.context!.font = '18px arial'
this.context!.textAlign = 'center'
}
public draw(x: number, y: number, color: string): void {
this.context!.fillStyle = color
this.context!.fillRect(x * CELLSIZE, y * CELLSIZE, CELLSIZE, CELLSIZE)
}
public score(score: number, lines: number): void {
// clear background
this.context!.fillStyle = secondaryColor
this.context!.fillRect(WIDTH * CELLSIZE, 0, WIDTH * CELLSIZE, HEIGHT * CELLSIZE)
// draw text
this.context!.save()
this.context!.fillStyle = 'white'
this.context!.fillText('Score', CELLSIZE * 13, CELLSIZE * 11)
this.context!.fillText(score.toString(), CELLSIZE * 13, CELLSIZE * 13)
this.context!.fillText('Lines', CELLSIZE * 13, CELLSIZE * 17)
this.context!.fillText(lines.toString(), CELLSIZE * 13, CELLSIZE * 19)
}
}
class Block {
public coords: number[][][] = [[[]]]
public color: string = ''
public shape: string = ''
}
class Tetris {
private bucket: number[][]
private block: Block
private nextBlock: Block
private timer = 0
private pause = false
// player variables
private rotation = 0
private column: number = 0
private row: number = 0
private score = 0
private lines = 0
constructor(private renderer: IRenderer) {
this.block = this.randomBlock()
this.nextBlock = this.randomBlock()
this.bucket = this.initBucket()
}
public newGame(): void {
this.score = 0
this.lines = 0
this.bucket = this.initBucket()
this.newBlock()
window.addEventListener('keydown', (event: KeyboardEvent) => {
if (event.defaultPrevented) {
return
}
if (event.code == 'KeyP') {
this.pause = !this.pause
if (!this.pause) {
this.fall() // anti-cheat
}
event.preventDefault()
}
if(this.pause) {
return
}
switch (event.code) {
case 'ArrowLeft': case 'KeyJ':
this.move(-1, 0, this.rotation)
event.preventDefault()
break
case 'ArrowUp': case 'KeyK':
this.move(0, 0, (this.rotation + 1) % 4)
event.preventDefault()
break
case 'ArrowRight': case 'KeyL':
this.move(1, 0, this.rotation)
event.preventDefault()
break
case 'Space':
this.drop()
event.preventDefault()
break
case 'ArrowDown': case 'KeyI': case 'KeyM':
this.fall()
event.preventDefault()
break
}
}, true)
}
public newBlock(): void {
// clear preview
this.draw(WIDTH + 1, 0, this.nextBlock, 0, secondaryColorLight)
const clearedLines = this.sweepBucket()
this.redrawBucket()
// stats
const bonus = [0, 100, 300, 700, 1500]
this.lines += clearedLines
this.score += bonus[clearedLines]
this.renderer.score(this.score, this.lines)
// show preview
this.block = this.nextBlock
this.nextBlock = this.randomBlock()
this.draw(WIDTH + 1, 0, this.nextBlock, 0)
clearInterval(this.timer)
this.timer = setInterval(() => this.fall(), 650 - this.lines)
this.column = 3
this.row = 0
this.rotation = 0
if (!this.move(0, 0, this.rotation)) {
clearInterval(this.timer)
this.gameOver()
}
}
public move(deltaColumn: number, deltaRow: number, newRotation: number) {
const canMove = this.testBlock(deltaColumn, deltaRow, this.block, newRotation)
if (canMove) {
// clear previous block
this.draw(this.column, this.row, this.block, this.rotation, backgroundColor)
this.column += deltaColumn
this.row += deltaRow
this.rotation = newRotation
// draw block
this.draw(this.column, this.row, this.block, this.rotation)
}
return canMove
}
public fall() {
if (this.pause) {
return
}
if (!this.move(0, 1, this.rotation)) {
// block lands
this.setBuffer(blocks.indexOf(this.block), this.column, this.row, this.block, this.rotation)
this.newBlock()
}
}
public drop() {
clearInterval(this.timer)
this.timer = setInterval(() => this.fall(), 9)
this.score += (HEIGHT - this.row)
this.renderer.score(this.score, this.lines)
}
private draw(column: number, row: number, block: Block, rotation: number, color: string = block.color) {
for (const { x, y } of this.coords(block, rotation, column, row)) {
this.renderer.draw(x, y, color)
}
}
private initBucket(): number[][] {
return Array<number[]>(HEIGHT).fill([])
.map(() => Array<number>(WIDTH).fill(-1))
}
private setBuffer(set: number, column: number, row: number, block: Block, rotation: number) {
for (const { x, y } of this.coords(block, rotation, column, row)) {
this.bucket[y][x] = set
}
}
// testBlocks tests if a block can be placed and returns true if so, false otherwise
private testBlock(deltaColumn: number, deltaRow: number, block: Block, rotation: number): boolean {
const predicate = ({ x, y }: { x: number, y: number }) =>
x >= 0 && x < WIDTH && y < HEIGHT && this.bucket[y][x] < 0
return [...this.coords(block, rotation, this.column + deltaColumn, this.row + deltaRow)]
.every(predicate)
}
private *coords(block: Block, rotation: number, column: number, row: number): IterableIterator<{ x: number, y: number }> {
const coords = block.coords[rotation]
for (const coord of coords) {
const [x, y] = [column + coord[0], row + coord[1]]
yield { x, y }
}
}
private randomBlock(): Block {
return blocks[Math.floor(Math.random() * blocks.length)]
}
private sweepBucket(): number {
let linesCleared = 0
for (const [rowIndex, row] of this.bucket.entries()) {
const full = row.every(cell => cell >= 0)
if (full) {
this.bucket.splice(rowIndex, 1)
this.bucket.unshift(new Array(WIDTH).fill(-1))
linesCleared++
}
}
return linesCleared
}
private redrawBucket(): void {
this.bucket.forEach((row, y) => {
row.forEach((cell, x) => {
const color = cell >= 0 ? blocks[cell].color : backgroundColor
this.renderer.draw(x, y, color)
})
})
}
private gameOver() {
alert('Game over :-(')
this.newGame()
}
}
class Widget {
constructor() {
const template = `<canvas class="bucket"></canvas>`
document!.querySelector('.typetris')!.innerHTML = template
const canvas = <HTMLCanvasElement>document.querySelector('.typetris canvas')
const renderer = new CanvasRenderer(canvas)
const tetris = new Tetris(renderer)
tetris.newGame()
}
}
// tslint:disable-next-line: no-unused-expressionnew Widget()
const primaryColor = '#CE5127'
const primaryColorLight = ' #E98A70'
const secondaryColor = '#27A2CC'
const secondaryColorLight = '#86CFE4'
const textColor = '#4B4B4B'
const backgroundColor = '#F9F4F2'
const WIDTH = 10
const HEIGHT = 20 // TODO 24
const CELLSIZE = 16
// colors are material 700const blocks = [
{
color: '#0097A7', // cyan
coords: [
[[0, 1], [1, 1], [2, 1], [3, 1]],
[[1, 0], [1, 1], [1, 2], [1, 3]],
[[0, 1], [1, 1], [2, 1], [3, 1]],
[[1, 0], [1, 1], [1, 2], [1, 3]]],
shape: 'I'
}, {
color: '#7B1FA2', // purple
coords: [
[[0, 1], [1, 1], [2, 1], [2, 2]],
[[1, 0], [1, 1], [1, 2], [2, 0]],
[[0, 1], [0, 2], [1, 2], [2, 2]],
[[1, 2], [2, 0], [2, 1], [2, 2]]],
shape: 'J'
}, {
color: '#F57C00', // orange
coords: [
[[0, 1], [0, 2], [1, 1], [2, 1]],
[[1, 0], [1, 1], [1, 2], [2, 2]],
[[0, 2], [1, 2], [2, 1], [2, 2]],
[[1, 0], [2, 0], [2, 1], [2, 2]]],
shape: 'L'
}, {
color: '#FBC02D', // yellow
coords: [
[[1, 1], [1, 2], [2, 1], [2, 2]],
[[1, 1], [1, 2], [2, 1], [2, 2]],
[[1, 1], [1, 2], [2, 1], [2, 2]],
[[1, 1], [1, 2], [2, 1], [2, 2]]],
shape: 'O'
}, {
color: '#388E3C', // green
coords: [
[[0, 2], [1, 1], [1, 2], [2, 1]],
[[1, 0], [1, 1], [2, 1], [2, 2]],
[[0, 2], [1, 1], [1, 2], [2, 1]],
[[1, 0], [1, 1], [2, 1], [2, 2]]],
shape: 'S'
}, {
color: '#1976D2', // blue
coords: [
[[0, 1], [1, 1], [1, 2], [2, 1]],
[[1, 0], [1, 1], [1, 2], [2, 1]],
[[0, 2], [1, 1], [1, 2], [2, 2]],
[[1, 1], [2, 0], [2, 1], [2, 2]]],
shape: 'T'
}, {
color: '#D32F2F', // red
coords: [
[[0, 1], [1, 1], [1, 2], [2, 2]],
[[1, 1], [1, 2], [2, 0], [2, 1]],
[[0, 1], [1, 1], [1, 2], [2, 2]],
[[1, 1], [1, 2], [2, 0], [2, 1]]],
shape: 'Z'
}
]
// IRenderer provides primitives to render blocks and score statisticsinterface IRenderer {
draw(x: number, y: number, color: string): void
score(score: number, lines: number): void
}
class CanvasRenderer implements IRenderer {
private context: CanvasRenderingContext2D | null
constructor(canvas: HTMLCanvasElement) {
canvas.setAttribute('width', '' + (WIDTH + 6) * CELLSIZE)
canvas.setAttribute('height', '' + HEIGHT * CELLSIZE)
this.context = canvas.getContext('2d')
this.context!.font = '18px arial'
this.context!.textAlign = 'center'
}
public draw(x: number, y: number, color: string): void {
this.context!.fillStyle = color
this.context!.fillRect(x * CELLSIZE, y * CELLSIZE, CELLSIZE, CELLSIZE)
}
public score(score: number, lines: number): void {
// clear background
this.context!.fillStyle = secondaryColor
this.context!.fillRect(WIDTH * CELLSIZE, 0, WIDTH * CELLSIZE, HEIGHT * CELLSIZE)
// draw text
this.context!.save()
this.context!.fillStyle = 'white'
this.context!.fillText('Score', CELLSIZE * 13, CELLSIZE * 11)
this.context!.fillText(score.toString(), CELLSIZE * 13, CELLSIZE * 13)
this.context!.fillText('Lines', CELLSIZE * 13, CELLSIZE * 17)
this.context!.fillText(lines.toString(), CELLSIZE * 13, CELLSIZE * 19)
}
}
class Block {
public coords: number[][][] = [[[]]]
public color: string = ''
public shape: string = ''
}
class Tetris {
private bucket: number[][]
private block: Block
private nextBlock: Block
private timer = 0
private pause = false
// player variables
private rotation = 0
private column: number = 0
private row: number = 0
private score = 0
private lines = 0
constructor(private renderer: IRenderer) {
this.block = this.randomBlock()
this.nextBlock = this.randomBlock()
this.bucket = this.initBucket()
}
public newGame(): void {
this.score = 0
this.lines = 0
this.bucket = this.initBucket()
this.newBlock()
window.addEventListener('keydown', (event: KeyboardEvent) => {
if (event.defaultPrevented) {
return
}
if (event.code == 'KeyP') {
this.pause = !this.pause
if (!this.pause) {
this.fall() // anti-cheat
}
event.preventDefault()
}
if(this.pause) {
return
}
switch (event.code) {
case 'ArrowLeft': case 'KeyJ':
this.move(-1, 0, this.rotation)
event.preventDefault()
break
case 'ArrowUp': case 'KeyK':
this.move(0, 0, (this.rotation + 1) % 4)
event.preventDefault()
break
case 'ArrowRight': case 'KeyL':
this.move(1, 0, this.rotation)
event.preventDefault()
break
case 'Space':
this.drop()
event.preventDefault()
break
case 'ArrowDown': case 'KeyI': case 'KeyM':
this.fall()
event.preventDefault()
break
}
}, true)
}
public newBlock(): void {
// clear preview
this.draw(WIDTH + 1, 0, this.nextBlock, 0, secondaryColorLight)
const clearedLines = this.sweepBucket()
this.redrawBucket()
// stats
const bonus = [0, 100, 300, 700, 1500]
this.lines += clearedLines
this.score += bonus[clearedLines]
this.renderer.score(this.score, this.lines)
// show preview
this.block = this.nextBlock
this.nextBlock = this.randomBlock()
this.draw(WIDTH + 1, 0, this.nextBlock, 0)
clearInterval(this.timer)
this.timer = setInterval(() => this.fall(), 650 - this.lines)
this.column = 3
this.row = 0
this.rotation = 0
if (!this.move(0, 0, this.rotation)) {
clearInterval(this.timer)
this.gameOver()
}
}
public move(deltaColumn: number, deltaRow: number, newRotation: number) {
const canMove = this.testBlock(deltaColumn, deltaRow, this.block, newRotation)
if (canMove) {
// clear previous block
this.draw(this.column, this.row, this.block, this.rotation, backgroundColor)
this.column += deltaColumn
this.row += deltaRow
this.rotation = newRotation
// draw block
this.draw(this.column, this.row, this.block, this.rotation)
}
return canMove
}
public fall() {
if (this.pause) {
return
}
if (!this.move(0, 1, this.rotation)) {
// block lands
this.setBuffer(blocks.indexOf(this.block), this.column, this.row, this.block, this.rotation)
this.newBlock()
}
}
public drop() {
clearInterval(this.timer)
this.timer = setInterval(() => this.fall(), 9)
this.score += (HEIGHT - this.row)
this.renderer.score(this.score, this.lines)
}
private draw(column: number, row: number, block: Block, rotation: number, color: string = block.color) {
for (const { x, y } of this.coords(block, rotation, column, row)) {
this.renderer.draw(x, y, color)
}
}
private initBucket(): number[][] {
return Array<number[]>(HEIGHT).fill([])
.map(() => Array<number>(WIDTH).fill(-1))
}
private setBuffer(set: number, column: number, row: number, block: Block, rotation: number) {
for (const { x, y } of this.coords(block, rotation, column, row)) {
this.bucket[y][x] = set
}
}
// testBlocks tests if a block can be placed and returns true if so, false otherwise
private testBlock(deltaColumn: number, deltaRow: number, block: Block, rotation: number): boolean {
const predicate = ({ x, y }: { x: number, y: number }) =>
x >= 0 && x < WIDTH && y < HEIGHT && this.bucket[y][x] < 0
return [...this.coords(block, rotation, this.column + deltaColumn, this.row + deltaRow)]
.every(predicate)
}
private *coords(block: Block, rotation: number, column: number, row: number): IterableIterator<{ x: number, y: number }> {
const coords = block.coords[rotation]
for (const coord of coords) {
const [x, y] = [column + coord[0], row + coord[1]]
yield { x, y }
}
}
private randomBlock(): Block {
return blocks[Math.floor(Math.random() * blocks.length)]
}
private sweepBucket(): number {
let linesCleared = 0
for (const [rowIndex, row] of this.bucket.entries()) {
const full = row.every(cell => cell >= 0)
if (full) {
this.bucket.splice(rowIndex, 1)
this.bucket.unshift(new Array(WIDTH).fill(-1))
linesCleared++
}
}
return linesCleared
}
private redrawBucket(): void {
this.bucket.forEach((row, y) => {
row.forEach((cell, x) => {
const color = cell >= 0 ? blocks[cell].color : backgroundColor
this.renderer.draw(x, y, color)
})
})
}
private gameOver() {
alert('Game over :-(')
this.newGame()
}
}
class Widget {
constructor() {
const template = `<canvas class="bucket"></canvas>`
document!.querySelector('.typetris')!.innerHTML = template
const canvas = <HTMLCanvasElement>document.querySelector('.typetris canvas')
const renderer = new CanvasRenderer(canvas)
const tetris = new Tetris(renderer)
tetris.newGame()
}
}
// tslint:disable-next-line: no-unused-expressionnew Widget()