verschillende plaatjes met verschillende speeds

Status
Niet open voor verdere reacties.
T

thebest07111

Gebruiker
Lid geworden
28 nov 2011
Berichten
64
hallo

Ik ben bezig met een top down shooter

Ik heb nu dat er steeds 1 soort vliegtuig naar beneden komt
Maar ik wil dat er 5 enemeys naar beneden komen

met de naam enemy.png enemy1.png enemy2.png enemy3.png enemy4.png

Deze moeten ook allemaal gewoon de hittest hebben die al in het script staat. Ook moet die gewoon tellen dat er een max is.
Nu staat er max 5 vliegtuigen dit moet ook gebeuren als er meerdere zijn. dus bijvoorbeeld 1 van elk plaatje
Ik zou alleen niet weten hoe ik dit moet doen.
Kan iemand mij hiermee helpen.

Hier is mijn code[js]//enemies
var enemy;
var enemyTotal = 5;
var enemies = [];
var enemy_x = 50;
var enemy_y = -45;
var enemy_w = 50;
var enemy_h = 50;
var speed = 3;




//Build enemy array of x/y coordinate, width, height, and speed
for (var i = 0; i < enemyTotal; i++) {
enemies.push([enemy_x, enemy_y, enemy_w, enemy_h, speed]);
enemy_x += enemy_w + 60;
}

//Iterate through array of enemies and draw them on the canvas
function drawEnemies() {
for (var i = 0; i < enemies.length; i++) {
ctx.drawImage(enemy, enemies[0], enemies[1]);
}
}

//Iterate through array of enemies and update their position
function moveEnemies() {
for (var i = 0; i < enemies.length; i++) {
if (enemies[1] < height) {
enemies[1] += enemies[4];
} else if (enemies[1] > height - 1) {
//after the enemies scroll off screen, this value is where they get re-spawned
enemies[1] = -45;
}
}
}

//Check for laser collision
function hitTest() {
var remove = false;
for (var i = 0; i < lasers.length; i++) {
for (var j = 0; j < enemies.length; j++) {
//laser's y position is less than or equal to the enemy's y position plus its height -AND-
//laser's x position is greater than or equal to the enemy's x position -AND-
//laser's x position is less than or equal to the enemy's x position plus it's width
if (lasers[1] <= (enemies[j][1] + enemies[j][3]) && lasers[0] >= enemies[j][0] && lasers[0] <= (enemies[j][0] + enemies[j][2])) {
remove = true;
//draw();//hier explosion afspelen
enemies.splice(j, 1); //enemy at this array position no longer gets drawn
enemies.push([(Math.random() * 500) + 50, -45, enemy_w, enemy_h, speed]); //refill a new enemy in a random x position between 50 and 500
}
}
if (remove == true) {
lasers.splice(i, 1); //laser at this array position no longer gets drawn
remove = false;
score += 10;
}
}
}
[/js]

en hier worden de images aangemaakt

[js]//wereld
var canvas;
var ctx;
var width = 600;
var height = 600;
var starfield;
var starX = 0;
var starY = 0;
var starY2 = -600;

//scoring
var score = 0;
var alive = true;
var lives = 3;
var gameStarted = false;

image = new Image()
image.src = 'explosion.png';

//Clear the canvas, this is required before each canvas frame update
function clearCanvas() {
ctx.clearRect(0, 0, width, height);
}

//Initialize image objects, canvas, and event listeners
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
enemy = new Image();
enemy.src = 'enemy.png';
ship = new Image();
ship.src = 'ship.png';
starfield = new Image();
starfield.src = 'starfield.jpg';
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
canvas.addEventListener('click', gameStart, false);
gameLoop();
}

//Used by an event listener. Removes the overall canvas listener once game has started.
function gameStart() {
gameStarted = true;
canvas.removeEventListener('click', gameStart, false);
}

//Game loop that calls all the functions needed to be updated
function gameLoop() {
clearCanvas();
drawStarfield();
if (alive && gameStarted && lives > 0) {
hitTest();
moveEnemies();
moveLaser();
drawEnemies();
drawShip();
drawLaser();
shipCollision();
}
scoreTotal();
//game = setTimeout(gameLoop, 1000 / 30); //not sure why 'game =' is included...
setTimeout(gameLoop, 1000 / 30); //this works too...
}

//Used to draw several text and shape objects for score, lives, and pre-game information.
function scoreTotal() {
ctx.font = 'bold 18px VT323';
ctx.fillStyle = '#fff';
ctx.fillText('Score: ', 10, 55);
ctx.fillText(score, 70, 55);
ctx.fillText('Lives: ', 10, 30);
ctx.fillText(lives, 68, 30);

if (!alive) {
ctx.fillText('Game Over!', 245, (height / 2));

//Continue button
ctx.fillRect((width / 2) - 65, (height / 2) + 10, 100, 40);
ctx.fillStyle = '#000';
ctx.fillText('Opnieuw?', 252, (height / 2) + 35);
canvas.addEventListener('click', continueButton, false);
}

//Pre-Game Text
if (!gameStarted) {
ctx.font = 'bold 50px VT323';
ctx.fillText('Sander Gouman top down', (width / 2) - 210, (height / 2));
ctx.font = 'bold 20px VT323';
ctx.fillText('Klik om te spelen', (width / 2) - 56, (height / 2) + 30);
ctx.fillText('Beweeg met de pijltjes', (width / 2) - 100, (height / 2) + 60);
ctx.fillText('Gebruik de spatiebalk om te schieten', (width / 2) - 100, (height / 2) + 90);
}
}

//Used by an event listener. Detects if mouse click is within a specific area.
function continueButton(e) {
var cursorPos = getCursorPos(e);
if (cursorPos.x > (width / 2) - 53 && cursorPos.x < (width / 2) + 47 && cursorPos.y > (height / 2) + 10 && cursorPos.y < (height / 2) + 50) {
alive = true;
lives = 3;
reset();
canvas.removeEventListener('click', continueButton, false);
}
}

//Used for detection of mouse click on canvas
function getCursorPos(e) {
var x;
var y;

if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}

x -= canvas.offsetLeft;
y -= canvas.offsetTop;
var cursorPos = new cursorPosition(x, y);

return cursorPos;
}

//Store x and y cursor position
function cursorPosition(x, y) {
this.x = x;
this.y = y;
}

//Check lives
function checkLives() {
lives -= 1;
if (lives > 0) {
reset();
} else if (lives == 0) {
alive = false;

}
}

//Reset enemies and player back to default position
function reset() {
var enemy_reset_x = 50;
ship_x = (width / 2) - 25;
ship_y = height - 75;
ship_w = 50;
ship_h = 57;

for (var i = 0; i < enemies.length; i++) {
enemies[0] = enemy_reset_x;
enemies[1] = -45;
enemy_reset_x = enemy_reset_x + enemy_w + 60;
}
}

//Draw a continuous, scrolling starfield (using two instances)
function drawStarfield() {
ctx.drawImage(starfield, starX, starY);
ctx.drawImage(starfield, starX, starY2);

if (starY > 600) {
starY = -599;
}

if (starY2 > 600) {
starY2 = -599;
}

starY += 1;
starY2 += 1;
}

//Initialize canvas when page is loaded
window.onload = init;


[/js]
 
Laatst bewerkt door een moderator:
In je "init" functie declareer je nu de afbeelding:
[js]
enemy = new Image();
enemy.src = 'enemy.png';
[/js]
Het wordt dus zaak dat je niet één keer die declareert maar vaker of dynamisch.

De makkelijkste manier om dit te doen is volgens mij de functie "drawEnemies" aan te passen zodat je daar random een afbeelding selecteert en die gebruikt.
Aangezien je de afbeeldingen hebt genummerd kun je een willekeurig getal laten genereren en die aan de bestandsnaam plakken, je zult wel "enemy.png" moeten hernoemen naar "enemy0.png" wil je dit laten werken.
[js]
function drawEnemies() {
for (var i = 0; i < enemies.length; i++) {
enemy.src = 'enemy'+ Math.floor(Math.random() * 6) +'.png';
ctx.drawImage(enemy, enemies[0], enemies[1]);
}
}
[/js]
 
bedankt

helaas werkt het niet helemaal zoals het zou meoten
ik zie dat die verschillende plaatjes pakt
maar deze komen niet als 1 geheel naar beneden
ze veranderen steeds van plaatje heel snel achter elkaar
zonder goed naar beneden te gaan in het plaatje waar ze gemaakt zijn
Ik heb even een dropbox linkje gemaakt
als je wilt kan je hem downlaoden kan je eht zien wat het probleem is

Ik hoop dat je kan helpen

Dropbox link
 
Geduld is een schone zaak ;)

Wat er nu gebeurd (en waar ik geen rekening mee gehouden had) is dat elke keer de "enemies" opnieuw getekend worden. Dus wordt er steeds een willekeurige afbeelding gebruikt per nieuwe tekening. Het is dus zaak dit ergens anders vast te stellen. Nu regel je dit in init, daar halen we dit weg:
[js]
enemy = new Image();
enemy.src = 'enemy.png';[/js]
en dat gaan we in deze for-lus regelen:
[js]
//Build enemy array of x/y coordinate, width, height, and speed
for (var i = 0; i < enemyTotal; i++) {
enemies.push([enemy_x, enemy_y, enemy_w, enemy_h, speed]);
enemy_x += enemy_w + 60;
}[/js]

Dan krijgen we dus dit:
[js]
//Build enemy array of x/y coordinate, width, height, and speed
for (var i = 0; i < enemyTotal; i++) {
var enemy = new Image();
enemy.src = 'enemy'+ Math.floor(Math.random() * 6) +'.png';

enemies.push([enemy_x, enemy_y, enemy_w, enemy_h, speed, enemy]);
enemy_x += enemy_w + 60;
}[/js]
Nu wordt er per vijand een nieuwe afbeelding gekozen en toegevoegd aan de array.

Dan is het alleen nog zaak deze afbeelding te gebruiken tijdens het tekenen:
[js]
function drawEnemies() {
for (var i = 0; i < enemies.length; i++) {
ctx.drawImage(enemies[5], enemies[0], enemies[1]);
}
}[/js]
 
hoi

bEdankt dit werkt ongeveer

alleen als ik 1 keer schiet en dan dus een enemy raak stopt het spel en krijg ik deze error

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

het zou in deze regel zitten
ctx.drawImage(enemies[5], enemies[0], enemies[1]);

weet u misschien hoe je dit op moet lossen

voorderest is het goed
 
Laatst bewerkt:
Dat komt zo te zien omdat binnen de hitTest een nieuwe vijand in de array wordt gezet, daar mist de 5e array-waarde: Het afbeelding object.

Aangezien het niet handig is om deze logica op twee plekken te moeten implementeren (DRY-principe, Don't Repeat Yourself) zou je het genereren in een apart functie moeten plaatsen en dan die functie aanroepen.
 
opgelost

de drawimage die boven staat bij de for loop moest ook bij de hittest

ze gaan nu alleen nog dezelfde snelheid. is hier ook nog een makkelijke manier voor zodat ze per plaatje een verschillende snelheid gaan? dus alle enemy0 sneller dan enemy3

heel erg bedankt
 
Laatst bewerkt:
the code werkt toch nog niet helemala goed

ik hoop dat je nog kan helpen

NA een paar enemy's er zijn gespawned blijven er steeds van dezefrlde plaatjes komen en komen er geen andere meer
weet u hoe dit komt en hoe ik dit kan oplossen?
 
Ik heb de code iets aangepast zodat alle enemy's een aparte speed hebben

Nu heb ik alleen het probleem dat de colliders het niet meer doen en dat de lazer gewoon over het vliegtuigje heen vliegt

Code: 
//enemies
var enemies = [],
	enemy_x = 50,
	enemy_y = -45,
	enemy_w = 50,
	enemy_h = 50,
	speeds = {"enemy0": 5, "enemy1": 1, "enemy2": 1, "enemy3": 1, "enemy4": 1, "enemy5": 1},
	explosionimage = new Image();
explosionimage.src = "explosion.png";

function _Enemy($x, $y, $w, $h, $s, $i) {
	this.x = $x;
	this.y = $y;
	this.w = $w;
	this.h = $h;
	this.speed = $s;
	this.image = $i;
}

// Iterate through array of enemies and draw them on the canvas
function drawEnemies() {
  for(var i = 0; i < enemies.length; i++) {
    ctx.drawImage(enemies[i].image, enemies[i].x, enemies[i].y);
		// Or you can use
		// ctx.drawImage(enemies[i]["image"], enemies[i]["x"], enemies[i]["y"]);
	}
}


// Iterate through array of enemies and update their position
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) {
      // after the enemies scroll off screen, this value is where they get re-spawned
      enemies[i].y = -45;
    }
  }
}

// Check for laser collision
function hitTest() {
  var remove = false;
  for(var i = 0; i < lasers.length; i++) {
    for(var j = 0; j < enemies.length; j++) {
      // laser's y position is less than or equal to the enemy's y position plus its height -AND-
      // laser's x position is greater than or equal to the enemy's x position -AND-
      // laser's x position is less than or equal to the enemy's x position plus it's width
      if(lasers[i].y <= (enemies[j].y + enemies[j].h) && lasers[i].x >= enemies[j].x && lasers[i].x <= (enemies[j].x + enemies[j].w)) {
        remove = true;
        enemies.splice(j, 1); //enemy at this array position no longer gets drawn
				
				var $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));
      }
    }
    if(remove == true) {
      lasers.splice(i, 1);  // laser at this array position no longer gets drawn
      remove = false;
      score += 10;
    }
  }
}


(function($a) {
	//Build enemy array of x/y coordinate, width, height, and speed
	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));
		enemy_x += enemy_w + 60;
	}
})(5); // Here you can pass in the number of enemies to create

live demo hier
 
Colliders werken niet

hallo

Ik ben bezig met een space shooter

Hier heb ik een deel van het script dat ik gebruik
Dit script zorgt ervoor dat elke enemy een andere snelheid heeft die ik zelf kan aangeven.

Code:
Code: 
//enemies
var enemies = [],
	enemy_x = 50,
	enemy_y = -45,
	enemy_w = 50,
	enemy_h = 50,
	speeds = {"enemy0": 5, "enemy1": 6, "enemy2": 7, "enemy3": 8, "enemy4": 9, "enemy5": 10},
	explosionimage = new Image();
explosionimage.src = "explosion.png";

function _Enemy($x, $y, $w, $h, $s, $i) {
	this.x = $x;
	this.y = $y;
	this.w = $w;
	this.h = $h;
	this.speed = $s;
	this.image = $i;
}

// Iterate through array of enemies and draw them on the canvas
function drawEnemies() {
  for(var i = 0; i < enemies.length; i++) {
    ctx.drawImage(enemies[i].image, enemies[i].x, enemies[i].y);
		// Or you can use
		// ctx.drawImage(enemies[i]["image"], enemies[i]["x"], enemies[i]["y"]);
	}
}


// Iterate through array of enemies and update their position
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) {
      // after the enemies scroll off screen, this value is where they get re-spawned
      enemies[i].y = -45;
    }
  }
}

// Check for laser collision
function hitTest() {
  var remove = false;
  for(var i = 0; i < lasers.length; i++) {
    for(var j = 0; j < enemies.length; j++) {
      // laser's y position is less than or equal to the enemy's y position plus its height -AND-
      // laser's x position is greater than or equal to the enemy's x position -AND-
      // laser's x position is less than or equal to the enemy's x position plus it's width
      if(lasers[i].y <= (enemies[j].y + enemies[j].h) && lasers[i].x >= enemies[j].x && lasers[i].x <= (enemies[j].x + enemies[j].w)) {
        remove = true;
        enemies.splice(j, 1); //enemy at this array position no longer gets drawn
				
				var $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));
      }
    }
    if(remove == true) {
      lasers.splice(i, 1);  // laser at this array position no longer gets drawn
      remove = false;
      score += 10;
    }
  }
}


(function($a) {
	//Build enemy array of x/y coordinate, width, height, and speed
	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));
		enemy_x += enemy_w + 60;
	}
})(5); // Here you can pass in the number of enemies to create
Alleen het rare is. als ik een lazer afschiet dan vliegt de lazer of de enemy heen. en raakt hem dus niet.

Ik had eerst een oud script gemaakt.
dat was dit script daar doen de colliders het wel in. Maar kan ik niet de snelheden van de afzonderlijke enemy's aangeven
Code:
Code: 
//enemies
var enemy;
var enemyTotal = 5;
var enemies = [];
var enemy_x = 50;
var enemy_y = -45;
var enemy_w = 50;
var enemy_h = 50;
var speed = 3;

var explosionimage = new Image();
explosionimage.src = "explosion.png";
 

//Build enemy array of x/y coordinate, width, height, and speed
for (var i = 0; i < enemyTotal; i++) {
//var speed=Math.floor(Math.random()*5) // verschillende snehlehden
	var enemy = new Image();
    enemy.src = 'enemy'+ Math.floor(Math.random() * 5) +'.png';
	
    
    enemies.push([enemy_x, enemy_y, enemy_w, enemy_h, speed, enemy]);
    enemy_x += enemy_w + 60;
}

console.log(enemies);

//Iterate through array of enemies and draw them on the canvas
function drawEnemies() {
  for (var i = 0; i < enemies.length; i++) {
    ctx.drawImage(enemies[i][5], enemies[i][0], enemies[i][1]);
 }
}


//Iterate through array of enemies and update their position
function moveEnemies() {
  for (var i = 0; i < enemies.length; i++) {
    if (enemies[i][1] < height) {
      enemies[i][1] += enemies[i][4];
    } else if (enemies[i][1] > height - 1) {
      //after the enemies scroll off screen, this value is where they get re-spawned
      enemies[i][1] = -45;
    }
  }
}

//Check for laser collision
function hitTest() {
  var remove = false;
  for (var i = 0; i < lasers.length; i++) {
    for (var j = 0; j < enemies.length; j++) {
      //laser's y position is less than or equal to the enemy's y position plus its height -AND-
      //laser's x position is greater than or equal to the enemy's x position -AND-
      //laser's x position is less than or equal to the enemy's x position plus it's width
      if (lasers[i][1] <= (enemies[j][1] + enemies[j][3]) && lasers[i][0] >= enemies[j][0] && lasers[i][0] <= (enemies[j][0] + enemies[j][2])) {
        remove = true;
		
		
		
		//draw();//hier explosion afspelen
        enemies.splice(j, 1); //enemy at this array position no longer gets drawn
       // enemies.push([(Math.random() * 500) + 50, -45, enemy_w, enemy_h, speed]);
	 
		enemies.push([(Math.random() * 500) + 50, -45, enemy_w, enemy_h, speed, enemy]);	//refill a new enemy in a random x position between 50 and 500
      }
    }
    if (remove == true) {
      lasers.splice(i, 1);  //laser at this array position no longer gets drawn
      remove = false;
      score += 10;
    }
  }
}
Dus weet iemand hoe ik de code die aan het begin van dit bericht staat. Dus met de makkellijke variable hoe snel iets gaat hoe ik daar de colliders werkend krijg?

Als toevoeging kan je hier een live demo zien

Kan je makkelijker zien wat het probleem is

live demo
 
enemy's variable hitpoints en punten per soort

hallo

Ik heb tot nu toe deze code
Code: 
//enemies
var enemies = [],
	enemy_x = 50,
	enemy_y = -45,
	enemy_w = 50,
	enemy_h = 50,
	speeds = {"enemy0": 5, "enemy1": 6, "enemy2": 7, "enemy3": 8, "enemy4": 9, "enemy5": 10},
	hitpoints = {"enemy0": 5, "enemy1": 6, "enemy2": 7, "enemy3": 8, "enemy4": 9, "enemy5": 10};
	points = {"enemy0": 6, "enemy1": 7, "enemy2": 7, "enemy3": 8, "enemy4": 9, "enemy5": 10};

function _Enemy($x, $y, $w, $h, $s, $i, $h) {
	this.x = $x;
	this.y = $y;
	this.w = $w;
	this.h = $h;
	this.speed = $s;
	this.image = $i;
	this.hitpoints = $h;
}

// Iterate through array of enemies and draw them on the canvas
function drawEnemies() {
  for(var i = 0; i < enemies.length; i++) {
    ctx.drawImage(enemies[i].image, enemies[i].x, enemies[i].y);
	}
}


// Iterate through array of enemies and update their position
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) {
      // after the enemies scroll off screen, this value is where they get re-spawned
      enemies[i].y = -45;
    }
  }
}

// Check for laser collision
function hitTest() {
  var remove = 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) ) {
        remove = true;
        enemies.splice(j, 1);
				
				var $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));
      }
    }
    if(remove == true) {
      lasers.splice(i, 1);
     remove = false;
      score += 10;
    }
  }
}


(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));
		enemy_x += enemy_w + 60;
	}
})(5);

Ik weet alleen neit goed hoe ik verder moet.

Ik wil graag dat als ik op een enemy schiet er 1 hitpoint vanaf gaat bij die enemy. dus zoals bovenin aangegeven dat ik enemy0 5 keer moet raken voordat die destroyed wordt. en enemy1 6 keer moet raken voordat die destroyed wordt.

Ook wil ik graag dat als bijvoorbeeld enemy0 doodgaat dus als ik heb 5 keer heb beschoten dat 6 punten krijg en als ik enemy1 dood is 7 punten krijg. Nu staat dit namelijk standaard op 10

Ik hoop dat jullie mij kunnen helpen
 
Laatst bewerkt:
Laten we niet voor elke wijziging een nieuwe vraag maken ;) Ik heb je vragen samengevoegd aangezien het nog steeds over hetzelfde gaat :)

Om de scores dynamisch te maken dien je jouw controle (if (remove == true)) te verplaatsen naar een punt waarbij je weet welke vijand geraakt is.
Dus:
[js]function hitTest() {
var remove = false;
for(var i = 0; i < lasers.length; i++) {
for(var j = 0; j < enemies.length; j++) {
var laser = lasers;
var enemy = enemies[j];
if ( laser[1] <= ( enemy.y + enemy.h ) && laser[0] >= enemy.x && laser[0] <= ( enemy.x + enemy.w) ) {
lasers.splice(i, 1);
score += { HIER PUNTEN OPVRAGEN };

enemies.splice(j, 1);

var $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));
}
}
}
}[/js]
Ik had eerst gedacht gebruik te kunnen maken van var enemy voor de punten maar die array bevat volgens mij niet de punten die ik moet toekennen. Waarschijnlijk kun je dus beter er voor zorgen dat het punten aantal via een _Enemy op te vragen is.
 
Laatst bewerkt:
Een deel is nu opgelost

ik heb nu een aantal hitpoints.
Alleen het ik krijg het niet toegevoegd dat ik ook per enemy verschillende soorten punten krijg die ik van te voren aangeef.

Code: 
//enemies
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, "enemy5": 1},
		hitpoints = {"enemy0": 5, "enemy1": 6, "enemy2": 7, "enemy3": 8, "enemy4": 9, "enemy5": 10},
		points = {"enemy0": 6, "enemy1": 6, "enemy2": 7, "enemy3": 8, "enemy4": 9, "enemy5": 10};
 
 
function _Enemy($x, $y, $w, $h, $s, $i, $hitpoints, $points) {
        this.x = $x;
        this.y = $y;
        this.w = $w;
        this.h = $h;
        this.speed = $s;
        this.image = $i;
        this.hitpoints = $hitpoints;
		this.points = $points;
}
 
// Iterate through array of enemies and draw them on the canvas
function drawEnemies() {
        for (var i = 0; i < enemies.length; i++) {
                ctx.drawImage(enemies[i].image, enemies[i].x, enemies[i].y);
                // Or you can use
                // ctx.drawImage(enemies[i]["image"], enemies[i]["x"], enemies[i]["y"]);
        }
}
 
 
// Iterate through array of enemies and update their position
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) {
                        // after the enemies scroll off screen, this value is where they get re-spawned
                        enemies[i].y = -45;
                }
        }
}
 
// Check for laser collision
function hitTest() {
        var remove = false;
		var laserremove = false;
        for (var i = 0; i < lasers.length; i++) 
		{
                for (var j = 0; j < enemies.length; j++) 
				{
                        // laser's y position is less than or equal to the enemy's y position plus its height -AND-
                        // laser's x position is greater than or equal to the enemy's x position -AND-
                        // laser's x position is less than or equal to the enemy's x position plus it's width
                        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) 
								{
										console.log("delete");
                                        enemies.splice(j, 1);
                                        remove = true;
                                        var $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]));
                                }
 
 
                        }
						
						//console.log(hitpoints["enemy"+$r]);
                }
                if (remove == true) {
                        lasers.splice(i, 1);  // laser at this array position no longer gets drawn
                        remove = false;
                        score += points["enemy"+$r];
                }
				 if (laserremove == true) {
                        lasers.splice(i, 1);  // laser at this array position no longer gets drawn
                        laserremove = false;
                        
                }
        }
}
 
 
(function ($a) {
        //Build enemy array of x/y coordinate, width, height, and speed
        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); // Here you can pass in the number of enemies to create

1ik heb hetzelfde gedaan als met de hitpoints maar hij geeft bij de punten toch een random getal

weet iemand hoe ik dat nog kan oplossen
 
Dit is jouw _Enemy object:
[js]
function _Enemy($x, $y, $w, $h, $s, $i, $hitpoints, $points)
{
this.x = $x;
this.y = $y;
this.w = $w;
this.h = $h;
this.speed = $s;
this.image = $i;
this.hitpoints = $hitpoints;
this.points = $points;
}[/js]
Daar tel ik acht parameters.

Wanneer jij een nieuw _Enemy object aan de array toevoegt zie ik er maar zeven.
[js]
enemies.push(new _Enemy((Math.random() * 450 + 50), -45, enemy_w, enemy_h, speeds["enemy" + $r], enemy, hitpoints["enemy" + $r]));
// en verderop
enemies.push(new _Enemy(enemy_x, enemy_y, enemy_w, enemy_h, speeds["enemy" + $r], enemy, hitpoints["enemy" + $r]));[/js]
Kortom, de punten worden nooit aan het object toegekend.

Daarnaast heb ik dit aangegeven:
Om de scores dynamisch te maken dien je jouw controle (if (remove == true)) te verplaatsen naar een punt waarbij je weet welke vijand geraakt is
Klik om te vergroten...
Zelfs met code op welk punt je dat dus kunt weten.

Wat ik in jouw code zie is dat je na de for-lus nog gaat kijken of er wat verwijderd moet worden en dan wil je de score opnemen:
[js]
if (remove == true) {
lasers.splice(i, 1); // laser at this array position no longer gets drawn
remove = false;
score += points["enemy"+$r];
}[/js]
Je gaat nu de score van de meest recent toegevoegde vijand rekenen omdat $r toen is berekend. :confused:
 
hoe zou ik dit dan moeten oplossen

Zou ik deze code

Code: 
enemies.push(new _Enemy(enemy_x, enemy_y, enemy_w, enemy_h, speeds["enemy" + $r], enemy, hitpoints["enemy" + $r]));

moeten veranderen door dit?

Code: 
enemies.push(new _Enemy(enemy_x, enemy_y, enemy_w, enemy_h, speeds["enemy" + $r], enemy, hitpoints["enemy" + $r],points["enemy"+$r]));

ook werkt de collision niet meer zoals je hier kan zien in de live demo.

Dit werkte eerst wel voordat ik de enemy's met verschillende speeds deed.

Dit is de code waar de collision staat

Code: 
//player variable initialization
var ship;
var ship_x = (width / 2) - 25;
var ship_y = height - 75;
var ship_w = 50;
var ship_h = 50;
var rightKey = false;
var leftKey = false;
var upKey = false;
var downKey = false;
var laserTotal = 2;
var lasers = [];

//links rechts en schieten boven en beneden
function keyDown(e) {
  if (e.keyCode == 39) {
    rightKey = true;
  } else if (e.keyCode == 37) {
    leftKey = true;
  }

  if (e.keyCode == 38) {
    upKey = true;
  } else if (e.keyCode == 40) {
    downKey = true;
  }

  //spatiebalk. schieten
  if (e.keyCode == 32 && lasers.length <= laserTotal) {
    lasers.push([ship_x + 25, ship_y - 20, 4, 20]);
  }
  }


//als ze niet ingedrukt zijn
function keyUp(e) {
  if (e.keyCode == 39) {
    rightKey = false;
  } else if (e.keyCode == 37) {
    leftKey = false;
  }

  if (e.keyCode == 38) {
    upKey = false;
  } else if (e.keyCode == 40) {
    downKey = false;
  }
}

//drawed schip op het canvas
function drawShip() {
  if (rightKey) {
    ship_x += 5;
  } else if (leftKey) {
    ship_x -= 5;
  }

  if (upKey) {
    ship_y -= 5;
  } else if (downKey) {
    ship_y += 5;
  }

  if (ship_x <= 0) {
    ship_x = 0;
  }

  if ((ship_x + ship_w) >= width) {
    ship_x = width - ship_w;
  }

  if (ship_y <= 0) {
    ship_y = 0;
  }

  if ((ship_y + ship_h) >= height) {
    ship_y = height - ship_h;
  }

  ctx.drawImage(ship, ship_x, ship_y);
}

//schiet lasers
function drawLaser() {
  if (lasers.length) {
    for (var i = 0; i < lasers.length; i++) {
      ctx.fillStyle = '#f00';
      ctx.fillRect(lasers[i][0], lasers[i][1], lasers[i][2], lasers[i][3]);
    }
  }
}


function moveLaser() {
  for (var i = 0; i < lasers.length; i++) {
    if (lasers[i][1] > -11) {
      lasers[i][1] -= 10;
    } else if (lasers[i][1] < -10) {
      lasers.splice(i, 1);
    }
  }
}

//collision detectie
function shipCollision() {
  var ship_xw = ship_x + ship_w;
  var ship_yh = ship_y + ship_h;
  
 

  for (var i = 0; i < enemies.length; i++) {
 
    //collision x side
    if (ship_x > enemies[i][0] && ship_x < enemies[i][0] + enemy_w && ship_y > enemies[i][1] && ship_y < enemies[i][1] + enemy_h) {
      checkLives();
    }

    //collision x side
    if (ship_xw < enemies[i][0] + enemy_w && ship_xw > enemies[i][0] && ship_y > enemies[i][1] && ship_y < enemies[i][1] + enemy_h) {
      checkLives();
    }

    //x side
    if (ship_yh > enemies[i][1] && ship_yh < enemies[i][1] + enemy_h && ship_x > enemies[i][0] && ship_x < enemies[i][0] + enemy_w) {
      checkLives();
    }

    //x side
    if (ship_yh > enemies[i][1] && ship_yh < enemies[i][1] + enemy_h && ship_xw < enemies[i][0] + enemy_w && ship_xw > enemies[i][0]) {
      checkLives();
    }
  }
}
 
Laatst bewerkt:
iemand nog?

het collision systeem is opgelost. ik moet nu alleen nog dat verschillende enemy's verschillende punten geven
 
thebest07111 zei:
Zou ik deze code

Code: 
enemies.push(new _Enemy(enemy_x, enemy_y, enemy_w, enemy_h, speeds["enemy" + $r], enemy, hitpoints["enemy" + $r]));

moeten veranderen door dit?

Code: 
enemies.push(new _Enemy(enemy_x, enemy_y, enemy_w, enemy_h, speeds["enemy" + $r], enemy, hitpoints["enemy" + $r],points["enemy"+$r]));
Klik om te vergroten...

Dat lijkt mij iets dat je eenvoudig zelf even uit kunt proberen toch? ;)

Wanneer je die parameter met de score hebt toegevoegd kunnen je bij het opvragen van een _Enemy-object daarvan dus het aantal punten opvragen aangezien die in het object worden bewaard. (enemy.points)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan