Question

我收到'未捕获的参考错误：函数（例如upButton（））未在HTMLButtonElement.onclick'中定义。我有一个简单的画布游戏，我从后面的教程中使用键盘控件移动，但我也想要按钮。

我总是做一个测试页面以确保一切正常，在我将其全部移动到我的主html文件之前，但是我已经将我的代码从一个文件复制并粘贴到另一个文件中我这个错误。

html按钮代码：

<button onclick="upButton()">Up</button>
<button onclick="downButton()">Down</button>
<button onclick="leftButton()">Left</button>
<button onclick="rightButton()">Right</button>

我的javascript功能代码：

function upButton() {
    character.y -= 15;
}

function downButton() {
    character.y += 15;
}

function leftButton() {
    character.x -= 15;
}

function rightButton() {
    character.x += 15;
}

从我的测试html文件工作的事实来看，我认为所有内容都已正确定义，而且它也正确地调用了这个函数，所以我不知道为什么会这样。

完整的HTML代码：

    <!DOCTYPE html>
<html>
    <head>
        <title>CS25320</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <!-- Image from https://matthewboyz.deviantart.com/art/Blue-flat-wallpaper-555483912 -->
    <body background="background.png">

        <div id="header">
            <h1>Mystical Mountains Game</h1>
            <p>CS25320 / Programming for the Web</p>
            <ul>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/index.html"><b>Home</b></a></li>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/about.html"><b>About</b></a></li>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/help.html"><b>Help</b></a></li>
            </ul>
        </div>

        <div id="main">
            <br>
        </div>
        <p id="health"></p>
        <p id="health2"></p>
        <p id="health3"></p>
        <p id="health4"></p>

        <button onclick="upButton()">Up</button>
        <button onclick="downButton()">Down</button>
        <button onclick="leftButton()">Left</button>
        <button onclick="rightButton()">Right</button>

        <script src="thegame.js"></script>

        <div id="footer">
            <h3>Disclaimer</h3>

        </div>

    </body>

</html>

完整的js代码：

//Create Canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 450;
document.body.appendChild(canvas);

//Background image 
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function() {
    bgReady = true;
};
bgImage.src = "background4.png";

//Character image
var charReady = false;
var charImage = new Image();
charImage.onload = function() {
    charReady = true;
};
charImage.src = "character2.png";

//Jewel image
var jewelReady = false;
var jewelImage = new Image();
jewelImage.onload = function() {
    jewelReady = true;
};
jewelImage.src = "jewel.png";

//Game objects
var character = {
    speed: 256, // movement in pixels per second
    x: 0,
    y: 0
};

var jewel = { // Doesn't move so just has coordinates
    x: 0,
    y: 0
};

var jewelsCaught = 0; // Stores number of jewel caught

// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function(e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function(e) {
    delete keysDown[e.keyCode];
}, false);

//Buttons for cross-compatibility with other devices 
//I have added in this code to allow the user to use buttons
function upButton() {
    character.y -= 15;
}

function downButton() {
    character.y += 15;
}

function leftButton() {
    character.x -= 15;
}

function rightButton() {
    character.x += 15;
}

//Reset the game when the character catches a troll or jewel
var reset = function() {
    character.x = canvas.width / 2;
    character.y = canvas.height / 2;

    //Throw jewel on screen randomly
    jewel.x = 32 + (Math.random() * (canvas.width - 64));
    jewel.y = 32 + (Math.random() * (canvas.height - 64));
};

//Update game objects
var update = function(modifier) {
    if (38 in keysDown) { // Player holding up
        character.y -= character.speed * modifier;
    }
    if (40 in keysDown) { // Player holding down
        character.y += character.speed * modifier;
    }
    if (37 in keysDown) { // Player holding left
        character.x -= character.speed * modifier;
    }
    if (39 in keysDown) { // Player holding right
        character.x += character.speed * modifier;
    }

    //Are they touching?
    if (
        character.x <= (jewel.x + 52)
        && jewel.x <= (character.x + 52)
        && character.y <= (jewel.y + 52)
        && jewel.y <= (character.y + 52)
    ) {

        ++jewelsCaught;
        reset();
    }
};

//Draw everything
var render = function() {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }
    if (charReady) {
        ctx.drawImage(charImage, character.x, character.y);
    }
    if (jewelReady) {
        ctx.drawImage(jewelImage, jewel.x, jewel.y);
    }

    //Score
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.font = "20px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Jewels caught: " + jewelsCaught, 32, 32);
};

var i = 0;
for (i = 0; i < 100; i++) {
    if (jewelsCaught <= 5) {
        document.getElementById("health").innerHTML = "Health: *";
    }
    else if (jewelsCaught >= 6) {
        document.getElementById("health2").innerHTML = "Health: **";
    }
    else if (jewelsCaught >= 11 && jewelsCaught <= 15) {
        document.getElementById("health3").innerHTML = "Health: ***";
    }
    else if (jewelsCaught >= 16 && jewelsCaught <= 20) {
        document.getElementById("health4").innerHTML = "Health: ****";
    }
}

//Main game loop
var main = function() {
    var now = Date.now();
    //How many milliseconds have passed since the last interval
    var delta = now - then; 

    update(delta / 1000);
    //Record the timestamp
    render();

    then = now;

    //Request to do this again ASAP
    requestAnimationFrame(main);
};

//Cross-brower support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

//Play game
var then = Date.now();
reset();
main();

Answer 1

您应该知道代码已经包含在页面中。对于完整的HTML代码，我找不到您的JavaScript功能代码，upButton，downButton，leftButton和rightButton。以下代码段没有问题。

＆＃13;

//file: thegame.js
//Create Canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 450;
document.body.appendChild(canvas);

//Background image 
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function() {
	bgReady = true;
};
bgImage.src = "background4.png";

//Character image
var charReady = false;
var charImage = new Image();
charImage.onload = function() {
	charReady = true;
};
charImage.src = "character2.png";

//Jewel image
var jewelReady = false;
var jewelImage = new Image();
jewelImage.onload = function() {
	jewelReady = true;
};
jewelImage.src = "jewel.png";

//Game objects
var character = {
	speed: 256, // movement in pixels per second
	x: 0,
	y: 0
};

function upButton() {
	character.y -= 15;
}

function downButton() {
	character.y += 15;
}

function leftButton() {
	character.x -= 15;
}

function rightButton() {
	character.x += 15;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>CS25320</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <!-- Image from https://matthewboyz.deviantart.com/art/Blue-flat-wallpaper-555483912 -->
    <body background="background.png">
        <div id="header">
            <h1>Mystical Mountains Game</h1>
            <p>CS25320 / Programming for the Web</p>
            <ul>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/index.html"><b>Home</b></a></li>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/about.html"><b>About</b></a></li>
                <li><a href="http://users.aber.ac.uk/lid15/cs25320/coursework/help.html"><b>Help</b></a></li>
            </ul>
        </div>
        <div id="main">
            <br>
        </div>
        <p id="health"></p>
        <p id="health2"></p>
        <p id="health3"></p>
        <p id="health4"></p>
        <button onclick="upButton()">Up</button>
        <button onclick="downButton()">Down</button>
        <button onclick="leftButton()">Left</button>
        <button onclick="rightButton()">Right</button>
        <!-- include in code snippet -->
        <!-- <script src="thegame.js"></script> -->
        <div id="footer">
            <h3>Disclaimer</h3>
        </div>
    </body>
</html>

＆＃13;

未捕获的ReferenceError：onclick上未定义的函数

1 个答案: