javascript - my canvas is null the browser is blank -
i write little web game html5 plus javascript. create 2 file ,one htmml5 file javascript file.here come problem canvas null. here html code
<!doctype html> <html> <head> <title>frogger</title> <script type="text/javascript" src="gamecontrol.js"></script> </head> <body> <canvas id="painting" width="600" height="600" tabindex="0" style="border: solid blue 1px"> </canvas> </body> </html> my javascript code
var canvas = document.getelementbyid("painting"); canvas.addeventlistener("keydown", function(e) { //listen key event dokeydown(e); }); var context2d = canvas.getcontext("2d"); var lifecount = 3; // frogger has 3 life values var score = 0; // when frogger accross line 10 points var pic = new image(); var pic1=new image(); var picpipe1 = new image(); // pipe image var picpipe2 = new image(); var spider1 = new image(); var spider2 = new image(); var gresp1 = new image(); var gresp2 = new image(); var rocket = new image(); var car = new image(); var wheel = new image(); var car1 = new image(); var car2 = new image(); //the coordinates var x=0,y=110; var spider1x= 0,spider1y=140; var spider2x= 0,spider2y=230; var x1=300,y1=450; // frogger's ordinary coordinate var pipe1x=0,pipe1y=170; var pipe2x= 0,pipe2y=200; var rocketx = 0,rockety=300; var carx = 0, cary =330; var wheelx= 0,wheely=360; var car1x= 0, car1y=390; var car2x= 0, car2y=420; //load image pic.src = "pipe.jpg"; pic1.src = "qingwa.jpg"; picpipe1.src = "pipe.jpg"; picpipe2.src = "pipe.jpg"; spider1.src="spider.jpg"; spider2.src="spider.jpg"; gresp1.src = "gresp.jpg"; gresp2.src = "gresp.jpg"; rocket.src = "rocket.jpg"; car.src = "car.jpg"; wheel.src = "wheel.jpg"; car1.src = "car1.jpg"; car2.src = "car2.jpg"; function drawline() { context2d.moveto(0,100); context2d.lineto(35,100); context2d.lineto(35,60); context2d.lineto(85,60); context2d.lineto(85,100); context2d.lineto(155,100); context2d.lineto(155,60); context2d.lineto(205,60); context2d.lineto(205,100); context2d.lineto(275,100); context2d.lineto(275,60); context2d.lineto(325,60); context2d.lineto(325,100); context2d.lineto(395,100); context2d.lineto(395,60); context2d.lineto(445,60); context2d.lineto(445,100); context2d.lineto(515,100); context2d.lineto(515,60); context2d.lineto(565,60); context2d.lineto(565,100); context2d.lineto(600,100); context2d.stroke(); } function dokeydown(e) { switch (e.keycode) { // key case 38: y1 = y1 - 45; break; //the down key case 40: y1 = y1 + 45; break; //the left key case 37: x1 = x1 - 10; break; //the right key case 39: x1 = x1 + 10; break; } } function drawfrogger() { context2d.drawimage(pic1,x1,y1); } function draw() { context2d.clearrect(0,0,600,600); context2d.save(); context2d.drawimage(gresp1,0,250); context2d.drawimage(gresp2,0,450); context2d.drawimage(pic,x,y); context2d.drawimage(picpipe1,pipe1x,pipe1y); context2d.drawimage(picpipe2,pipe2x,pipe2y); context2d.drawimage(spider1,spider1x,spider1y); context2d.drawimage(spider2,spider2x,spider2y); context2d.drawimage(rocket,rocketx,rockety); context2d.drawimage(car,carx,cary); context2d.drawimage(wheel,wheelx,wheely); context2d.drawimage(car1,car1x,car1y); context2d.drawimage(car2,car2x,car2y); //some text score line context2d.font = "40pt calibri"; context2d.fillstyle = "blue"; context2d.filltext('score:',0,550); context2d.font = "40pt calibri"; context2d.fillstyle = "red"; context2d.filltext(score,180,550); x = x + 100; pipe1x = pipe1x + 60; pipe2x = pipe2x + 80; spider1x = spider1x + 70; spider2x = spider2x + 55; rocketx = rocketx + 35; carx = carx + 25; wheelx = wheelx + 55; car1x =car1x + 45; car2x = car2x + 38; drawfrogger(); drawline(); context2d.restore(); //绘制结束以后，恢复画笔状态 if(x>600) x = 0; if(pipe1x > 600) pipe1x = 0; if(pipe2x > 600) pipe2x = 0; if(spider1x > 600) spider1x = 0; if(spider2x > 600) spider2x = 0; if(rocketx > 600) rocketx = 0; if(carx > 600) carx = 0; if(wheelx > 600) wheelx = 0; if(car1x > 600) car1x = 0; if(car2x > 600) car2x = 0; } //collision test function collision() { switch(y1) { case 405: score = 10; break; case 360: score = 20; break; case 315: score = 30; break; case 270: score = 40; break; case 225: score = 50; break; } } function run() { draw(); collision() } setinterval(run, 1000);
the reason error attempting access canvas element before dom ready.
making following modification js should sovle it.
window.onload = function() { var canvas = document.getelementbyid("painting"); ... ... car2.src = "car2.jpg"; }; function drawline() { ... } ... rest of functions
Comments
Post a Comment