从HTML页面运行Javascript游戏_Javascript_Html

从HTML页面运行Javascript游戏

javascript html

从HTML页面运行Javascript游戏,javascript,html,Javascript,Html,我已经学习了制作简单HTML画布游戏（）的教程。游戏保存在一个javascript文件中，我不知道如何测试它。我环顾四周，发现它应该从html页面运行，所以我写了以下内容： <html> <head> <script language="javascript" src="main.js" type="text/javascript"/> </script> </head> <body> </body> &l

我已经学习了制作简单HTML画布游戏（）的教程。游戏保存在一个javascript文件中，我不知道如何测试它。我环顾四周，发现它应该从html页面运行，所以我写了以下内容：

<html>
<head>

<script language="javascript" src="main.js" type="text/javascript"/>
</script>

</head>
<body>

</body>
</html>

这没有任何作用，这是我所期望的。但是，我不知道要运行这个程序该做什么。我非常感谢您在这方面的任何意见。谢谢

编辑* 这归结为javascript文件中的一个错误。下面是我的代码：

//canvas
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=480;
document.body.appendChild(canvas);

//background img
var bgready=false;
var bgimage=new Image();
bgimage.onload=function(){
    bgready=true;
};
bgimage.src="images/bg_space.png";
//player img
var playerready=false;
var playerimage=new Image();
playerimage.onload=function(){
    playerready=true;
};
playerimage.src="images/spr_player.png";
//enemy img
var enemyready=false;
var enemyimage=new Image();
enemyimage.onload=function(){
    enemyready=true;
};
enemyimage.src="images/spr_enemy1.png";

//objects
var player={
    speed:256
};

var enemy={};
var kills=0;

//handle keys
var keysdown={};

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

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

//reset
var reset=function(){
    player.x=canvas.width/2;
    player.y=canvas.height/2

    enemy.x=32+(Math.random()*(canvas.width-64));
    enemy.y=32+(Math.random()*(canvas.height-64));
};

//update
var update=function(modifier){
if (38 in keysdown){
    player.y-=player.speed*modifier;//up
}
if (40 in keysdown){
    player.y+=player.speed*modifier;//down
}
if (37 in keysdown){
    player.x-=player.speed*modifier;//left
}
if (39 in keysdown){
    player.x+=player.speed*modifier;//right
}

if(
    player.x<=(enemy.x+32) 
    && enemy.x<=(player.x+32) 
    && player.y<=(enemy.y+32) 
    && enemy.y<=(player.y+32)
    ){
        ++kills;
        reset();
}
};

//render
var render=function(){
if (bgready){
    ctx.drawImage(bgimage,0,0);
}

if (playerready){
    ctx.drawImage(playerimage,player.x,player.y);
}

if (enemyready){
    ctx.drawImage(enemyimage,enemy.x,enemy.y);
}

//score
ctx.fillStyle="rgb(250,250,250)";
ctx.font="24px Helvetica";
ctx.textAlign="left";
ctx.textBaseline="top";
ctx.fillText("kills: "+kills,32,32);
};

//mainloop
var main=function(){
var now=Date.now();
var delta=now-then;

update(delta/1000);
render();

then=now;
};

//init
reset();
var then=Date.now();
setInterval(main,1);

//画布
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
画布宽度=512；
画布高度=480；
document.body.appendChild（画布）；
//背景img
var bgrady=false；
var bgimage=新图像（）；
bgimage.onload=函数（）{
bgrady=true；
};
bgimage.src=“images/bg_space.png”；
//播放器img
var playerready=假；
var playerimage=新图像（）；
playerimage.onload=函数（）{
playerready=true；
};
playerimage.src=“images/spr\u player.png”；
//敌方img
var enemyready=false；
var enemyimage=新图像（）；
enemyimage.onload=函数（）{
enemyready=true；
};
enemyimage.src=“images/spr\u enemy1.png”；
//物体
var播放器={
速度：256
};
var敌人={}；
var=0；
//把手钥匙
var keysdown={}；
addEventListener（“向下键控”，函数（e）{
keysdown[e.keycode]=真；
}，假）；
addEventListener（“键控”，函数（e）{
删除keysdown[e.keyCode]；
}，假）；
//重置
var reset=函数（）{
player.x=canvas.width/2；
player.y=canvas.height/2
敌方.x=32+（Math.random（）*（canvas.width-64））；
y=32+（Math.random（）*（canvas.height-64））；
};
//更新
变量更新=函数（修饰符）{
如果（38英寸向下）{
player.y-=player.speed*修饰符；//向上
}
如果（40英寸向下）{
player.y+=player.speed*modifier；//向下
}
如果（37英寸向下）{
player.x-=player.speed*修饰符；//左
}
如果（39英寸向下）{
player.x+=player.speed*修饰符；//右
}
如果(
player.x我认为问题可能出在HTML代码中。
我很确定正确的语法应该是：
<script type="text/javascript" src="main.js"></script>



或者，如果这不能解决问题，只需在
标记后添加一个
标记，然后将所有代码粘贴到其中。
是main.js
？这就是他们页面加载的全部内容。那么，javascript中就有一个错误：）检查浏览器的html/js检查器。您会在那里看到警告/错误。确切地说，请使用浏览器的工具并检查是否发现任何错误。或者提供指向源代码的链接，以便人们可以帮助您查找问题。html代码只告诉我们您尝试运行javascript但未成功。虽然这是更正确的语法，但并不是一个错误实际解决问题，OP自己解决了（参见他的编辑）。