X en Y opvragen voor animatie

[thebest07111]

hallo

Ik heb deze code.

////////////////////

var gameLoop;
var loading;
var explosionImages = [];
var explosionTimer = 0;

var explosionImage = new Image();
explosionImage.ready = false;
explosionImage.onload = setAssetReady;
explosionImage.src = "explosion.png";


function setAssetReady()
{
  this.ready = true;
  
}

function preloading()
{
  if (explosionImage.ready == true)
  {
    gameLoop = setInterval(update, 1000 / 30);
    clearInterval(loading);
  }
}

function update()
{	
	for (var i = 0; i < explosionImages.length; i++)
	{
		console.log("Drawupdate");
		explosionImages[i].draw();
	}
}

function DeleteItems()
{
	for (var i = 0; i < explosionImages.length; i++)
	{
		if (explosionImages[i].markForDestroy == true)
		{
			explosionImages.splice(i,1);
			i--;
		}
		else
		{
			explosionImages[i].draw();
		}
	}	
}




function Explosion(x, y)
{
  this.x = x;
  this.y = y;
  this.frameWidth = 64;
  this.frameHeight = 64;
  this.xFrame = 0;
  this.yFrame = 0;
  this.markForDestroy = false;
}

Explosion.prototype.draw = function()
{
	ctx.drawImage(explosionImage,this.xFrame,this.yFrame,this.FrameWidth,this.FrameHeight,this.x,this.y,64,64);
	this.xFrame +=64;
	if(this.xFrame > 320)
	{
		this.xFrame = 0;
		this.yFrame +=64;
	}
	if(this.yFrame > 320)
	{
		this.markForDestroy = true;
	}
	
}

/////////////////
var enemies = [],
        enemy_x = 50,
        enemy_y = -45,
        enemy_w = 50,
        enemy_h = 50,
        speeds = {"enemy0": 1, "enemy1": 1, "enemy2": 1, "enemy3": 1, "enemy4": 1},
		hitpoints = {"enemy0": 5, "enemy1": 6, "enemy2": 7, "enemy3": 8, "enemy4": 9},
		Score = {"enemy0": 5, "enemy1": 6, "enemy2": 7, "enemy3": 8, "enemy4": 9};
		
 
 
function _Enemy($x, $y, $w, $h, $s, $i, $hitpoints,$Score) {
        this.x = $x;
        this.y = $y;
        this.w = $w;
        this.h = $h;
        this.speed = $s;
        this.image = $i;
        this.hitpoints = $hitpoints;	
		this.Score = $Score;
}
 
function drawEnemies() {
        for (var i = 0; i < enemies.length; i++) {
                ctx.drawImage(enemies[i].image, enemies[i].x, enemies[i].y);
                
        }
}
 
 

function moveEnemies() {
        for (var i = 0; i < enemies.length; i++) {
                if (enemies[i].y < height) {
                        enemies[i].y += enemies[i].speed;
                } else if (enemies[i].y > height - 1) {
                        
                        enemies[i].y = -45;
                }
        }
}
 

function hitTest() {
		var $r;
        var remove = false;
		var laserremove = false;
        for (var i = 0; i < lasers.length; i++) 
		{
                for (var j = 0; j < enemies.length; j++) 
				{
                       
                        var laser = lasers[i];
                        var enemy = enemies[j];
                        if (laser[1] <= ( enemy.y + enemy.h ) && laser[0] >= enemy.x && laser[0] <= ( enemy.x + enemy.w)) 
						{
								laserremove = true;
                                enemy.hitpoints = enemy.hitpoints - 1;
                                if (enemy.hitpoints == 0) 
								{
										
                                        enemies.splice(j, 1);
                                        remove = true;
                                        $r = Math.floor(Math.random() * 5),
                                        enemy = new Image();
                                        enemy.src = 'enemy' + $r + '.png'
                                        enemies.push(new _Enemy((Math.random() * 450 + 50), -45, enemy_w, enemy_h, speeds["enemy" + $r], enemy, hitpoints["enemy" + $r]));
                                }
 
 
                        }
						
					
                }
                if (remove == true) {
				
				
					explosionImages.push(new Explosion(this.x, this.y));
					console.log(this.x);
					explosionTimer = 0;
				
                        lasers.splice(i, 1);
						score += Score["enemy" + $r];						
                        remove = false;
                        
                }
				 if (laserremove == true) {
                        lasers.splice(i, 1);
                        laserremove = false;
                        
                }
				
        }
}
 
 
(function ($a) {
        
        for (var i = 0; i < $a; i++) {
                var $r = Math.floor(Math.random() * 5),
                        enemy = new Image();
                enemy.src = 'enemy' + $r + '.png';
 
                enemies.push(new _Enemy(enemy_x, enemy_y, enemy_w, enemy_h, speeds["enemy" + $r], enemy, hitpoints["enemy" + $r]));
                enemy_x += enemy_w + 60;
        }
})(5);

Dus als een enemy destoryd wordt moet er een spritesheet explosie afgespeeld worden. Dit werkt ook met de debugs. Ik zie alleen de explosies niet.

dit komt omdat de x en y niet werken bij de explosionimage.push als ik de x en y debug. staat er undefined.

Weet iemand hoe ik ze wel op kan vragen zodat de explosies op de goede plaats spawnen

 

[stefanz]

Heb je dit misschien ergens online staan?
dan is het namelijk makkelijker om jou te helpen.

Waar wordt eigenlijk "explosionImages" gevuld?

 

[thebest07111]

je kan hier de live demo spelen

demo

onderin het script staat explosionImages.push(new Explosion(enemy.x, enemy.y)); daar wordt die nu gevuld en hij ziet nu ook de x en y waardes van de enemy. het enige probleem alleen is nog
dat die de animatie niet afspeelt.