JSFiddle - React, Tailwind, and code Playground

by peka

HTML

Se juega con las teclas <b>W A S D</b>, Tienes que esquivar los cuadrados Rojos.<br/>
<div style="text-align:right; color:white; font-size:10px">Made By Peka~</div>
<div style="display:flex">
<canvas id="tutorial" width="100" height="100">
</canvas>
<div id="wasd">
    <div id="arriba" onclick="player.up()">W</div>
        <div id="izquierda"onclick="player.left()">A</div>
        <div id="derecha"onclick="player.right()">S</div>
    <div id="abajo"onclick="player.down()">D</div>
    
</div>
</div>
<div>
    <button id="st" onclick="start(this.id)" value="Start">Start</button>
    <input type="checkbox" id="hard"/>Hard
</div>
Version 0.4<br/>
Loops: <span id="ticks" style="color:white;">0</span>

CSS

body{background-color:silver}
canvas{border-style:dashed;border-color:black}
#wasd{
    text-align:center;
    border-style:dashed;border-color:white;
    width:100px;
    height:100%;
}
#arriba{
    background-color:yellow;
    box-shadow: 2px 2px #888888;    
}
#derecha{
    background-color:green;  
    float:right;
    position: relative;
    bottom:-20px;
        box-shadow: 2px 2px #888888;

}
#izquierda{
    background-color:red;
    float:left;
    position: relative;
    bottom:-20px;
        box-shadow: 2px 2px #888888;

}
#abajo{
    position: relative;
     bottom:-60px;
    background-color:blue;    
    box-shadow: 2px 2px #888888;

}

JavaScript

var fps;        //contador de loops
var clock;          //variable del timer
var lose = false;

var cubes = []; //array de los bloques rojos
var player;
player = new Blue(50,50);
function getB(){return Math.random()<0.5;} //devuelve 1/0

function getR() //devuelve un N entre 0-100 de 10 en 10
{
    var rx = Math.floor(Math.random()*10);
    rx = rx*10;
    return rx;
}
function getVel(){
var hd = document.getElementById("hard");
    var h = hd.checked;
    //alert("H = " + h);
    if(h){vel = 150;}
    else{vel = 400;}
    return vel;
}



function init(){
    
    for(var y = 0;y<5;y++){
        for(var x =0;x<5;x++){
            var i = cubes.length;
            var ya = -(y)*10;
            cubes[i] = new Bala('d',ya,getR());
        }}
    /* 
    for(var i = 0; i<9;i++)
    {
        cubes[i] = new Bala('l');
    }
    for(var a = 0; a<5;a++)
    {
        cubes[a+9] = new Bala('d');
    }
    for(var b = 0; b<5;b++)
    {
        cubes[b+14] = new Bala('u');
    }
    for(var c = 0; c<5;c++)
    {
        cubes[c+19] = new Bala('r');
    }
    */
}

function Blue(ejex, ejey){
    this.x = ejex;
    this.y = ejey;   
}
//Blue.prototype.draw = function(){};
Blue.prototype.up = function(){if(this.y>0)this.y-=10;};
Blue.prototype.down = function(){if(this.y<90)this.y+=10;};
Blue.prototype.left = function(){if(this.x>0)this.x-=10;};
Blue.prototype.right = function(){if(this.x<90)this.x+=10;};

function Bala(dir, ejex, ejey)
{
    this.y = ejey || 0;
    this.x = ejex || getR();
    this.d = dir || 'd';
}

//se encarga de mover los bloques.
Bala.prototype.update = function() 
{
    switch(this.d)
    {
        case'u':this.y-=10;break;
        case'd':this.y+=10;break;
        case'l':this.x-=10;break;
        case'r':this.x+=10;break;
    }
};

//var shoot = new Bala(getR());

//alert(shoot.x);
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; ...