CANVAS BACSIC ANIMATION

<style>
    img { display:none;}

    * { margin:0; padding:0;}
</style>
    <img id="img" src="HD-wallpaper-space-starry-sky-stars-glow.jpg" />
    <img id="player" src="1.png" />
    <img id="shoot" src="x2.png" />
    <img id="enemy" src="iuu.png" />
    <img id="background" src="bg.jpg" />

    <iframe src="Recording (autosaved) (4).m4a" allow="autoplay" id="audio" style="display: none"></iframe>

    <audio id="player" controls="" autoplay="true" loop>
        <source src="xer.mp4" type="audio/mp3">
    </audio>
        <!--
    <audio controls autoplay loop >
      <source src="horse.ogg" type="audio/ogg">
      <source src="xer.mp4" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio> -->
<canvas id="canvas" width="640" height="480"></canvas>

<script>
 var audio = new Audio("xer.mp4");
    audio.play();
    //context.fillStyle="white";
    //context.fillRect(px-pd/2,py-pd/2,pd,pd);


var bg = document.getElementById("img");
var player = document.getElementById("player");
    canvas.height = innerHeight;
    canvas.width = innerWidth;

px=py=100;
pd=80;
ps=15;
el=[];
ed=80;
es=5;
sl=[];
sd=20;
ss=7;
score = 0;
window.onload = function() {
/*
    canvas=document.createElement("canvas");
    canvas.width=640;
    canvas.height=480;
    document.body.appendChild(canvas);
    */

    var canvas = document.getElementById("canvas");
    context=canvas.getContext("2d");
    setInterval(update,1000/30);
    setInterval(spawn,2000);
    document.addEventListener('keydown',keyPush);


}



function spawn() {
    el.push({x:canvas.width,y:Math.random()*canvas.height}); // enemy position, y postion random x postion end of the canv
    //console.log(el);
}

function update() {



    context.fillStyle="black";
    context.fillRect(0,0,canvas.width,canvas.height);

        context.drawImage(background, 0, 0,canvas.width,canvas.height);


    context.drawImage(player,px-pd/2,py-pd/2,pd,pd);



    context.font = "50px Arial";
    context.fillStyle="white";
    context.fillText("Score : " + score,100,50);

    //context.fillStyle="lime";
    for(var s=0;s<sl.length;s++) {

            sl[s].x += ss;


        //context.fillRect();
            context.drawImage(shoot,sl[s].x-sd/2,sl[s].y-sd/2,sd,sd);


        for(var e=el.length-1;e>=0;e--) {
            var dx=Math.abs(el[e].x-sl[s].x);
            var dy=Math.abs(el[e].y-sl[s].y);
            var dist=Math.sqrt(dx*dx+dy*dy);

            if(dist< (sd+ed)/2) {
                el.splice(e,1);
                sl[s] = 0;
                score++;
            }
        }
    }
    //context.fillStyle="red";
    for(var e=0;e<el.length;e++) {
        el[e].x -= es;
        //context.fillRect();
        context.drawImage(enemy,el[e].x-ed/2,el[e].y-ed/2,ed,ed);



        var dx=Math.abs(el[e].x-px);
        var dy=Math.abs(el[e].y-py);
        var dist=Math.sqrt(dx*dx+dy*dy);
        if(dist< (pd+ed)/2) {
            sl=[];
            el=[];
            px=py=100;
            score = 0;
            break;
        }
    }
}



function keyPush(evt) {
    switch(evt.keyCode) {
        case 32:

          sl.push({x:px,y:py});
         //console.log({x:px,y:py});

            break;
        case 37:
            px-=ps;
            break;
        case 38:
            py-=ps;
            break;
        case 39:
            px+=ps;
            break;
        case 40:
            py+=ps;
            break;
    }
}
</script>