0

我一直在关注这里的 Breakout 游戏教程 ( http://billmill.org/static/canvastutorial/index.html )。我完成得很好，并且正在添加我自己的功能。但是，“restartGame()”函数不会运行。我只是告诉它现在将分数加 2 以查看它是否正在运行，但事实并非如此。我知道诸如“Clear()”之类的其他功能是。

这是我的代码，对不起，如果我在做一些愚蠢的事情>。<

<%@ 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>
4

1 回答 1

4

您用布尔文字覆盖函数：var restartGame = false;

（函数声明被提升，所以你不需要订购你的源代码，所以它们在你使用它们之前就出现了，所以赋值发生在函数创建之后）。

于 2013-03-08T22:16:03.423 回答