Fatal编程技术网
  • javascript/
  • Javascript JS游戏未在网页中呈现

Javascript JS游戏未在网页中呈现

javascript html canvas

Javascript JS游戏未在网页中呈现,javascript,html,canvas,Javascript,Html,Canvas,我一直在跟随一个教程制作一个简单的Javascript游戏，但由于某种原因，当我在chrome中运行index.html文件时，游戏本身不会呈现，我也不知道为什么 到目前为止，我已经尝试将脚本分离到一个单独的文件中，并尝试在html文件中使用脚本元素呈现 请参阅下面的代码： <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <t

我一直在跟随一个教程制作一个简单的Javascript游戏，但由于某种原因，当我在chrome中运行index.html文件时，游戏本身不会呈现，我也不知道为什么

到目前为止，我已经尝试将脚本分离到一个单独的文件中，并尝试在html文件中使用脚本元素呈现

请参阅下面的代码：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>JS Goblin Catcher</title>
    </head>
    <body>
        <script>
            // Create the canvas
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

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

// Hero Image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
    heroReady = true;
};
heroImage.src = "hero.png";

// Goblin image
var goblinReady = false;
var goblinImage = new Image();
goblinImage.onload = function () {
    goblinReady = true;
};
goblinImage.src = "monster.png";

// Game Objects
var hero = {
    speed: 256, // pixels per second
    x: 0,
    y: 0
};

var goblin = {
    x: 0,
    y: 0
};

var goblinsCaught = 0;

// Keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

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

// Resets the game when a Goblin is caught
var reset = function () {
    hero.x = canvas.width / 2;
    hero.y = canvas.height / 2;

    // Randomly places the Goblin
    goblin.x = 32 + (Math.random() * (canvas.width - 64));
    goblin.y = 32 + (Math.random() * (canvas.width - 64));
};

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

    // Are they touching?
    if (
        hero.x <= (goblin.x + 32)
        && goblin.x <= (hero.x + 32)
        && hero.y <= (goblin.y + 32)
        && goblin.y <= (hero.y + 32)
    ) {
        ++goblinsCaught;
        reset();
    }
};

// Render objects
// Draw everything
let render = function () {
    if (bgReady) {
        context.drawImage(bgImage, 0, 0);
    }

    if (heroReady) {
        context.drawImage(heroImage, hero.x, hero.y);
    }

    if (monsterReady) {
        context.drawImage(goblinImage, goblin.x, goblin.y);
    }

    // Score
    context.fillStyle = "rgb(250, 250, 250)";
    context.font = "24px Helvetica";
    context.textAlign = "left";
    context.textBaseline = "top";
    context.fillText("Goblins caught: " + goblinsCaught, 32, 32);
};

// Game loop
let game = function() {
    let dateNow = Date.now();
    let delta = dateNow - then;

    update(delta/1000);
    render();

    then = now;

    requestAnimationFrame(game);
};

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

// Start the game!
let then = Date.now();
reset();
main();</script>
    </body>
</html>


地精捕手
//创建画布
var canvas=document.createElement（“canvas”）；
var context=canvas.getContext（“2d”）；
canvas.width=512；
canvas.height=480；
document.body.appendChild（画布）；
//背景图像
var bgrady=false；
var bgImage=新图像（）；
bgImage.onload=函数（）{
bgrady=true；
};
bgImage.src=“background.png”；
//英雄形象
var-heroredy=false；
var-mage=新图像（）；
heroMage.onload=函数（）{
heroReady=true；
};
heroMage.src=“hero.png”；
//地精形象
var goblinReady=false；
var goblinImage=新图像（）；
goblinImage.onload=函数（）{
goblinReady=true；
};
goblinImage.src=“monster.png”；
//游戏物品
var hero={
速度：256，//像素/秒
x:0,，
y:0
};
小妖精={
x:0,，
y:0
};
var goblinscapt=0；
//键盘控制
var keysDown={}；
addEventListener（“向下键控”，函数（e）{
keysDown[e.keyCode]=真；
}，假）；
addEventListener（“键控”，函数（e）{
删除keysDown[e.keyCode]；
}，假）；
//当地精被抓到时重置游戏
变量重置=函数（）{
hero.x=canvas.width/2；
hero.y=canvas.height/2；
//随机放置地精
goblin.x=32+（Math.random（）*（canvas.width-64））；
goblin.y=32+（Math.random（）*（canvas.width-64））；
};
//更新游戏对象
变量更新=函数（修饰符）{
如果（38键向下）{//玩家举起
hero.y-=hero.speed*修饰符；
}
如果（40英寸向下键）{//玩家按住
hero.y+=hero.speed*修改器；
}
如果（37英寸向下键）{//玩家左握
hero.x-=hero.speed*修改器；
}
如果（39键向下）{//玩家保持右侧
hero.x+=hero.speed*修改器；
}
//他们在动吗？
如果(

hero.x打开您的浏览器调试工具并检查控制台。非常确定您会在那里出错。您在末尾调用了main（）函数，但没有声明它。我删除了未声明的main（）但是仍然没有任何渲染，我不是在某处调用游戏吗？我似乎不明白为什么它没有启动，现在控制台中也没有显示错误。