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=[];
var shotsy=[];
var vshotx=[];
var vshoty=[];
var theta=0;

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

function init(){
    draw();

}

function doKeyDown(e){
	clearCanvas();
	if (e.keyCode == 13) {
	    for (var cn=0;cn<shots.length;cn++){
            if (shots[cn]==-1){shots[cn]=1;}
        }
        
    }
    else if (e.keyCode == 39) {
		x = x + 1;
	}
    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];

function draw(){
        
            clearCanvas();		
            shotsx.push(x);//alert(shotsx[0]);
			shotsy.push(y);
    		vshotx.push(Math.cos(theta)*3);
			vshoty.push(Math.sin(theta)*3);
			shooting=false;
		    for (shot=0;shot<shots.length-1;shot++){
                if (shots[shot]!=-1){						
                    shotsx[shot]=shotsx[shot]+vshotx[shot];
			        shotsy[shot]=shotsy[shot]+vshoty[shot];						
			        ctx.arc(shotsx[shot],shotsy[shot],5,0,2*Math.PI);
				}
     		}
     	    ctx.fillRect(x, y, 60, 10);
     		ctx.fill();
       		window.requestAnimationFrame(draw);
}
init();