JSFiddle - React, Tailwind, and code Playground

by Aijoona

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Juego Pong</title>
</head>
<body>
    <h1>Pong!</h1>
    <canvas id="canvas" width="120" height="60"></canvas>
    <p id="status"></p>
</body>
</html>

CSS

canvas {
    background-color: #000;
}

JavaScript

/**
 * @author hackjose
 */

var Game = {    
    STATUS: {
        PAUSED: 'Presiona enter para comenzar a jugar!',
        GAME_OVER: 'Game over!'        
    },    
    key: {
        LEFT: 37,
        UP: 38,
        RIGHT: 39,
        DOWN: 40,
        ENTER: 13,
        last: null,
        is: function() {
            for(var i = 0, l = arguments.length; i < l; i++) {
                if(Game.key.last == arguments[i]) {
                    return true;                    
                }
            }
            return false;        
        }            
    },
    paused: true,
    isPaused: function() {
        return Game.paused;                    
    },
    setStatus: function(status) {
        document.getElementById("status").innerHTML = status || '';    
    },
    ball: {
        x: 0,
        y: 0,
        angle: 0,
        render: function(ctx) {
        
        }
    },
    player1: {
        x: 0,
        y: 0,
        size: 20,
        clear: function(ctx) {        
            ctx.fillStyle = "#F00";
            ctx.fillRect(0,0,10,60);
        },
        render: function(ctx) {
            Game.player1.clear(ctx);
            ctx.fillStyle = "#0F0";
            ctx.fillRect(X1,Y1,10,20);        
        }                
    },
    player2: {
        x: 0,
        y: 0,
        size: 20,
        clear: function(ctx) {
            ctx.fillStyle = "#F00";
            ctx.fillRect(110,0,10,60);                
        },
        render: function(ctx) {
            Game.player2.clear(ctx);            
            ctx.fillStyle = "#0F0";
            ctx.fillRect(X2,Y2,10,20);    
        }
    }
};

var X1 = 0, 
    Y1 = 40, 
    X2 = 110, 
    Y2 = 0;

var CX = 55, 
    CY = 30;
var Top = null, 
    Rt = null;

var pel = null;

window.addEventListener('load', function(){ 
    Game.canvas = document.getElementById('canvas');
    Game.ctx = Game.canvas.getContext('2d');
    paint();
    Top = true;
    Rt = true;
    ejecutar();
},...