Question

我正在使用HTML5画布用js编写一个小游戏。我在一个html文件中获得了画布和标签，并将javascript放在一个名为java.js的单独文件中。

我在脚本中的某个时刻收到了一些警报，以便在我将html加载到浏览器时查看它是否运行。问题是它没有显示任何这些并且javascript没有加载。

最奇怪的是firebug的作用：在“HTML”下，当我点击标签时它会显示完整的脚本，但在“脚本”下它告诉我页面上没有javascript。

帮助？

我的HTML：

    <body><canvas id="canvas" width="1000px" height="500px" style="border:1px solid #c3c3c3;">text</canvas>
<script type="text/javascript" src="java.js">
</script></body>

当我将脚本标记放在头部时：

<head><script type="text/javascript" src="java.js">
    </script></head> 
<body><canvas id="canvas" width="1000px" height="500px" style="border:1px solid #c3c3c3;">text</canvas>
    </body>

我的js：

alert('define');
var scrollx=0,
scrolly=0,
keyID=0,
global = {};
global.players=[];
global.playermap=[];
var c=document.getElementById("canvas"),
ctx=c.getContext('2d');
alert('init');

function pony (x,y, hspd, vspd) {
alert("pony created!");
this.x = x;
this.y = y;
this.vsp = vspd;
this.hspd = hspd;
this.image = new Image();
this.image.src = "alien.png";
this.framenumber = 11;
this.frameactual = 1;
this.framespeed=0.8;
this.frametime =50;
this.framewidth = this.image.width / this.framenumber;
this.frameheight = this.image.height;
this.colorbody="#000000";
//
this.nextframe = function() {
this.frameactual=this.frameactual+this.framespeed;
if (Math.round(this.frameactual)>this.framenumber){this.frameactual=1;}
this.draw();
};
//
this.draw = function() {
this.frame=Math.round(this.frameactual);
ctx.drawImage(this.image,(this.frame-1)*this.framewidth,0,this.framewidth,this.image.height,this.x-scrollx-(this.framewidth/2),this.y-scrolly-(this.image.height/2),this.framewidth,this.image.height);
};
//
//var _this=this;
//this.frametimer=setInterval(function(){_this.nextframe();},this.frametime);
alert("time set");
}
//
function setpos_player(id,x,y,hspd,vspd){
alert("this");
if (typeof(global.playermap[id])=="undefined"){
global.players.push(new pony (x,y, hspd, vspd));
global.playermap[id]=global.players.length;}
else{
global.players[global.playermap[id]].x=x;
global.players[global.playermap[id]].y=y;
global.players[global.playermap[id]].hspd=hspd;
global.players[global.playermap[id]].vspd=vspd;}
}
//
function clear(){
    ctx.fillStyle = "#FFFFFF";
    ctx.beginPath();
    ctx.rect(0,0,1000,1000);
    ctx.closePath();
    ctx.fill();}

document.onkeypress = KeyCheck; 
document.onkeydown = KeyCheck;     
document.onkeyup = KeyRelease;   

function KeyCheck(e)

{
   keyID = (window.event) ? event.keyCode : e.keyCode;
   }
function KeyRelease(e)
{keyID=0;}

//
function step(){
clear();
for (var i = 0; i < global.players.length; i++) {
    _this=global.players[i];
    _this.y+=_this.vspd;
    _this.nextframe();
    //Do something
}
//global.players[1].nextframe();
timer=setTimeout(function(){step();},80);
}
setpos_player(1,200,200,0,1);
var timer=setTimeout(function(){step();},80);

Answer 1

这里似乎有错误：

if (typeof(global.playermap[id])="undefined"){

应该是

if (typeof(global.playermap[id])=="undefined"){

另外，尝试将所有alert次调用替换为console.log，然后查看控制台是否有错误

Answer 2

在html中使用脚本之前声明脚本你可以把这个脚本放在页面的头部，就像这样

<head>
<script type='text/javascript' src='java.js'></script>
</head>

尝试一次，然后重播

Answer 3

if (typeof(global.playermap[id])="undefined"){

到

if (typeof global.playermap[id] == "undefined"){

Answer 4

尝试为.js文件放置正确的目录路径。例如，它可能是/java.js或“/scripts/java.js”。

如果您的警报弹出，则表示如果加载了javascript。

此外，您应该知道在HEAD部分中应添加带有外部.js的脚本标记。

Javascript拒绝工作？

4 个答案: