JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<canvas id='c'></canvas>

JavaScript

d=document;
m=Math;
r=m.random;
c=d.getElementById('c');
x=c.getContext('2d');
w=c.width=500;
h=c.height=375;

ship={x:w/2,y:h/2,v:{x:0,y:0},s:0};
s=15;//max speed
x.fillStyle='#000';
x.strokeStyle='#FFF';
x.lineWidth=1;
score=z=l=play=0;
li=3;

p='Press esc to start';
g='';

a=[];
b=[];
k={
    37:0,//left
    38:0,//up
    39:0,//right
    32:0,//space
    27:0//escape
};

collisions=function(e) {
    for(i=0;i<a.length;i++) {
        o=a[i];
        for(j=0;j<b.length;j++) {
            o2=b[j];
            d=(o.x-o2.x)*(o.x-o2.x)+(o.y-o2.y)*(o.y-o2.y);
            if(d<(o.s*2)*(o.s*2)) {
                //alert('collision');
                b.splice(j,1);
                j--;
                score+=o.s*10;
                if(o.s>8) {
                    a.push({x:o.x,y:o.y,v:{x:r()*3,y:r()*3},s:(o.s-1)});
                    a.push({x:o.x,y:o.y,v:{x:r()*3,y:r()*3},s:(o.s-1)});
                }
                a.splice(i,1);
                    i--;
                break;
            }
        }
        o2=ship;
        d=(o.x-o2.x)*(o.x-o2.x)+(o.y-o2.y)*(o.y-o2.y);
        if((d-36)<(o.s*2)*(o.s*2)&&play) {
            //collision with ship
            //alert('ship collision');
            li--;
             if(o.s>8) {
                    a.push({x:o.x,y:o.y,v:{x:r()*3,y:r()*3},s:(o.s-1)|0});
                    a.push({x:o.x,y:o.y,v:{x:r()*3,y:r()*3},s:(o.s-1)|0});
                }
                a.splice(i,1);
                    i--;
        }
    }
};

update=function(e) {
    x.fillRect(0,0,w,h);
    z--;
    if(a.length==0) {
        g='Level '+l+' (esc to play)';
        play=0;
        b=[];
        lvl();
    }
    x.fillStyle='#fff';
    x.textAlign='left';
    x.fillText(score, 5, 20);
    x.fillText(li, 5, 40);
    x.fillStyle='#000';
    if(!play) {
        msg(g||p);
        if(k[27]) {
            play=1
                if(li==0) {
                score=0;
            li=3;
            ship.x=w/2;
            ship.y=h/2;
           ...