So, for a final project I'm trying to make a game with three different meteors; Bronze, Silver and Gold. While the Bronze array works fine in Setup(), the Silver and Gold meteors go at high speeds for some unknown reason.
function setup() {
createCanvas(windowWidth, windowHeight);
spaceship = new Spaceship(100, 100, 5, spaceshipImage, bulletImage, 40);
healthStar = new Star(1000, 100, 10, healthStarImage, 50);
//the Meteor Array
// Run a for loop numMeteor times to generate each meteor and put it in the array
// with random values for each star
for (let i = 0; i < numMeteor; i++) {
let meteorX = random(0, width);
let meteorY = random(0, height);
let meteorSpeed = random(2, 20);
let meteorRadius = random(10, 60);
meteor.push(new Meteor(meteorX, meteorY, meteorSpeed, meteorBronzeImage, meteorRadius));
}
}
// draw()
//
// Handles input, movement, eating, and displaying for the system's objects
function draw() {
// Set the background to a safari scene
background(skyBackground);
// Check if the game is in play
if (playing == true) {
// Handle input for the tiger
spaceship.handleInput();
// Move all the "animals"
spaceship.move();
healthStar.move();
if (spaceship.dodges >= 5){
levelTwo = true;
}
//lvl 2
if (levelTwo == true){
meteor = [];
for (let i = 0; i < numMeteor; i++) {
let meteorX = random(0, width);
let meteorY = random(0, height);
let meteorSpeed = random(2, 20);
let meteorRadius = random(10, 60);
meteor.push(new Meteor(meteorX, meteorY, meteorSpeed, meteorSilverImage, meteorRadius));
}
}
if (spaceship.dodges >= 8){
levelThree = true;
}
//lvl 3
if (levelThree == true){
levelTwo = false;
meteor = [];
for (let i = 0; i < numMeteor; i++) {
let meteorX = random(0, width);
let meteorY = random(0, height);
let meteorSpeed = random(2, 20);
let meteorRadius = random(10, 60);
meteor.push(new Meteor(meteorX, meteorY, meteorSpeed, meteorGoldImage, meteorRadius));
}
}
// Handle the tiger and lion eating any of the star
spaceship.handleEating(healthStar);
//
spaceship.handleBullets();
// Handle the tragic death of the tiger
spaceship.handleDeath();
// Check to see when the game is over
checkGameOver();
// Display all the "animals"
spaceship.display();
healthStar.display();
// Display and making sure the tiger can eat the copies of the star
for (let i = 0; i < meteor.length; i++) {
meteor[i].move();
meteor[i].display();
//meteor[i].handleDamage();
spaceship.handleHurting(meteor[i]);
spaceship.handleDodging(meteor[i]);
}
}
// Once the game is over, display a Game Over Message
if (gameOver == true) {
displayGameOver();
}
// Otherwise we display the message to start the game
else {
displayStartMessage();
}
}
I've tried to change the speeds, made the levels false, nothing's working other than the Bronze meteors.
Your level 2 and level 3 meteor initialization is inside your draw loop. They include a meteor = [] statement. From what you've provided, that suggests your meteor array is getting cleared every single draw iteration. They never have a chance to move, you're getting fresh random meteors each time.
If the array clearing within your draw loop is in fact the issue, you'll need to add a way to track if the level initialization has been completed, so that it only occurs once. A simple flag, an idempotent function, something like that.
// Extract meteor generation to it's own function so you dont need to repeat it
function generateMeteors(meteorImage) {
let meteor = [];
for (let i = 0; i < numMeteor; i++) {
let meteorX = random(0, width);
let meteorY = random(0, height);
let meteorSpeed = random(2, 20);
let meteorRadius = random(10, 60);
meteor.push(new Meteor(meteorX, meteorY, meteorSpeed, meteorBronzeImage, meteorRadius));
}
return meteor;
}
function setup() {
createCanvas(windowWidth, windowHeight);
spaceship = new Spaceship(100, 100, 5, spaceshipImage, bulletImage, 40);
healthStar = new Star(1000, 100, 10, healthStarImage, 50);
//the Meteor Array
// meteor is apparently global, or otherwise in scope here
meteor = generateMeteors(meteorBronzeImage)
}
function draw() {
/**
Code removed for clarity
**/
if (spaceship.dodges >= 5) {
levelTwo = true;
}
//lvl 2
// levelTwoInitialized tracks if we've initialized the meteor array for this level
if (levelTwo == true && levelTwoInitialized == false){
meteor = generateMeteors(meteorSilverImage);
levelTwoInitialized = true;
}
if (spaceship.dodges >= 8){
levelThree = true;
}
//lvl 3
// levelThreeInitialized tracks if we've initialized the meteor array for this level
if (levelThree == true && levelThreeInitialized == false){
levelTwo = false;
meteor = generateMeteors(meteorGoldImage);
levelThreeInitialized = true;
}
//... rest of code
One possible way to do this is above. Level initialization flags like levelThreeInitialized would have to be declared somewhere, wherever you're tracking your game/program state.
If you want to retain the previous level's meteors, you could do something like:
if (levelTwo == true && levelTwoInitialized == false){
// add silver meteors to the existing bronze set
meteor = meteor.concat(generateMeteors(meteorSilverImage));
levelTwoInitialized = true;
}
//... rest of code
If you want to create a new set with multiple types:
if (levelTwo == true && levelTwoInitialized == false){
// make NEW silver and bronze meteors
meteor = generateMeteors(meteorSilverImage)
.concat(generateMeteors(meteorBronzeImage);
levelTwoInitialized = true;
}
//... rest of code
Related
I am trying to make a maze generator, and almost everything is working so far. I have been able to set my position to a random pos, and then I repeat the standard() function. In the function, I add pos to posList, and then I choose a random direction. Next, I check if the cell has been visited by running through all of the posList vectors in reverse. I haven't executed the code that backtracks yet. If visited = false then I move to the square and execute the yet-to-be-made path() function. However, for some reason, the mover just doesn't detect if a cell has been visited or not. I am using p5.js. What am I doing wrong?
var posList = [];
var pos;
var tempo;
var boole = false;
var direc;
var mka = 0;
function setup() {
createCanvas(400, 400);
//Set up position
pos = createVector(floor(random(3)), floor(random(3)));
frameRate(1)
}
//Choose a direction
function direct(dire) {
if(dire === 0) {
return(createVector(0, -1));
} else if(dire === 1) {
return(createVector(1, 0));
} else if(dire === 2) {
return(createVector(0, 1));
} else {
return(createVector(-1, 0));
}
}
/foLo stands fo forLoop
function foLo() {
//If we have checked less than three directions and know there is a possibility for moving
if(mka < 4) {
//tempoRARY, this is what we use to see if the cell has been visited
tempo = createVector(pos.x + direct(direc).x, pos.y + direct(direc).y);
//Go through posList backwards
for(var i = posList.length - 1; i >= 0; i --) {
//If the cell has been visited or the cell is off of the screen
if(tempo === posList[i]) {
//Change the direction
direc ++;
//Roll over direction value
if(direc === 4) {
direc = 0;
}
//Re-execute on next frame
foLo();
//The cell has been visited
boole = false;
//Debugging
console.log(direc)
mka++;
} else if(tempo.x < 0 || tempo.x > 2 || tempo.y < 0 || tempo.y > 2) {
direc ++;
if(direc === 4) {
direc = 0;
}
foLo();
boole = false;
console.log(direc)
mka++;
}
}
//If it wasn't visited (Happens every time for some reason)
if(boole === true) {
//position is now the temporary value
pos = tempo;
console.log("works")
mka = 0;
}
}
}
function standard() {
//Add pos to posList
posList.push(pos);
//Random direction
direc = floor(random(4));
//Convert to vector
direct(direc);
foLo();
//Tracks pos
fill(255, 255, 0);
rect(pos.x*100+50, pos.y*100+50, 50, 50)
}
function draw() {
background(255);
fill(0);
noStroke();
//draw grid
for(var i = 0; i < 4; i ++) {
rect(i*100,0,50,350);
rect(0, i*100, 350, 50);
}
standard();
boole = true;
console.log(pos)
console.log(posList);
}
Your issue is on the line where you compare two vectors if(tempo === posList[i]) {: This will never be true.
You can verify that with the following code (in setup() for example):
const v1 = new p5.Vector(1, 0);
const v2 = new p5.Vector(1, 0);
const v3 = new p5.Vector(1, 1);
console.log(v1 === v2) // false
console.log(v1 === v3) // false
This is because despite having the same value v1 and v2 are referencing two different objects.
What you could do is using the p5.Vector.equals function. The doc has the following example:
let v1 = createVector(10.0, 20.0, 30.0);
let v2 = createVector(10.0, 20.0, 30.0);
let v3 = createVector(0.0, 0.0, 0.0);
print(v1.equals(v2)); // true
print(v1.equals(v3)); // false
This might not give you a working algorithm because I suspect you have other logical errors (but I could be wrong or you will debug them later on) but at least this part of the code will do what you expect.
Another solution is to use a Set instead of your list of positions. The cons of this solution is that you will have to adapt your code to handle the "out of grid" position situation. However when you want to keep track of visited items a Set is usually a great solution because the access time is constant. That this means is that to define is a position has already been visited it will always take the same time (you'll do something like visitedSet.has(positionToCheck), whereas with your solution where you iterate through a list the more cells you have visited to longer it will take to check if the cell is in the list.
The Set solution will require that you transform your vectors before adding them to the set though sine, has I explained before you cannot simply compare vectors. So you could check for their string representation with something like this:
const visitedCells = new Set();
const vectorToString = (v) => `${v.x},{$v.y}` // function to get the vector representation
// ...
visitedCells.add(vectorToString(oneCell)); // Mark the cell as visited
visited = visitedCells.has(vectorToString(anotherCell))
Also has a general advice you should pay attention to your variables and functions name. For example
// foLo stands fo forLoop
function foLo() {
is a big smell: Your function name should be descriptive, when you see your function call foLo(); having to find the comment next to the function declaration makes the code less readable. You could call it generateMaze() and this way you'll know what it's doing without having to look at the function code.
Same for
//tempoRARY, this is what we use to see if the cell has been visited
tempo = createVector(pos.x + direct(direc).x, pos.y + direct(direc).y);
You could simply rename tempo to cellToVisit for example.
Or boole: naming a boolean boole doesn't convey a lot of information.
That could look like some minor details when you just wrote the code but when your code will be several hundred lines or when you read it again after taking several days of break, you'll thank past you for taking care of that.
I have a game loop that refreshes ~20 times per second with the following condition, inside function growPlayerBlockCounterWinner():
if (obstacleArray[i][2] > canvas.height) {player.size += 5;}
That means: if black object goes outside the canvas area, player size will increase by 5 pixels.
The function normally executes once, but due to putting it in a game loop, it executes each time the game is refreshed, so player is growing continuously.
Previously i had it with the sign '=' instead od '>', but that was working well when black blocks were moving pixel by pixel and i want them to move faster.
You can inspect the problem and full code on the remote server: https://stacho163.000webhostapp.com/firstLevel.html
Below I paste only my obstacle functions:
// js game script //
let obstacle = {
size: 0,
posX: 0,
posY: 0,
speed: 0
}
let obstacleArray = new Array(100);
function generateObstacle() {
for (i = 0; i < obstacleArray.length; i++) {
obstacle.size = Math.round((Math.random() * 100) + 50);
obstacle.posX = Math.round((Math.random() * (canvas.width -
obstacle.size)));
obstacle.posY = -450 - (i * 100);
obstacle.speed = 5;
obstacleArray[i] = [obstacle.size, obstacle.posX, obstacle.posY,
obstacle.speed];
}
}
function drawObstacle() {
for (i = 0; i < obstacleArray.length; i++) {
ctx.fillStyle = "#000";
ctx.fillRect(obstacleArray[i][1], obstacleArray[i][2],
obstacleArray[i][0], obstacleArray[i][0]);
obstacleArray[i][2] += obstacleArray[i][3];
}
}
function growPlayerBlockCounterWinner() {
for (i = 0; i < obstacleArray.length; i++) {
// grow player
if (obstacleArray[i][2] > canvas.height) {
player.size += 5;
}
}
}
generateObstacle();
function game() {
drawObstacle();
growPlayerBlockCounterWinner();
requestAnimationFrame(game);
}
requestAnimationFrame(game);
I am looking for opinions, maybe my logic about that statement is incorrect or i should place that statement in other place.
Thanks for your tips :)
As you have a defined number of black boxes, you might be able to store, for which black box the player already increased size like this:
let obstacle = {...};
var affectedBlackBoxes = {};
//...//
function growPlayerBlockCounterWinner() {
for (i = 0; i < obstacleArray.length; i++) {
// grow player
if (obstacleArray[i][2] > canvas.height && !affectedBlackBoxes[i]) {
player.size += 5;
affectedBlackBoxes[i] = true;
}
}
}
Having problems emmiting 2 arrays to the client.
I have 2 objects and all instances are created on Server side . The socket.emit is from what I understood done on the Server 25s/s and per socket that exist.
Now i created bullets in each ship and want to get these to the client.
The thing that makes me headache is I am waiting on the Client side with socket.on per ship which is a 1:1 per each emitted socket from the server.
And now come a 1:n per each socket on the Server that is shooting the bullets. Can I actually emit 2 array with 2 emit execution or does it Need to be ohne emit from each socket with all data in one array?
My Problem is that the array bullet doesnt exist on the Client side !
So my ship values are at the client side anyhow I dont have a bullet array on the Client side
I tested it with a draw in a fixed x and y
for (var i in bullet){
ctx.fillText("X",100,100);
}
but the client draws nothing means I have no array at the client side. Also did a alert if I would have more then 10 bullets but even that one doesn’t pop up
Appreciate any help
App.js
for(var q in SOCKET_LIST){
var socket = SOCKET_LIST[q];
var f =0;
for(var k = 0;k<allbullets.length;k++)
{
if (allbullets[k].user_id === q)
{
packbul= {
x:allbullets[k].xtype.x,
y:allbullets[k].xtype.y,
userid:allbullets[k].user_id,
}// array end
}
f++;
} //end for
socket.broadcast.emit('newBullet',packbul);
if (allobjects[q] === undefined)
{
}
else{
console.log("q:"+q);
pack[q] = {
x:allobjects[q].xtype.x,
y:allobjects[q].xtype.y,
userid:q,
}// array end
socket.broadcast.emit('newClientship',pack[q]);
} // else end
} // For ebf.
},1000/25); // Set Interval End
Client
var ship = Array();
var bullet = Array();
socket.on('newClientship',function(data){
ship[data.userid]= data;
});
socket.on('newBullet',function(data){
bullet= data;
});
var previous; // var for renderworld
renderWorld = function(timestamp){
//setInterval(function(){
if (!previous) previous = timestamp;
elapsed = timestamp - previous;
updateFps();
ctx.font="150px Arial";
ctx.fillStyle = "white";
ctx.clearRect(0,0,canvas.width,canvas.height);
for ( var i in ship){ ctx.fillText(ship[i].userid,ship[i].x,ship[i].y);
}
if (bullet.length > 10)
{
alert("ted");
}
for (var i in bullet){
ctx.fillText("X",100,100);
}
drawFps(200,20) ;
previous = timestamp;
window.requestAnimationFrame(renderWorld);
//},1000/25);
}
Just found out that the for loop on Server side doesn’t work
It gives me a „undefined“ if I console.log (allbullets.length)
If I do a console.log(allbullets) it shows me that it exists .
Bulletobj {
user_id: 47,
type: 'Bullet',
radius: 2,
basespeed: 1,
speed: 1,
velX: 0.2979165941720021,
velY: 0.9545919038609927,
targetX: 863,
targetY: 2429,
xtype: Obj { x: 153, y: 154, radius: 3, selected: 0 },
angleDeg: 1.268286927738952,
realAngle: 72.66748817105554 }
Now found a formula to count the items of an obj
console.log("length:"+Object.keys(allbullets).length);
But even that only counts the items in one of the objects and always shows 12
I wanted to have the count of all bullets that have an instance
FYI My ship has a procedure that creates a new bullet
ClientObj.prototype.fire =function (x,y){
allbullets = new Bulletobj(this.xtype.x,this.xtype.y,x,y,1,1, this.user_id);
}
// had put this var outside outside functions for global
allbullets = Array();
App.js
var allbullets = [];
Bulletobj = function(x,y,targetX,targetY,shipid,speed,user_id){
this.user_id = user_id;
this.type = 'Bullet';
this.radius = 2;
this.basespeed = speed;
this.speed = 4;
this.velX = 0;
this.velY = 0;
this.targetX = targetX;
this.targetY = targetY;
this.xtype = new Obj(x,y,3);
w.objects.push(this);
Bulletobj.prototype.update =function (){
tx = this.targetX - this.xtype.x;
ty = this.targetY - this.xtype.y;
dist = Math.sqrt(tx * tx + ty * ty);
this.angleDeg = Math.atan2(ty,tx) ;
this.realAngle = (Math.atan2(ty,tx) * 180/Math.PI + 360 ) % 360 ;
this.velX = (tx / dist) * this.speed ;
this.velY = (ty / dist) * this.speed ;
if (parseInt(dist) > parseInt(this.radius / 2)) {
this.xtype.x += parseInt(this.velX);
this.xtype.y += parseInt(this.velY);
} // if distance schleife end
} // Bulletobj update end
} // Bulletobj end
setInterval(function(){
var pack = Array();
var packbul = Array();
var packbularray = Array();
var spliceArray = Array();
objcnt = w.objects.length;
var i=0;
while (i < objcnt)
{
w.objects[i].update();
if(w.objects[i].hitpoints <= 0 )
spliceArray.push(i);
i++;
} // endwhile
for(var k = 0;k<spliceArray.length;k++)
{
w.objects.splice(spliceArray[k],1);
}
for(var q in SOCKET_LIST){
var socket = SOCKET_LIST[q];
if (allbullets === undefined)
{
}
else {
for(var k = 0;k<allbullets.length;k++)
{
if(allbullets[k].user_id == q)
{
packbul= {
x:allbullets[k].xtype.x,
y:allbullets[k].xtype.y,
userid:allbullets[k].user_id,
}// array end
} // if end
//obj end
} // end else undefined objects
} //end for
console.log(packbul);
socket.emit('newBullet',packbul);
if (allobjects[q] === undefined)
{
}
else{
console.log("q:"+q);
pack[q] = {
x:allobjects[q].xtype.x,
y:allobjects[q].xtype.y,
userid:q,
}// array end
socket.broadcast.emit('newClientship',pack[q]);
} // else end
} // For socket
},1000/25); // Set Interval End
Index.html
var ship = Array();
var bullet= Array();
var bulletdata =Array();
socket.on('newClientship',function(data){
ship[data.userid]= data;
});
socket.on('newBullet',function(data){
;
bulletdata.push(data);
});
var previous; // var for renderworld
renderWorld = function(timestamp){
if (!previous) previous = timestamp;
elapsed = timestamp - previous;
updateFps();
ctx.font="150px Arial";
ctx.fillStyle = "white";
ctx.clearRect(0,0,canvas.width,canvas.height);
for ( var i in ship){ ctx.fillText(ship[i].userid,ship[i].x,ship[i].y);
}
for (var i in bulletdata){
ctx.fillText(".",bulletdata[i].x,bulletdata[i].y);
}
bulletdata = [];
drawFps(200,20) ;
previous = timestamp;
window.requestAnimationFrame(renderWorld);
}
So I managed to get one bullet over to the client. Problem now is that each time a player shoots a bullet the old bullet vanish and the new start from beginning same with another client . 1 st client shoots . If the second client starts shooting the bullet from player 1 is deleted. Normally I wanted to have each client with his own bullets and all bullets that are created as objects on Server side to be drawn on the clients.
The ships work perfect but somehow the bullet flickers and doesn’t fit into the canvas 😔
Thank you
Solved !!! it after 3 frustrating days omg
again thx for the push without it I would have been lost
The problem was mixing object array and standard array.
E.g var x = {} —> Object Array
var x = []. —> Standard Array
People keep saying that you shouldn’t emit objects but atm I am glad the bullets arrived
at client . Also with standard arrays I would need to split after a choosen index and have to set the dataset points by myself . With object arrays it is easier to access them.
Maybe somebody can tell me what I emit when I push an object array into a standard array at the Server side . Is this an object or standard array ? Are the object headers that create performance issues (this is what in read somewhere) included in that array I emit to the client?
I mean on the client I side I receive an array but in the for loop with the ctx I have an object array again which was inside the standard array
if(allbullets[k].user_id == q)
{
packbul= {
x:allbullets[k].xtype.x,
y:allbullets[k].xtype.y,
userid:allbullets[k].user_id,
}// array end
packbularray.push(packbul);
} // if end
Index.html
var ship = Array();
var bullet= Array();
var bulletdata =Array();
socket.on('newClientship',function(data){
ship[data.userid]= data;
//ship.x = data.x;
//ship.y = data.y;
//ship.user = data.userid;
});
socket.on('newBullet',function(data){
bullet= data;
//bulletdata.push(bullet);
//ship.x = data.x;
//ship.y = data.y;
//ship.user = data.userid;
});
I am following exactly this tutorial on
Youtube :
https://www.youtube.com/watch?v=ohlrknEwobs&list=PLE10sFVGtI1ejzPFmX5CebHrTMhaCx2oI&index=31
The concept is to make an avoid-er game in which 3 objects fall vertically, one of which will increase point score, and the other two which will end the game.
I have created 4 objects within an array which are as follows:
var:objects Array = [new BlueBird(),new RedBird(),new Goomba(),new Ham()]
// objects[0] = Is a Blue Bird which jumps to scene 3 ("Death Scene")
// objects[1] = Is a Red Bird which jumps to scene 3 ("Death Scene")
// objects[2] = Is a Goomba which jumps to scene 3 ("Death Scene")
// objects[3] = Is an piece of Ham which adds Points
Here is the statement that I am having trouble with. I can't get the object[3], the piece of Ham, to test for else if statement. I coded in && objectsIndex == 3, but it did not work:
if((Pig.hit).hitTestObject(objects[objectsIndex]))
{
// Reset objects to y positions
objects[objectsIndex].x = randomRange(0,3) * 50
objects[objectsIndex].y = -50;
stage.removeEventListener(KeyboardEvent.KEY_DOWN,pressedButton);
stage.removeEventListener(Event.ENTER_FRAME,CollisionSensor);
stage.frameRate = 24;
gotoAndStop(1,"GG WP");
//trace ("you died!");
}
else if((Pig.hit).hitTestObject(objects[objectsIndex]) && objectsIndex == 3)
{
score = score + 1; //increase score by 1 point
text1.text = String(score); // Score is now a string value
// Since text1 is a text box, it must be denotated as a string
// Reset the objects to y positions
objects[objectsIndex].x = randomRange(0,3) * 50;
objects[objectsIndex].y = -50
}
Here is the entire Projects Code for Reference:
stop();
import flash.events.Event;
stage.focus = this;
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressedButton);
stage.addEventListener(Event.ENTER_FRAME, CollisionSensor);
var score:Number = 0; //Player Score
var enemy_velocity:Number = 5;
var objects:Array = [new RedBird(),new Goomba,new BlueBird(),new Ham()];
// objects[0] is a RedBird
// objects[1] is a Goomba
// objects[2] is a BlueBird
// objects[3] is an piece of Ham
var objectsIndex:Number = randomRange(0,3); //Randomizer
//Picks a random array value
for (var i:int=0; i<objects.length; i++)
{
objects[i].x = randomRange(0,3) * 50;
objects[i].y = -50;
//Brings objects to stage
stage.addChild(objects[i]);
}
//Generate a ranodom number from minNum to maxNum including the endpoints
function randomRange(minNum:Number, maxNum:Number):Number
{
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}
function CollisionSensor(e:Event)
{
objects[objectsIndex].y = objects[objectsIndex].y + enemy_velocity;
// check if enemy objects have gone past the bottom of the game screen
if (objects[objectsIndex].y > stage.stageHeight)
{
objects[objectsIndex].y = -50; //Resets objects in array and parameters
// To enter frame in a repeated loop
//Randomizes a random x position for Objects
var num:Number = randomRange(0,3);
//This creates 4 random x positions - 0,50,100,150 To randomly place
//The array objects in
objects[objectsIndex].x = num * 50;
// now pick a random object
objectsIndex = randomRange(0,3);
// objects[0] is a RedBird
// objects[1] is a Goomba
// objects[2] is a BlueBird
// objects[3] is an piece of Ham
if(stage.frameRate <= 60)
{
stage.frameRate = stage.frameRate + 5;
}
else
{
stage.frameRate = 60;
if (enemy_velocity <= 25)
{
enemy_velocity += 1;
}
else
{
enemy_velocity = 25;
}
}
}
//check contanct with enemy objects
if((Pig.hit).hitTestObject(objects[objectsIndex]))
{
// Reset objects to y positions
objects[objectsIndex].x = randomRange(0,3) * 50
objects[objectsIndex].y = -50;
stage.removeEventListener(KeyboardEvent.KEY_DOWN,pressedButton);
stage.removeEventListener(Event.ENTER_FRAME,CollisionSensor);
stage.frameRate = 24;
gotoAndStop(1,"GG WP");
//trace ("you died!");
}
else if((Pig.hit).hitTestObject(objects[objectsIndex]) && objectsIndex == 3)
{
score = score + 1;
//increase score by 1 point
`text1.text = String(score);` // Score is now a string value
// Since text1 is a text box, it must be denotated as a string
// Reset the objects to y positions
objects[objectsIndex].x = randomRange(0,3) * 50;
objects[objectsIndex].y = -50
}
}
function pressedButton(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.LEFT && Pig.x >= 0)
{
Pig.x = Pig.x - 50;
}
else if (event.keyCode == Keyboard.RIGHT && Pig.x <= 150)
{
Pig.x = Pig.x + 50;
}
}
Thank you, and as always, have a nice day :)
You might have other issues with your code but this does look right
if((Pig.hit).hitTestObject(objects[objectsIndex]))
it should be..
if((Pig).hitTestObject(objects[0]))
where objects[0] would be the index in the array to access for testing against. But that might even have issues so get specific names of what you added on stage try this in your for loop that adds objects to stage
//Brings objects to stage
stage.addChild(objects[i]);
trace ("added object name : " + objects[i] );
Whatever name you got there is what you test against if( (Pig).hitTestObject(namehere) )
I'm in the process of building an entity system for a canvas game. This started from a simple particle emitter/updater which I am altering to accommodate a multi-particle/entity generator. Whilst I am usually ok with JavaScript/jQuery I am running into the limits of my experience as it concerns arrays and would gratefully accept any help on the following:
When I need a new particle/entity my current system calls a function to push an object into an array which contains variables for the entity updates.
Then the update function runs a for loop over the array, checking on the type variable to update the particle (position/colour/etc...). Previously I would then [array.splice] the particle, based on some condition. When I needed further particles/entities I would then push new particles.
What I would like to achieve here is:
In the makeParticle function, check over the particle array for any "dead" particles and if any are available reuse them, or push a new particle if not I have created a particleAlive var as a flag for this purpose.
var particles = [];
var playing = false;
function mousePressed(event) {
playing = !playing;
}
if(playing) {
makeParticle(1, 200, 200, 10, "blueFlame");
makeParticle(1, 300, 200, 10, "redFlame");
}
function makeParticle(numParticles, xPos, yPos, pRadius, pType) {
var i;
for (i = 0; i < numParticles; i++) {
var p = {
type : pType,
x : xPos,
y : yPos,
xVel : random(-0.5, 0.5),
yVel : random(-1, -3),
particleAlive : true,
particleRender : true,
size : pRadius
}; // close var P
particles.push(p);
// instead of pushing fresh particles all the time I would like the function, here, to check for free objects in the array
} // close for loop
} // close function makeParticle
function runtime() {
for(var i=0; i<particles.length; i++) {
var p = particles[i];
var thisType = p.type;
switch (thisType) {
case "blueFlame":
c.fillStyle = rgb(100,100,255);
c.fillCircle(p.x,p.y,p.size);
p.x += p.xVel;
p.y += p.yVel;
p.size*=0.9;
if (particles.size < 0.5) {
particleAlive = false;
particleRender = false;
} // close if
break;
case "redFlame":
c.fillStyle = rgb(255,100,100);
c.fillCircle(p.x,p.y,p.size);
p.x -= p.xVel;
p.y -= p.yVel;
p.size*=0.95;
if (particles.size < 0.5) {
particleAlive = false;
particleRender = false;
} // close if
break;
} // close switch
} // close function runtime
I've found previous answers to relate questions, but I've been unable to get it working within the makeParticle function, like how to assign the attributes of p to particle[j]:
var particleUseOldOrNew = function() {
for (var j = 0, len = particles.length; j < len; j++) {
if (particles[j].particleAlive === false)
// particles[j] = p;
return particle[j];
}
return null; // No dead particles found, create new "particles.push(p);" perhaps?
}
My personal opinion on the matter is that if you are making a new particle, it should be a new object, not a "re-using" of an old one with properties changed. Each new object should have a unique identifier, so if you need to track them (for development purposes, debugging, or later re-use), it is easy to do. Or at least keep a counter of the number of times you've re-used a particle object to represent a "new" particle! Though I guess if you've found that "re-using" improves performance (have you?), that's the way to go.
Anyway, enough pontificating, here is how I would do what you're asking (I assume speed is your main concern, so I did this with only native JS):
var particles = [];
//Function to create brand spanking new particle
function makeNewParticle(xPos, yPos, pRadius, pType){
return {
type : pType,
x : xPos,
y : yPos,
xVel : random(-0.5, 0.5),
yVel : random(-1, -3),
particleAlive : true,
particleRender : true,
size : pRadius
};
};
//Function to change the properties of an old particle to make a psuedo-new particle (seriously, why do you want to do this?)
function changeExistingParticle(existing, xPos, yPos, pRadius, pType){
existing.x = xPos;
existing.y = yPos;
existing.size = pRadius;
existing.type = pType;
return existing;
};
//Figure out the keys of dead particles in the particles[] array
function getDeadParticleKeys() {
var keys = [];
for(var p = 0; P < particles.length; p++) {
if (!particles[p].particleAlive) {
keys.push(p);
}
}
};
function makeParticle(numParticles, xPos, yPos, pRadius, pType) {
var d, i, deadParticles;
//Grab the "dead" particle keys
deadParticleKeys = getDeadParticleKeys();
numParticles -= deadParticleKeys.length;
//Replace each dead particle with a "live" one at a specified key
for (d = 0; d < deadParticleKeys.length; d++) {
particles[ deadParticleKeys[d] ] = changeExistingParticle(particles[ deadParticleKeys[d] ], xPos, yPos, pRadius, pType)
}
//If we had more particles than there were dead spaces available, add to the array
for (i = 0; i < numParticles; i++) {
particles.push( makeNewParticle(xPos, yPos, pRadius, pType) );
}
};
Now, here's how I recommend doing it: abandon the idea or "re-using" particles, make a separate constructor for each particle (will help immensely if you add methods to your particles in the future), and just scrap dead particles every time one is added:
//Make a constructor for a particle
var Particle = function(props){
if (typeof props === 'function') {
props = props();
}
this.type = props.type;
this.x = props.x;
this.y = props.y;
this.size = props.size;
};
Paticle.prototype.particleAlive = true;
Paticle.prototype.particleRender = true;
//Global particles list
var particles = [];
//Remove all dead element from a ParticleList
particles.clean = function(){
var p, keys;
for (p = this.length; p >= 0; p--) {
if (!p.particleAlive) {
this.splice(p, 1);
}
}
};
//Method for adding x amount of new particles - if num parameter isn't provided, just assume it to be 1
particles.add = function(props, num){
//First, clean out all the garbage!
this.clean();
//Now, append new particles to the end
var n, limit = (num && typeof num === 'number') ? num : 1;
for (n = 0; n < limit; n++){
particles.push( new Particle(props) );
}
};
//A couple examples
particles.add({ //Add a single blueFlame
type: "blueFlame",
size: 10,
x: 200,
y: 200
});
particles.add({ //Add 4 redFlames
type: "redFlame",
size: 10,
x: 300,
y: 200
}, 4);
particles.add(function(){//Add 4 greenFlames, with randomized XY cooridinates
this.x = Math.round(Math.random() * 1000);
this.y = Math.round(Math.random() * 1000);
this.size = 20;
this.type = "greenFlame";
}, 4);
Way less code to manage. I'm not sure which way is faster, but I'd bet the speed difference is negligible. Of course, you could check for yourself by making a quick jsPerf.