0

我用 html5 和 javascript 编写了一个小网页游戏。我创建了两个文件，一个是 htmml5 文件，另一个是 javascript 文件。我遇到的问题是我的画布为空。这是我的html代码

<!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>

我的 JavaScript 代码

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);
4

2 回答 2

0

错误的原因是您试图在 DOM 准备好之前访问 canvas 元素。

对您的 JS 进行以下修改应该可以解决它。

window.onload = function() {
    var canvas = document.getElementById("painting");
    ...
    ... 
    car2.src = "car2.jpg";
};

function drawline() {
    ...
}

... rest of the functions
于 2013-05-19T06:58:22.647 回答
0

您的问题是 javascript 文件没有功能，而是直接代码...所以它在包含 js 文件的地方执行...此时您的 DOM 中没有画布..

解决方案是在js中使用

function myfun(){
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
... //remaining code

}

然后在 HTML 中更新 body 标签

<body onload="myfun()">
于 2013-05-19T07:00:49.583 回答