Well I am coding a little game with js using a HTML5 canvas. I got the canvas and the tag in a html file and the javascript in a seperate file called java.js.
I got some alerts at some moment in the script to find out if it runs when I load the html into my browser. Problem is it does not show any of these and the javascript doesnt load.
The weirdest is what firebug does: Under “HTML” it shows me the full script when I click the tag, but under “Script” it tells me there is no javascript on the page.
Help?
my 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>
When I put the script tag in the head:
<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>
my 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);
Seems you have an error here:
should be
also, try replacing all
alertcalls toconsole.logand then check out the console for errs