JSFiddle - React, Tailwind, and code Playground

by Eshy Lavi

HTML

<canvas id="canvas" width="500" height="400" tabindex="0"></canvas>

JavaScript

var cvs=document.getElementById('canvas');
var ctx;
var shooting=false;
var x = 100;
var y = 100;
var shotsx=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
var shotsy=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
var vshotx=[];
var vshoty=[];
va r theta=Math.PI/8;

cvs.addEventListener('keydown', doKeyDown, true);
ctx = cvs.getContext("2d");
ctx.fillRect(x, y, 60, 10);

function init(){
 ilatest=-1;
 ctx.globalCompositeOperation='xor';

draw();
 
}

function doKeyDown(e){
	clearCanvas();
	if (e.keyCode == 13) {
	    for (var cn=0;cn<shots.length;cn++){
            if (shots[cn]==-1){shots[cn]=1;ilatest=cn;justShot=true;break;}
        }
        
    }
    else if (e.keyCode == 39) {
		x = x + 1;
	}
    else if (e.keyCode == 33) {
		theta+=0.01;
	}
   // ctx.fillRect(x, y, 60, 10);

//else alert(e.keyCode);
		//enter=13
		//shifts=16
		//controls=17
		//alts =18
		//space=32
		//tab=9
        // 36 38 33  
        //    /\ 
		// 37<  >39
		//    \/
        // 35 40 34
} 

function clearCanvas() {
	cvs.width = cvs.width;
}

var shots=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
var ilatest;
var justShot=false;var ss=8;

function draw(){
            ctx.fillStyle='rgb(255,255,255)';
            ctx.fillRect(0,0,500,400);		
		//	ctx.fill();
            vshotx[ilatest]=(Math.cos(theta)*ss);
			vshoty[ilatest]=(Math.sin(theta)*ss);
            if (justShot){justShot=false;shotsx[ilatest]=x;shotsy[ilatest]=y;}

       ctx.fillStyle='rgb(255,255,255)'; 			
      ctx.fillRect(0,0,500,400);
		     		ctx.moveTo(x,y);
			ctx.lineTo(x+20*Math.cos(theta),y+20*Math.sin(theta));
			ctx.stroke();
	
            for (shot=0;shot<shots.length-1;shot++){
                if (shots[shot]!=-1){	
             		//ctx.arc(shotsx[shot],shotsy[shot],5,0,2*Math.PI);
                 ctx.fillStyle='rgb(255,255,255)';                
                    ctx.arc(shotsx[shot],shotsy[shot],5,0,2*Math.PI);
					ctx.fill();
	

shotsx[shot]=shotsx[shot]+vshotx[shot];
			        shotsy[shot]=shotsy[shot]+vshoty[shot];					
               ...