将数组中的对象放在画布中

Question

我正在为学校制作一个游戏，并想在其中放置一些树。我认为如果我可以制作一个数组并将数组中的几棵树放在画布中会很好。似乎该数组没有在画布上绘制树木。我看着它几个小时，无法弄清楚。有人可以帮帮我吗？

我有两个不同的 .js 文件。一个是通用文件，一个是树。

首先是将军：

$(document).ready(function() {
var horse = new Image();
horse.src = "ash.png"
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var xPos = 0;
var yPos = 0;
var animStep = 0;
var sx = 0;
var sy = 96;
var previousStep = Date.now();
var moveRight = false;
var moveLeft = false;
var moveUp = false;
var moveDown = false;
var achtergrond = 0;

//background 1
var grass = new Image();
grass.src = "grass.png";
var grassPattern;
grass.onload = function(){
        grassPattern = context.createPattern(grass,"repeat");
}

//background 2
var cave = new Image(); 
cave.src = "cave.png"; 
var cavePattern; 
    cave.onload = function(){ 
    cavePattern = context.createPattern(cave,"repeat"); 
    } 


//start drawfunction --------------------------------------------
function draw(){
//make an array:
var objects = [];
//make the chests:
objects.push( new Chest(100,200) );
objects.push( new Chest(200,200) );
objects.push( new Chest(200,100) );

for (var i = 0; i < objects.length; i++) {
    objects[i].draw();
}

update();
spritesheet();

    //spritesheet back in the canvas:
    if ( xPos > canvas.width ) {
            xPos = 0;
            achtergrond = 1;
    }
    if (xPos < -32){
        xPos = canvas.width;
        achtergrond = 0;
    }
    if ( yPos > canvas.height ) {
        // put the y to 0
        yPos = 0;
        achtergrond = 1;
    }
    if ( yPos < -32 ) {
        yPos = canvas.height;
        achtergrond = 0;
    }

    if (achtergrond == 0){
        context.fillStyle=grassPattern;
        context.fillRect (0,0,canvas.width,canvas.height);
    }
    else if (achtergrond == 1){
        context.fillStyle=cavePattern;
        context.fillRect (0,0,canvas.width,canvas.height);
    }


    context.drawImage(horse,animStep*32,sy,28,32,xPos,yPos,30,32);

    // call the function walk:
walk();

    requestAnimationFrame(draw);
}

draw();
//end draw function ----------------------------------------------------

$(document).keydown( function(evt) {
    if (evt.which == 39){ // if the right arrow key is pressed
        moveRight = true;
    }
    if (evt.which == 37){ // if the left arrow key is pressed
        moveLeft = true;
    }
    if (evt.which == 38){ // if the up arrow key is pressed
        moveUp = true;
    }
    if (evt.which == 40){ // if the down arrow key is pressed
        moveDown = true;
    }
});     
$(document).keyup( function(evt) {
    if (evt.which == 39){ // if the right arrow key is lifted
        moveRight = false;
    }
    if (evt.which == 37){ // if the left arrow key is lifted
        moveLeft = false;
    }
    if (evt.which == 38){ // if the up arrow key is lifted
        moveUp = false;
    }
    if (evt.which == 40){ // if the down arrow key is lifted
        moveDown = false;
    }
}); 

function update() {
    if (moveRight) {
        xPos += 4;
    } else if (moveLeft) {
        xPos -= 4;
    } else if (moveUp) {
        yPos -= 4;
    } else if (moveDown) {
        yPos += 4;
    }

}

function walk(){
if (Date.now() - previousStep > 1000/10) {
        animStep += 1;
            if (animStep == 5) {
                animStep = 0;
            }
        previousStep = Date.now();
    }

}

function spritesheet() {
        if (moveUp) { 
         sy = 65; 
        } else if (moveDown) { 
         sy = 0; 
        } else if (moveRight){ 
         sy = 96; 
        } else if (moveLeft) { 
         sy = 32; 
        }
    // als we in geen enkele richting lopen (! betekent niet) 
    if (!moveRight && !moveLeft && !moveUp && !moveDown) { 
    // staan we blijkbaar stil en gebruiken we de neutrale pose 
    sx = animStep = 0;
    } else { 
    // anders het huidige stapje maal de breedte van 1 stapje 
    sx = animStep * 32;
    } 
}

});

和第二个 .js 文件：

function Chest(x,y) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// Chest Image object maken
var img = new Image();
img.src = "boom.png";

this.draw = function() {
context.drawImage(img,0,0,33,33,this.x,this.y,33,33);   
}

}

当然还有 canvas HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script src="rAF.js"></script>
 <script src="objects.js"></script>
 <script src="index.js"></script>
 <title>Untitled Document</title>
 </head>

<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
</body>
</html>

Answer 1

在您的 Chest-function 中，将 img.variable 声明为本地：

function Chest(x,y) {
//The function should be able to find these global variables without you delcaring them inside
//var canvas = document.getElementById('myCanvas');
//var context = canvas.getContext('2d');

//declaring your x and y variables
this.x = x;
this.y = y;

// Chest Image object maken
this.img = new Image();
this.img.src = "boom.png";

this.draw = function() {
    context.drawImage(this.img,0,0,33,33,this.x,this.y,33,33);   
}

}