JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
    <title>rectExample</title>
    <meta charset='utf-8' />
</head>
<body>
<button onclick="left()"> left </button>
<button onclick="right()"> right </button>
<button onclick="up()"> up </button>
<button onclick="down()"> down </button>
<button onclick="fire()"> fire </button>
<canvas id='example'>Обновите браузер</canvas>
<script>
    var example = document.getElementById("example"),
        ctx = example.getContext('2d');
    ew = example.width  = 940;
    eh = example.height = 350;
    x = 50;
    y = 210;
    xd = 1;

function Shell(x, y, dx, dy) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
}
var shells = [];

function Block(bx, by) {
this.bx = bx;
this.by = by;


}
var blocks = [];

function rock() {

    for(var i=0; i < blocks.length; i++) {

        var block = new Block(0, 150, 10, 10);

        blocks.push(block);

    }



}



    function left() {
        x = x-10;
        mx = mx - 10;
    }
    function right() {
        x = x+10;
        mx = mx +10;
    }
    function up() {
        xd = xd+0.30;
        a = a - 1;
    }

    function down() {
        xd = xd-0.30;

     a = a + 1;
    }



function fire() {

    var shell = new Shell(x, y-10, xd, 5);
shells.push(shell);

}

function game() {
    ctx.clearRect(0, 0, ew, eh);
    ctx.beginPath();

    ctx.strokeRect(x, y, 10, 10);
    ctx.fillRect(0, 220, 900, 10);

    for(var i=0; i<blocks.length; i++) {

        var block = blocks[i];

        block.bx = block.bx + 10;

        ctx.strokeRect(block.bx, block,by, 10, 10);


    }








    for (var i=0; i < shells.length; i++) {
         var shell = shells[i];
    shell.x += shell.dx;
    shell.y -= shell.dy;


    if (shell.y < eh) shell.dy -= 0.1;


    if (shell.y > 220) shell.dy = -shell.dy;
        ctx.strokeRect(shell.x, shell.y, 10, 10);
    }







  setTimeout("game()", 20);

}
rock()
game()

</script>
</body>
</html>