This question already has answers here:
Can I create multiple canvas elements on same page using p5js
(2 answers)
Closed last month.
I'm writing code for a neuro evolution project that should learn to play the game snake. I'm using js and p5.js. I want to have 10 game canvases parallel and each game should individually play the game.
What I'm struggling with is the multiple canvases part. When I use this:
let screens = 10;
for(let k = 0; k < screens ;k++){
var t = function( p ) {
p.setup = function() {
p.createCanvas(200, 200);
let x = Math.random()*100;
console.log(x);
snake = new Snake(x,50);
food = new Food();
};
p.draw = function() {
p.background(0);
snake.placeSnake(p);
snake.think(p);
if(counter % 50 == 0){
snake.moveSnake();
}
if(snake.offScreen(p)){
//kill snake
}
}
food.placeFood(p);
if(food.hitsFood(snakes)){
food.generateFood(p);
}
counter++;
};
};
var myp5 = new p5(t);
}
All the screens are identical to the last one spawned. How would I do different so that each canvas is unique?
thanks in advance.
This might be a variable scope issue (untested, as I don't have all your code).
Try adding let snake, food, counter = 0; inside the var t= function(p){} defintion, like this:
let screens = 10;
for(let k = 0; k < screens ;k++){
var t = function( p ) {
let snake, food, counter = 0; // declare here as shared between setup and draw
p.setup = function() {
p.createCanvas(200, 200);
let x = Math.random()*100;
console.log(x);
snake = new Snake(x,50);
food = new Food();
};
p.draw = function() {
p.background(0);
snake.placeSnake(p);
snake.think(p);
if(counter % 50 == 0){
snake.moveSnake();
}
if(snake.offScreen(p)){
//kill snake
}
//}
food.placeFood(p);
if(food.hitsFood(snakes)){
food.generateFood(p);
}
counter++;
};
};
var myp5 = new p5(t);
}
The explanation for this would be that, if you don't declare the variables, they are implicitly declared in the global scope, and so every snake points to the same snake (and likewise with food). The canvases are unique, but the snake and food variables for each one only point to the last snake or food created.
(Depending on the context, it might be worth preventing this kind of problem from occurring by using strict mode, which does not allow undeclared variables).
Related
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
I'm creating a small game in javascript and I'm using svg for the graphics. Right now I'm having a problem with updating the game in the middle of a game tick. If I exit my loop directly after I update the fill attribute with "setAttributeNS", it's redrawn, but if I don't do that, it isn't updated until after "game_tick" is over. Even worse, if I call "game_tick" multiple times in a row, the svg objects aren't updated until after I've run all of the "game_tick"s instead of being updated after each one.
function game_tick(){
num_grid_copy = num_grid.slice();
for (var x = 0; x < num_squares_x; x += 1) {
for (var y = 0; y < num_squares_x; y += 1) {
var n = get_neighbors(x,y);
var isAliveInNextGen = next_gen(n, num_grid[x*num_squares_x+y]);
num_grid_copy[x*num_squares_x+y] = isAliveInNextGen;
if (isAliveInNextGen == 1){
rect_grid[x*num_squares_x+y].setAttributeNS(null, 'fill', '#0099ff');
}
else {
rect_grid[x*num_squares_x+y].setAttributeNS(null, 'fill', '#fff');
}
}
}
num_grid = num_grid_copy;
}
Thanks to valuable input from Robert I realized that javascript execution and page rendering are done in the same thread. I changed the function to the following:
function start() {
var inc = 0,
max = 25;
delay = 100; // 100 milliseconds
var repeat = setInterval(function() {
game_tick();
if (++inc >= max)
clearInterval(repeat);
},
delay);
}
This works fine. I can set the delay and the number of times it repeats.
Im making a simple zombie game in html5 canvas and wanted to know how to create a zombie every x seconds in a random place? so far i have
var zombies = new Array();
function SummonZombies (){
TotalZombies++;
zombies[TotalZombies] = new Image();
zombies[TotalZombies].src = 'images/monster.png';
ctx.drawImage(zombies[TotalZombies], zombie_x, zombie_y);
}
Only one zombie is being created with this? how would i get it to generate more.
First of all, where are you declaring the variable TotalZombies?
Try something like this :
var zombies = new Array();
for (var i = 0; i < 100; i++) {
var zombie = new Image();
zombie.src = 'images/monster.png';
ctx.drawImage(zombie, Math.floor((Math.random()*100)+1), Math.floor((Math.random()*100)+1));
zombies.push(zombie);
}
This will create 100 zombies, with random x and y positions between 1 and 100. It will add each zombie to the zombies array after they have been instantiated.
You should iterate through zombies array, and invoke drawImage() on everyone.
Extra tip: remember to change x and y after all iteration.
You must separate a Zombi from your zombies :
create a class that will describe what a Zombi is, and only after you will define a collection of such lovely guys and girls :
// This Class defines what a Zombi is.
function Zombi(x,y) {
this.x = x;
this.y = y;
}
var ZombiImage = new Image();
ZombiImage.src = "images/monster.png";
// image of a zombi is shared amongst all zombies, so it is
// defined on the prototype
Zombi.prototype.image = ZombiImage;
// draw the zombi on provided context
Zombi.prototype.draw = function(ctx) {
ctx.drawImage(this.image, this.x, this.y);
}
Now for the collection :
// This class defines a collection of Zombies.
function Zombies() {
this.zombies = [];
}
// summons a zombi at a random place. returns the summoned zombi.
myZombies.prototype.summon() {
var randX = Math.random()*100;
var randY = Math.random()*100;
return this.summonAt(randX, randY);
}
// summons a zombi at x,y. returns the summoned zombi.
myZombies.prototype.summonAt = function (x,y) {
var newZombi = new Zombi(x,y);
this.zombies.push();
return newZombi;
}
// draws all zombies on provided context.
myZombies.prototype.drawAll = function (ctx) {
var i=0;
var __zombies = this.zombies;
for (;i<__zombies.length; i++) {
__zombies[i].draw(ctx);
}
}
// collection of all zombies for your game.
var zombies = new Zombies();
// here you can call zombies.summon(); or zombies.drawAll();
// and even zombies.summonAt(x,y);
In fact the code above is simplified : you must handle the onload event of the image to start the game only after the image was loaded.
But you should get the idea : separate the issues (handle ONE zombi vs a collection of zombies) will get you faster to your goal.
With this -simple- design, you'll be able to easily add-up behaviour to your zombies.
Just one more example in which i will add the seekBrain and walk behaviour :
// This Class defines what a Zombi is.
function Zombi(x,y) {
this.x = x;
this.y = y;
this.dirX = 0 ; // direction X
this.dirY = 0; // direction Y
this.speed = 0.1; // common speed for all zombies
}
// have the zombi seek the brain located at (x,y)
Zombi.prototype.seekBrain = function (x,y) {
this.dirX = (x - this.x );
this.dirY = (y - this.y );
// normalize direction
var norm = Math.sqrt( this.dirX*this.dirX + this.dirY*this.dirY );
this.dirX/=norm;
this.dirY/=norm;
}
// Have the zombi walk in its current direction
Zombi.prototype.walk = function() {
this.x += this.dirX * this.speed;
this.y += this.dirY * this.speed;
}
// image and draw remains the same
And now you might want for your collection :
// makes all zombies walk.
Zombies.walkAll = function() {
var i=0;
var __zombies = this.zombies;
for (;i<__zombies.length; i++) {
__zombies[i].walk();
}
}
// constructor, summon, summonAt, and drawAll remains the same.
So to summon a zombi at random place every xxx ms, do something like :
// summons a zombi at a random place every 2 seconds (==2000 ms)
setTimeInterval(2000, function() { zombies.summon(); } );
now, if hero.x and hero.y are what we guess, you can do :
// Have a random zombi hunt for hero's brain every 2 seconds
setTimeInterval(2000, function() {
var which = Math.floor(zombies.zombies.length * Math.random());
zombies.zombies[which].seekBrain(hero.x, hero.y);
} );
provided you call to zombies.walkAll(); and zombies.drawAll(); on a regular basis, you've got the start of a game ! (i love so much zombies :-) )
I've been working on creating a basic 2D tiled game and have been unable to pinpoint the source of noticeable pauses lasting ~100-200ms every second or two, but it seems like GC pauses as when I profiled my app, each game loop is taking around 4ms with a target of 60fps, which means it is running well within the required limit (16ms).
As far as I am aware, I have moved my object variables outside the functions that use them so they never go out of scope and therefore should not be collected, but I am still getting pauses.
Each game loop, the tiles are simply moved 1px to the left (to show smoothness of game frames), and apart from that, all that is called is this draw map function: (NOTE, these functions are defined as part of my engine object at startup so is this true that these functions are not created then collected each time they are called?).
engine.map.draw = function () {
engine.mapDrawMapX = 0;
engine.mapDrawMapY = 0;
// Just draw tiles within screen (and 1 extra on both x and y boundaries)
for (engine.mapDrawJ = -1; engine.mapDrawJ <= engine.screen.tilesY; engine.mapDrawJ++) {
for (engine.mapDrawI = -1; engine.mapDrawI <= engine.screen.tilesX; engine.mapDrawI++) {
//calculate map location (viewport)
engine.mapDrawMapX = engine.mapDrawI + engine.viewport.x;
engine.mapDrawMapY = engine.mapDrawJ + engine.viewport.y;
engine.mapDrawTile = (engine.currentMap[engine.mapDrawMapY] && engine.currentMap[engine.mapDrawMapY][engine.mapDrawMapX]) ? engine.currentMap[engine.mapDrawMapY][engine.mapDrawMapX] : '';
engine.tile.draw(engine.mapDrawI, engine.mapDrawJ, engine.mapDrawTile);
}
}
};
And the method called to draw each tile is:
engine.tile.drawTile = new Image(0,0);
engine.tile.draw = function (x, y, tile) {
if ('' != tile) {
engine.tile.drawTile = engine.tile.retrieve(tile); //this returns an Image() object
engine.context.drawImage(engine.tile.drawTile,
x * TILE_WIDTH + engine.viewport.offsetX,
y * TILE_HEIGHT + engine.viewport.offsetY,
TILE_WIDTH, TILE_HEIGHT);
} else {
engine.context.clearRect(x * TILE_WIDTH, y * TILE_HEIGHT, TILE_WIDTH, TILE_HEIGHT);
}
};
As per request, here are the store and retrieve functions:
engine.tile.store = function (id, img) {
var newID = engine.tile.images.length;
var tile = [id, new Image()];
tile[1] = img;
engine.tile.images[newID] = tile; // store
};
engine.tile.retrieveI;
engine.tile.retrieve = function (id) {
//var len = engine.tile.images.length;
for (engine.tile.retrieveI = 0; engine.tile.retrieveI < engine.tile.images.length; engine.tile.retrieveI++) {
if (engine.tile.images[engine.tile.retrieveI][0] == id) {
return engine.tile.images[engine.tile.retrieveI][1]; // return image
}
}
//return null;
};
I'm building a game using HTML5 canvas.
You can find it here, along with the source code: www.techgoldmine.com.
I'd make a jsFiddle, but in all honesty my attention span is too short (and myself mostly too stupid) to learn how it works.
I'm currently stuck at a function that looks at the positioning of certain elements on either side of the canvas and moves them so that the y-axis area they cover does not overlap. I call them turbines, but thin white rectangles would be more accurate. I suggest refreshing a few times to visually understand what's going on.
This is the function that spawns the turbines:
function gameStateNewLevel(){
for (var i = 0; i < 4; i++){
turbine = {};
turbine.width = 10;
turbine.height = 150;
turbine.y = Math.floor(Math.random()*600)
if (Math.random()*10 > 5){
turbine.side = leftSide;
}else{
turbine.side = rightSide;
}
turbine.render = function (){
context.fillStyle = "#FFFFFF"
context.fillRect(turbine.side, turbine.y, turbine.width,turbine.height);
}
turbine.PositionTop = turbine.y;
turbine.PositionBottom = turbine.y + turbine.height;
turbines.push(turbine);
}
context.fillStyle = "#FFFFFF"
switchGameState(GAME_STATE_PLAYER_START);
}
So far I've built (with the help of you wonderful people) a function (that is part of a loop) picking out each of these turbines, and starts comparing them to one another. I'm completely stumped when it comes to understanding how I'll get them to move and stop when needed:
function updateTurbines(){
var l = turbines.length-1;
for (var i = 0; i < l; i++){
var tempTurbine1 = turbines[i];
tempTurbine1.PositionTop = tempTurbine1.y;
tempTurbine1.PositionBottom = tempTurbine1.y + tempTurbine1.height;
for (var j = 0; j < l; j++) {
var tempTurbine2 = turbines[j];
tempTurbine2.PositionTop = tempTurbine2.y;
tempTurbine2.PositionBottom = tempTurbine2.y + tempTurbine2.height;
if ((tempTurbine1 !== tempTurbine2) && FIXME == true){
if(tempTurbine1.PositionBottom >= tempTurbine2.PositionTop){
turbines[j].y -=2;
//A while loop breaks the browser :(
}
}
}FIXME = false;
}
}
Any ideas or requests for additional explanation and info are more than welcome. I also have a feeling I'm severely over complicating this. Goddamn my head hurts. Bless you.
I'm afraid your code is a little bit messy do I decided to begin with a clean slate.
Use getters/setters for bottom and right. You can calculate them given the left/width and top/height values, respectively. This will save you from altering the complementary variable right when modifying e.g. left.
You seem to be looking for a collison detection algorithm for rectangles. This is quite easy if the rectangles have the same x-coordinate - two such rectangles do not collide if the bottom of the first is above the top of the other, or if the top of the first is under the bottom of the other. Use this algorithm along with a while loop to generate a new turbine as long as they collide.
This is what I ended up with (it's a separate piece of code as I stated, so you'll have to blend it into your game): http://jsfiddle.net/eGjak/249/.
var ctx = $('#cv').get(0).getContext('2d');
var Turbine = function(left, top, width, height) {
this.left = left;
this.top = top;
this.width = width;
this.height = height;
};
Object.defineProperties(Turbine.prototype, {
bottom: {
get: function() {
return this.top + this.height;
},
set: function(v) {
this.top = v - this.height;
}
},
right: {
get: function() {
return this.left + this.width;
},
set: function(v) {
this.left = v - this.width;
}
}
});
var turbines = [];
function turbineCollides(tn) {
for(var i = 0; i < turbines.length; i++) {
var to = turbines[i];
// they do not collide if if one's completely under
// the other or completely above the other
if(!(tn.bottom <= to.top || tn.top >= to.bottom)) {
return true;
}
}
return false; // this will only be executed if the `return true` part
// was never executed - so they the turbine does not collide
}
function addTurbine() {
var t, h;
do { // do while loop because the turbine has to be generated at least once
h = Math.floor(Math.random() * 300);
t = new Turbine(0, h, 15, 100);
} while(turbineCollides(t));
turbines.push(t);
}
// add two of them (do not add more than 4 because they will always collide
// due to the available space! In fact, there may be no space left even when
// you've added 2.)
addTurbine();
addTurbine();
function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 400, 400);
ctx.fillStyle = "white";
for(var i = 0; i < turbines.length; i++) {
var turbine = turbines[i];
ctx.fillRect(turbine.left, turbine.top,
turbine.width, turbine.height);
}
}
draw();