JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<html>
    <head>
        <title>Pong JavaScript</title>    
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <div id="log"></div>
    </body>
</html>

JavaScript

//Consola debug
function log(texto,nueva){
    var capa=document.getElementById("log");
    if (nueva)
        capa.innerHTML+="<br/>"+texto;
    else
        capa.innerHTML=texto;
}    

//Vectores
function Vector2D(x,y){
    this.x=x;
    this.y=y;
}
Vector2D.prototype.longitud=function(){
    return (Math.sqrt(this.x*this.x+this.y*this.y));
};
Vector2D.prototype.escalar=function(e){
    return (new Vector2D(this.x*e,this.y*e));
};
Vector2D.prototype.normalizar=function(){
    var vec;
    var lon=this.longitud();
    if (lon!=0)
    {
        vec=this.escalar(1/lon);
    }
    else
    {
        vec=new Vector2D(0,0);
    }
    return vec;
};
Vector2D.prototype.rotar=function(angulo){
    var radianes=angulo*Math.PI/180;
    var x=this.x*Math.cos(radianes)-this.y*Math.sin(radianes);
    var y=this.x*Math.sin(radianes)+this.y*Math.cos(radianes);
    x=Math.round(x*100);
    if (x!=0)
    {
        x/=100;
    }
    y=Math.round(y*100);
    if (y!=0)
    {
        y/=100;
    }
    return new Vector2D(x,y);
};
//Dectector eventos teclado
var Direccion = { QUIETO:0, ARRIBA: 1, ABAJO:2 };
function Controles(){    
    this.ARRIBA=false;
    this.ABAJO=false;
    this.W=false;
    this.S=false;

    var self=this;
    document.body.onkeydown=function(e){
        switch(e.keyCode)
        {
            case 38: //Arriba
                e.preventDefault();
                self.ARRIBA=true;
                break;
            case 40: //Abajo
                e.preventDefault();
                self.ABAJO=true;
                break;
            case 87: //W
                e.preventDefault();
                self.W=true;
                break;
            case 83: //S
                e.preventDefault();
                self.S=true;
                break;
            
        }
    };
    document.body.onkeyup=function(e){
        switch(e.keyCode)
        {
            case 38: //Arriba
                e.preventDefault();
                self.ARRIBA=false;
            ...