0

我对javascript/编程很陌生，我正在尝试我写的一些基本的画布游戏脚本。我试图让 4 个背景图像在一个关键事件上以不同的速度向左或向右移动。到目前为止一切顺利，效果很好。

当我在画布上绘制 4 个图像时，问题就开始了。所有 x,y 和 h,w 设置都可以正常工作，接受图像本身。在画布上，它为所有图纸显示了相同的（最后定义的）图像。我现在知道我在这个问题上哪里出错了。

希望你们能帮帮我！提前谢谢

<!DOCTYPE HTML>
<html>
<head>
    <title>Canvas test game/ movement</title>
</head>
<body>
<canvas id="myCanvas" width="1600" height="1000"></canvas>
<footer></footer>
</body>
<script>
    var canvas  = document.getElementById('myCanvas'),
            context = canvas.getContext('2d'),
            img     = new Image();

    var newImage = function(){
        this.image = function(name){
            img.src="./images/" + name;
        };
        this.setSize = function(w, h){
            this.w = w;
            this.h = h;
        };
        this.setPosition = function(x, y){
            this.x = x;
            this.y = y;
        };
        this.setSpeed = function(speed){
            this.speed = speed;
        };
        this.changePosition = function(direction){
            if (direction){
                this.x = this.x + this.speed;
            } else {
                this.x = this.x - this.speed;
            }
        };
        this.draw = function(){
            context.drawImage(img, this.x, this.y, this.w, this.h);
        };
    };

    var move = function(direction){
        achtergrond.changePosition(direction);
        maan.changePosition(direction);
        landschapAchter.changePosition(direction);
        landschapVoor.changePosition(direction);
    };

    var achtergrond = new newImage();
    achtergrond.image("galaxy.png");
    achtergrond.setSize(1600, 1000);
    achtergrond.setPosition(0, 0);
    achtergrond.setSpeed(0);

    var maan = new newImage();
    maan.image("maan.png");
    maan.setSize(400, 400);
    maan.setPosition(200, 100);
    maan.setSpeed(1);

    var landschapAchter = new newImage();
    landschapAchter.image("landschapAchter.png");
    landschapAchter.setSize(3200, 500);
    landschapAchter.setPosition(0, 450);
    landschapAchter.setSpeed(2);

    var landschapVoor = new newImage();
    landschapVoor.image("landschapVoor.png"); // In the browser all 4 (achtergrond, maan, landschapAchter and landschapVoor) objects show this img on object.draw()
    landschapVoor.setSize(4294, 400);
    landschapVoor.setPosition(0, 600);
    landschapVoor.setSpeed(3);

    var checkKey = function(e){
        e = e || window.event;
        if (e.keyCode == '37') {
            move(1);
        } else if (e.keyCode == '39') {
            move(0);
        }
        // Move images on key event
        context.clearRect ( 0, 0 , 1600 , 1000 );
        achtergrond.draw();
        maan.draw();
        landschapAchter.draw();
        landschapVoor.draw();
    };

    window.onload = function(){
        maan.draw();
        landschapAchter.draw();
        landschapVoor.draw();
        achtergrond.draw();
    }

    document.onkeydown = checkKey;
</script>
</html>
4

1 回答 1

1

我认为您在指定 src 标签时错过了这个:)

var newImage = function(){
    this.image = function(name){
        this.src="./images/" + name;
    };

尝试这个。

于 2013-09-13T14:59:23.240 回答