CODEWITHSUNDEEP
javascriptcanvas
user3211033
user3211033

Reputation:

Creating simple game but nothing showing up on the canvas

<html>
<head>
<title>Sean Coyne</title>

<link rel="stylesheet" type="text/css" href="home.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />

</head>

<body>


<section>
<article>
<div id="logo"><img src="LogoComic.png" id="Logo"></div><br></br>

<div id="canvas">
    <canvas id="c" style="border:5px solid orange" height="500" width="500"></canvas>

    <p id="p1"></p>

    <script>

        var basket_x=100;
        var basket_y=100;
        var ball_x=100;
        var ball_y=100;
        var points=0;

//Background colour of canvas

        var c = document.getElementById("c");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#0000";
        ctx.fillRect(0,0,500,500);

//Here is the event listener

        mycanv.addEventListener("mousemove",seenmotion,false);

        function seenmotion(e) {

//This is the code for the mouse //moving over the canvas.

        var bounding_box=mycanv.getBoundingClientRect();
                basket_x=(e.clientX-bounding_box.left) *
                                     (mycanv.width/bounding_box.width); 
                basket_y=(e.clientY-bounding_box.top) *
                        (mycanv.height/bounding_box.height);    
        }

        function start_game() {
            setInterval(game_loop, 50);
        }

        function game_loop() {

// The code above is called every 50ms and is a // frame-redraw-game-animation loop.

            mycanv.width=mycanv.width;

// Below is the code that draw the objects

            draw_basket(basket_x,basket_y); 
            draw_ball(ball_x,ball_y);

// Below is the code that updates the balls location

            ball_x++;
                if (ball_x>mycanv.width) {
                    ball_x=0;
            }

//Here is the collision detection code

            if (collision(basket_x, basket_y, ball_x, ball_y)) {
                    points -= 1;
                }

//Here is the code for the point system

            points+=1

// and let's stick it in the top right. 

                var integerpoints=Math.floor(points); // make it into an integer
            ctx.font="bold 24px sans-serif #fff";
                ctx.fillText(integerpoints, mycanv.width-50, 50);   
        }

        function collision(basket_x, basket_y, ball_x, ball_y) {
            if(basket_y + 85 < ball_y) {
                return false;
            }
            if (basket_y > ball_y + 91) {
                return false;
            }
            if (basket_x + 80 < ball_x) {
                return false;
            }
            if (basket_x > ball_x + 80) {
                return false;
            }

            return true;
        }

// Code to stop the game when we're finished playing

        function stop_game() {

        }

//Code for the ball

        function draw_ball(x,y) {
            var c = document.getElementById("c");
            var ctx = c.getContext("2d");
            ctx.fillStyle = "#fff";
            ctx.fillRect(0,0,20,20);
        }

//Code for the basket

        function draw_basket(x,y) {
            var basket_img=new Image();
            basket_img.src="basket.png";
            ctx.drawImage(basket_img,x,y);

        }

    start_game()

    </script>



</div>

</article>
</section>

Here is what the canvas looks like when started

Upvotes: 3

Views: 127

Answers (1)

A.J. Uppal
A.J. Uppal

Reputation: 19264

You are never calling start_game() to start the program, thus the program just waits. Instead, at the end of your <script>, add start_game().

Just a tip: your line mycanv.width = mycanv.width is completely unnecessary, it is the equivalent of saying var x = 1; x = x;.

Upvotes: 1

Related Questions