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

我正在为学校制作一个游戏，想在其中放置一些树。我想如果我能制作一个数组，并在画布中放置数组中的几棵树，那就太好了。这个数组似乎没有画出画布上的树。我看了好几个小时都想不通。有人能帮帮我吗？

我有两个不同的.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);   
}
}

当然还有画布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>