diff --git a/index.html b/index.html index f802694..247f319 100644 --- a/index.html +++ b/index.html @@ -5,193 +5,9 @@ Webtris + Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer. - - \ No newline at end of file diff --git a/js/webtris.js b/js/webtris.js index 56ed4a0..dab7681 100644 --- a/js/webtris.js +++ b/js/webtris.js @@ -1 +1,181 @@ -console.log("OK") \ No newline at end of file +const MINO_SIZE = 20 +const LINES = 20 +const COLLUMNS = 10 +const INIT_POSITION = [4, -1] +const ACTION_KEY = { + MOVE_LEFT: "ArrowLeft", + MOVE_RIGHT: "ArrowRight", + SOFT_DROP: "ArrowDown", + ROTATE_CW: "ArrowUp", + ROTATE_CCW: "z" +} +const MOVEMENT = { + LEFT: [-1, 0], + RIGHT: [1, 0], + DOWN: [0, 1] +} +const SPIN = { + CW: -1, + CCW: 1 +} + + +class Tetromino { + constructor() { + this.pos = INIT_POSITION + this.orientation = 0 + this.rotated_last = false + this.rotation_point_5_used = false + this.hold_enabled = true + this.SRS = new Map([ + [ + 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]], + ] + ], + [ + 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]], + ] + ], + ]) + + } + + draw(context) { + for(const pos of this.minoes_pos) { + draw_mino(context, this.pos[0]+pos[0], this.pos[1]+pos[1], this.color) + } + } +} + + +class T_Tetrimino extends Tetromino { + constructor() { + super() + this.color = "magenta" + this.minoes_pos = [[-1, 0], [0, 0], [1, 0], [0, 1]] + } +} + + +function draw_mino(context, x, y, color) { + context.fillStyle = color + context.fillRect(x*MINO_SIZE, y*MINO_SIZE, MINO_SIZE, MINO_SIZE); + context.strokeStyle = "rgba(255, 255, 255, 128)"; + context.strokeRect(x*MINO_SIZE, y*MINO_SIZE, MINO_SIZE, MINO_SIZE); +} + +class Matrix { + constructor() { + this.cells = Array.from(Array(COLLUMNS), y => Array(LINES)) + } + + occupied_cell(x, y) { + if (0 <= x && x < COLLUMNS && y < LINES) + return this.cells[x][y] + else + return true + } + + space_to_move(piece_pos, minoes_pos) { + for (const mino_pos of minoes_pos) { + if (this.occupied_cell(piece_pos[0]+mino_pos[0], piece_pos[1]+mino_pos[1])) + return false + } + return true + } + + draw(context) { + // grid + context.strokeStyle = "rgba(128, 128, 128, 128)"; + context.beginPath(); + for (var x = 0; x <= COLLUMNS*MINO_SIZE; x += MINO_SIZE) { + context.moveTo(x, 0); + context.lineTo(x, matrixCanvas.height); + } + for (var y = 0; y <= LINES*MINO_SIZE; y += MINO_SIZE) { + context.moveTo(0, y); + context.lineTo(matrixCanvas.width, y); + } + context.stroke(); + } + +} + +function move(movement) { + const test_pos = [tetro.pos[0]+movement[0], tetro.pos[1]+movement[1]] + if (matrix.space_to_move(test_pos, tetro.minoes_pos)) { + tetro.pos = test_pos + draw() + } +} + +function rotate(spin) { + const text_minoes_pos = tetro.minoes_pos.map(pos => [spin*pos[1], pos[0]]) + rotation_point = 0 + for (const movement of tetro.SRS.get(spin)[tetro.orientation]) { + const test_pos = [tetro.pos[0]+movement[0], tetro.pos[1]+movement[1]] + if (matrix.space_to_move(test_pos, text_minoes_pos)) { + tetro.pos = test_pos + tetro.minoes_pos = text_minoes_pos + tetro.orientation = (tetro.orientation + spin + 4) % 4 + draw() + break; + } + rotation_point++ + } +} + +function fall() { + move(MOVEMENT.DOWN); +} + +function keyDownHandler(e) { + switch(e.key){ + case ACTION_KEY.MOVE_LEFT: + move(MOVEMENT.LEFT); + break + case ACTION_KEY.MOVE_RIGHT: + move(MOVEMENT.RIGHT); + break + case ACTION_KEY.SOFT_DROP: + move(MOVEMENT.DOWN); + break + case ACTION_KEY.ROTATE_CW: + rotate(SPIN.CW); + break + case ACTION_KEY.ROTATE_CCW: + rotate(SPIN.CCW); + break + } +} + +function keyUpHandler(e) { +} + +function draw() { + matrixContext.clearRect(0, 0, COLLUMNS*MINO_SIZE, LINES*MINO_SIZE); + matrix.draw(matrixContext) + tetro.draw(matrixContext) +} + +window.onload = function() { + document.addEventListener("keydown", keyDownHandler, false); + document.addEventListener("keyup", keyUpHandler, false); + setInterval(fall, 1000); + + matrixCanvas = document.getElementById("matrix"); + matrixContext = matrixCanvas.getContext("2d"); + + tetro = new T_Tetrimino() + matrix = new Matrix() +} \ No newline at end of file