JSFiddle - React, Tailwind, and code Playground

by peka

HTML

<canvas id="tetris" width="110" height="220"></canvas>
<br/>
<button id="start" onclick="start()">Start</button>
<button id="stop" onclick="stop()" disabled="">Stop</button>
<br/>Brick Game Engine Test 3.
<br/>Se usan las teclas W A S D.

CSS

body {
    background-color:silver
}
#tetris {
    background-color:#739858
}

JavaScript

var canvas = document.getElementById('tetris');
var pen = canvas.getContext('2d');
var loop;
var lcd;
var fondo = [];
var entidades = [];
var efectos = [];

var mapa = [
    [1, 1, 1],
    [1, 0, 1],
    [1, 0, 1]
];
var running = false;
//var pixeles = [];
var player = new Pixel(50, 50);
player.bColor = "red";
player.iColor = "#739858";
player.rColor = "red";
entidades.push(player);
//entidades.push(pixeles);
var clock;

onkeydown = function (e) {
    //alert(e.keycode)
    var up = 87; //W
    var down = 83; //S
    var left = 65; //A
    var right = 68; //D
    var xb = 88; //X
    var zb = 90; //Z
    if (running) {
        switch (e.keyCode) {
            case up:
                player.up();
                break; // 10px arriba
            case down:
                player.down();
                break; // 10px abajo
            case left:
                player.left();
                break; // 10px izquierda
            case right:
                player.right();
                break; // 10px derecha
        }
        draw();
    }
};

function Pixel(ex, ey, tipo) {
    this.x = ex || 0;
    this.y = ey || 0;
    this.vx = 0;
    this.vy = 0;
    this.blink = false;
    this.bColor = "rgba(0, 0, 0, 1)";
    this.iColor = "#739858";
    this.rColor = "rgba(0, 0, 0, 1)";
    this.enabled = true;
    this.face = null;
    this.shape = '1';
    this.tipo = tipo || 'wall';
    switch(this.tipo){
        case 'wall':{
            this.bColor = "#969696";
            this.rColor = "#969696";}break;
        case 'void':{
            this.bColor = "#739858";
            this.rColor = "#739858";}break;
        case 'solid':{
            this.bColor = "black";
            this.rColor = "black";}break;
        case 'special':{
            this.bColor = "white";
            this.rColor = "white";}break;
    }
}
Pixel.prototype.up = function () {
    if (this.y > 0) this.y -= 10;
};
Pixel.prototype.down = function () {
    if (this.y < canvas.height - 10) this.y +=...