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

}

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

在你的胸部功能中，将img.variable声明为local：

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

}

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

1 个答案: