0

私はjavascript/プログラミングにかなり慣れていないので、私が書いた基本的なキャンバスゲームスクリプトを試しています。キーイベントで 4 つの背景画像を異なる速度で左または右に移動させようとしています。これまでのところ、うまく機能しています。

キャンバスに4つの画像を描くと問題が始まります。すべての x、y および h、w 設定は正常に機能し、画像自体を受け入れます。キャンバス上では、すべての図面に対して同じ (最後に定義された) 画像が表示されます。私は今、これでどこが間違っていたのか分かりました。

皆さんが私を助けてくれることを願っています! 事前にt​​hnx

<!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 に答える