0
나는 html5와 (과) javascript가있는 작은 웹 게임을 씁니다. 나는 두 개의 파일을 만들고, 하나는 htmml5 파일이다. javascript 파일이다. 내가 문제가되는 것은 내 캔버스가 null이라는 것이다. 여기 오류의 원인은 당신이 DOM이 준비되기 전에 캔버스 요소에 액세스하려고하는 것입니다 내 HTML 코드나의 캔버스가 null 인 경우 브라우저가 비어 있습니다.
<!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>
내 자바 스크립트 코드
var canvas = document.getElementById("painting");
canvas.addEventListener("keydown", function(e) { //listen the key event
doKeyDown(e);
});
var context2D = canvas.getContext("2d");
var lifecount = 3; // frogger has three life values
var score = 0; // when frogger accross a line successfully it will get 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)
{
// the up 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 about 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);