HTML5 / JavaScript simple game example

Main JavaScript File


var canvas1 = null;
var display_interval_id = null;
var ctx2 = null;

$( document ).ready(function() {

    $('#d1').html('<canvas id="myCanvas1" width="100" height="100" style="border:0px solid #000000;">"</canvas>');

    var score = 0;
    var total_gos = 0;

    function sleep (time) {
          return new Promise((resolve) => setTimeout(resolve, time));
    }

    function display_image()
    {
        var random_x_pos = Math.round((Math.random() * 500) + 10, 0);
        var random_y_pos = Math.round((Math.random() * 500) + 10, 0);

        $('#d1').css('top', random_x_pos.toString() + 'px');
        $('#d1').css('left', random_y_pos.toString() + 'px');

        //////////////////////////////////////////////////////////////

        canvas1 = document.getElementById("myCanvas1");
        canvas1.addEventListener("mousedown", doTouchStart1, false);

        ctx2 = canvas1.getContext("2d");

        //ctx2.fillStyle="#FF0000";
        //ctx2.fillRect(0, 0, canvas1.width, canvas1.height);

        var imageObj = new Image();
        imageObj.src = image_path;
        ctx2.drawImage(imageObj, 0, 0);

        total_gos++;

        function doTouchStart1(event)
        {
            var explosion = new Audio(audio_path);
            explosion.volume = .1;
            explosion.load();
            explosion.play();

            event.preventDefault();
            canvas_x = event.pageX;
            canvas_y = event.pageY;
            score++;
        }

        sleep(500).then(() => {
            ctx2.clearRect(0, 0, canvas1.width, canvas1.height);
            canvas1.removeEventListener("mousedown", doTouchStart1, false);

            if (total_gos == 10)
            {
                clearInterval(display_interval_id);

                ctx2 = canvas1.getContext("2d");
                ctx2.fillStyle="#000000";
                ctx2.font = "10px Verdana";
                ctx2.fillText("You scored " + score.toString() + "/10", 10, 50);
            }
        });

        //////////////////////////////////////////////////////////////


    }

    display_interval_id = setInterval(display_image, 4000);


});


Main HTML File


{% load static %}
{% csrf_token %}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="{% static "/lib/bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "/dist/rzslider.css" %}">

    <script src="{% static "/angular/angular.min.js" %}"></script>
    <script src="{% static "/angular/angular-sanitize.js" %}"></script>
    <script src="{% static "/lib/ui-bootstrap-tpls.js" %}"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <script src="{% static "game.js" %}"></script>

    <script>
        var audio_path = "{% static "sound.wav" %}"
        var image_path = "{% static "graphic.jpg" %}"
    </script>

</head>

<body>

<div id='d1' style="position:absolute; top:0px; left:0px; z-index:1"></div>

</html>