HTML5 JavaScript not calling function?

Question

I've been following the tutorial found here for a Breakout game ( http://billmill.org/static/canvastutorial/index.html ). I finished that just fine and am adding my own features. However, the "restartGame()" function just won't run. I've simply told it to add 2 to the score at the moment for the purpose of seeing if it is running, but it isn't. I know that the other functions such as "Clear()" are.

Here is my code, sorry if I'm doing something stupid >.<

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="game.aspx.cs" Inherits="Game"     Title="SetoChaos - Game" ValidateRequest="false" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="css/Styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<a href="Default.aspx">Back to site.</a>
</body>
</html>

<canvas id="canvas" width="1200" height="700"></canvas>

<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
//BEGIN LIBRARY CODE
var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
var WIDTH;
var HEIGHT;
var ctx;

function init() {
    ctx = $('#canvas')[0].getContext("2d");
    WIDTH = $("#canvas").width();
    HEIGHT = $("#canvas").height();
    return setInterval(draw, 10);
}

function circle(x, y, r) {
    //ctx.fillStyle = "#00FFFF";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

function rect(x, y, w, h) {
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.closePath();
    ctx.fill();
}

function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

var paddlex;
var paddleh;
var paddlew;

function init_paddle() {
    paddlex = WIDTH / 2;
    paddleh = 10;
    paddlew = 75;
}

rightDown = false;
leftDown = false;

//set rightDown or leftDown if the right or left keys are down
function onKeyDown(evt) {
    if (evt.keyCode == 39) rightDown = true;
    else if (evt.keyCode == 37) leftDown = true;
}

//and unset them when the right or left key is released
function onKeyUp(evt) {
    if (evt.keyCode == 39) rightDown = false;
    else if (evt.keyCode == 37) leftDown = false;
}

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

var canvasMinX;
var canvasMaxX;

function init_mouse() {
    canvasMinX = $("#canvas").offset().left;
    canvasMaxX = canvasMinX + WIDTH;
}

function onMouseMove(evt) {
    if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
        paddlex = evt.pageX - canvasMinX - (paddlew/2);
    }
}

$(document).mousemove(onMouseMove);

var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;

var rowcolors; // = ['#' + Math.floor(Math.random() * 16777215).toString(16), '#' + Math.floor(Math.random() * 16777215).toString(16), '#' + Math.floor(Math.random() * 16777215).toString(16), "#00FFFF", '#' + Math.floor(Math.random() * 16777215).toString(16), ];

function initbricks() {
    NROWS = 10;
    NCOLS = 10;
    BRICKWIDTH = (WIDTH / NCOLS) - 1;
    BRICKHEIGHT = 10;
    PADDING = 1;

    bricks = new Array(NROWS);
    for (i = 0; i < NROWS; i++) {
        bricks[i] = new Array(NCOLS);
        for (j = 0; j < NCOLS; j++) {
            bricks[i][j] = 1;
        }
    }

    rowcolors = new Array(NROWS);
    for (i = 0; i <= NROWS; i++) {
        rowcolors[i] = new Array(NCOLS);
        for (j = 0; j <= NCOLS; j++) {
            rowcolors[i][j] = '#' + Math.floor(Math.random() * 16777215).toString(16); //Random Hex Colour Value
        }
    }
}

var ballr = 10;

var paddlecolor = "#FF0000";
var ballcolor = "#00FF00";
var backcolor = "#000000";

var restartGame = false;
var hit = new Audio("sound/hit.wav");
var shipHit = new Audio("sound/shipHit.wav");
var sideHit = new Audio("sound/sideHit.wav");
var dead = new Audio("sound/dead.wav");

var score = 0;
function restartGame() {
    score += 2;
}

//END LIBRARY CODE

function draw() {
    ctx.fillStyle = backcolor;
    clear();
    ctx.fillStyle = ballcolor;
    circle(x, y, ballr);

    ctx.font = '40pt Calibri';
    ctx.fillText("Score: " + score, WIDTH-WIDTH, HEIGHT-30);

    //move the paddle if left or right is currently pressed
    if (rightDown) paddlex += 5;
    else if (leftDown) paddlex -= 5;
    ctx.fillStyle = paddlecolor;
    rect(paddlex, HEIGHT - paddleh, paddlew, paddleh);

    //draw bricks
    for (i = 0; i < NROWS; i++) {
        for (j = 0; j < NCOLS; j++) {
            if (bricks[i][j] == 1) {
                rect((j * (BRICKWIDTH + PADDING)) + PADDING,
                     (i * (BRICKHEIGHT + PADDING)) + PADDING,
                     BRICKWIDTH, BRICKHEIGHT);
                ctx.fillStyle = rowcolors[i][j];
            }

            //Doing this for a second time with or without the fillstyle seems allow the colours to properly wrap around rows
            if (bricks[i][j] == 1) {
                rect((j * (BRICKWIDTH + PADDING)) + PADDING,
                     (i * (BRICKHEIGHT + PADDING)) + PADDING,
                     BRICKWIDTH, BRICKHEIGHT);
            }
        }
    }

    //Tutorial says to look at this page for collision
    // http://www.harveycartel.org/metanet/tutorials/tutorialA.html

    //have we hit a brick?
    rowheight = BRICKHEIGHT + PADDING;
    colwidth = BRICKWIDTH + PADDING;
    row = Math.floor(y / rowheight);
    col = Math.floor(x / colwidth);
    //if so, reverse the ball and mark the brick as broken
    if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
        dy = -dy;
        bricks[row][col] = 0;
        hit.play();
        score += 1;
    }

    if (x + dx > WIDTH || x + dx < 0) {
        dx = -dx;
        sideHit.play();
    }

    if (y + dy < 0)
        dy = -dy;
    else if (y + dy > HEIGHT) {
        if (x > paddlex && x < paddlex + paddlew) {
            dy = -dy;
            shipHit.play();
        }
        else {
            //game over, so stop the animation
            //dead.play();
            //clearInterval(intervalId);
            ctx.fillText("DEAD.", WIDTH - WIDTH, HEIGHT - 130);
            restartGame();
        }
    }
    x += dx;
    y += dy;

}

init();
init_paddle();
init_mouse();
initbricks();
</script>

Answer 1

You overwrite the function with a boolean literal: var restartGame = false;

(Function declarations are hoisted, so you don't need to order your source so they appear before you use them, so the assignment happens after the function is created).

HTML5 JavaScript not calling function?

Question

1 answers

solution1
4 ACCPTED 2013-03-08 22:16:03

HTML5 JavaScript not calling function?

Question

1 answers

solution1 4 ACCPTED 2013-03-08 22:16:03

solution1
4 ACCPTED 2013-03-08 22:16:03