I am making a very simple html5 canvas game. I wish to make it so that when the player loses all 3 lives the game resets.
I was thinking I could do a while loop where it always checks for Lives === 0 then run a function but this breaks the game and nothing shows up on the canvas.
here is my code.
var lives = 3;
while (lives <= 0) {
var fullReset = function () {
// Throw the monster somewhere on the screen randomly
monster.x = 1 + (Math.random() * (canvas.width - 64));
monster.y = 1 + (Math.random() * (canvas.height - 64));
monster2.x = 1 + (Math.random() * (canvas.width - 100));
monster2.y = 1 + (Math.random() * (canvas.height - 100));
// player start again
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
//score resets
monstersCaught() = 0;
lives() = 3;
}
fullReset();
}
I think there is a conceptual bug in your approach. You start with 3 lives (initialization that is missing in your example). Then, every time the monster attacks, you reduce the lives by one and check the new value. When the new value is zero, then it is time to reset the game.
So, your loop should only handle moving your object while you would trigger an event whenever the monster attacks and apply the above logic.
function gameLoop() {
var lives = 3;
if(lives <= 0) {
var fullReset = function () {
// Throw the monster somewhere on the screen randomly
monster.x = 1 + (Math.random() * (canvas.width - 64));
monster.y = 1 + (Math.random() * (canvas.height - 64));
monster2.x = 1 + (Math.random() * (canvas.width - 100));
monster2.y = 1 + (Math.random() * (canvas.height - 100));
// player start again
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
//score resets
monstersCaught() = 0;
lives() = 3;
}
fullReset();
}
requestAnimationFrame(gameLoop);
}
have you tried the requestAnimationFrame() this way you might not even depend on the while loop and draw canvas over and over again with changed positions of objects everytime.
That isn't a very practical way to solve your problem.
I would handle that with an OnEvent trigger such as when a monster attacks or when the player touches the monster
I have four classes: Room, TileGrid, HoverTile, and Tile.
Room is composed of walls and a TileGrid. TileGrid is made out of Tile. Currently, I use this code to generate a TileGrid out of Tiles:
this.mapArray = [[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1, 1, 1, 1, 1, 1, 1]];
this._mapHeight = this.mapArray.length;
this._mapWidth = this.mapArray[0].length;
this._tileHeight = 23;
this._tileWidth = 46;
var initialX:Number = 260;
var initialY:Number = 150;
for (var isoY:int = 0; isoY < mapArray.length; isoY++)
{
for (var isoX:int = 0; isoX < mapArray[isoY].length; isoX++)
{
if (isoX == 0 && isoY == 0)
{
var _tile:Tile = new Tile();
_tile.x = initialX;
_tile.y = initialY;
this.addChild(_tile);
}
if (this.mapArray[isoY][isoX] == 1)
{
var _tile:Tile = new Tile();
_tile.x = initialX - (isoX * 20) - (isoY * 20);
_tile.y = initialY - (isoX * 10) + (isoY * 10);
addChild(_tile);
_tile.addEventListener(MouseEvent.MOUSE_OVER, updateHover);
}
}
}
My current issue is that I want to add a white square around the tile that a mouse is hovering over. The code I used to use wasn't sufficient, because transparent parts of the Tile sprite are still counted as part of it. So even if I'm pointing at another Tile2 (which is next to Tile1), for example, if I'm not far enough onto Tile2, it'll highlight Tile1.
So, here's the current code I'm using:
public function updateHover(e:MouseEvent):void
{
var mX:int = e.stageX - (_tileWidth / 2);
var tPoint:Point = pointToXY(mX, e.stageY);
var isoX = tPoint.x;
var isoY = tPoint.y;
if (isoX >= 0 && isoY >= 0)
{
if (isoY < mapArray.length)
{
if (isoX < mapArray[0].length)
{
tPoint = xyToPoint(isoX, isoY);
_tileHover.x = tPoint.x;
_tileHover.y = tPoint.y;
_tileHover.visible = true;
return;
}
}
}
_tileHover.visible = false;
}
public function pointToXY(x:int, y:int):Point
{
x -= 260;
y -= 150;
var pRatio:int = (_tileWidth / 2) / (_tileHeight / 2);
var tX:int = (y + x / pRatio) * (pRatio / 2) / (_tileWidth / 2);
var tY:int = (y - x / pRatio) * (pRatio / 2) / (_tileWidth / 2);
return new Point(tX, tY);
}
public function xyToPoint(x:int, y:int):Point
{
x -= 1;
var worldPoint:Point = new Point(0, 0);
worldPoint.x = (x * (_tileWidth / 2)) - (y * (_tileWidth / 2));
worldPoint.y = (x * (_tileHeight / 2)) + (y * (_tileHeight / 2));
worldPoint.x = worldPoint.x + (_tileWidth / 2);
worldPoint.y = worldPoint.y + (_tileHeight / 2);
worldPoint.x += 260;
worldPoint.y += 150;
return worldPoint;
}
Sorry I have to post so many code blocks. Now, 260 and 150 are the default starting point for the entire room. That said, I'm really confused on how to get the last two functions in particular to work so that they'll give me the correct answer. This is what I expected from using this code:
That would be perfect. But, again, I don't know why the code isn't working. The sizes are all correct and I believe the offset is, too. So, I'm
First, you should add the listener to this, not to _tile, because then you are locked to stage coordinates to determine the tile that's selected, which is not good. Second, your listener should be against MouseEvent.MOUSE_MOVE event, not over, this way you'll constantly get updated mouse coords to properly move your rectangle over tiles. And you have a minor error out there, you have a (0,0) tile created two times, one being inactive.
for (var isoY:int = 0; isoY < mapArray.length; isoY++)
{
for (var isoX:int = 0; isoX < mapArray[isoY].length; isoX++)
{
if (this.mapArray[isoY][isoX] == 1)
{
var _tile:Tile = new Tile();
_tile.x = initialX - (isoX * 20) - (isoY * 20);
_tile.y = initialY - (isoX * 10) + (isoY * 10);
addChild(_tile);
}
}
}
this.addEventListener(MouseEvent.MOUSE_MOVE, updateHover);
Also, it'll be better that you'd store (x,y) pairs on the array (as tiles, most likely), so that your initial array of zeroes and ones would transform into an array of Tile objects. To do that, you first do this:
this.tileArray=[];
for (var i:int=0;i<this.mapArray.length;i++)
this.tileArray.push(new Array(this.mapArray[i].length));
This will create an array of nulls that matches your mapArray by dimensions, that will serve as placeholder for created Tile objects. After you do this, you call this.tileArray[isoY][isoX]=_tile; to place the newly created tile to its place. After that, you can rewrite your listener to this:
public function updateHover(e:MouseEvent):void
{
var p:Point=pointToXY(e.localX,e.localY);
_tileHover.visible = false; // hide hover for now
if ((p.y<0) || (p.y>=tileArray.length)) return; // range error on Y
if ((p.x<0)||(p.x>=tileArray[p.y].length)) return; // range error on X
if (!tileArray[p.y][p.x]) return; // no tile
var _tile:Tile=tileArray[p.y][p.x];
_tileHover.x=_tile.x;
_tileHover.y=_tile.y; // no need to convert xyToPoint() we have coords stored in tile
_tileHover.visible=true;
}
I am making a game where tempEnemy in an array of enemies gets made on random. Every time the player advances a level, more insects appear. This is how I want it to be, but when the user is high on a level, too many enemies get made that are impossible for the user to kill. How can I limit the number of enemies being displayed on stage, but not hinder the randomness of the enemy production?
function makeEnemies():void
{
var chance:Number = Math.floor(Math.random() * 150);
if (chance <= + level)
{
tempEnemy = new Enemy();
//Math.random(); gets a random number from 0.0-1.0
tempEnemy.x = Math.round(Math.random() * 550);
addChild(tempEnemy);
enemies.push(tempEnemy);
tempEnemy.speed = enemyBaseSpeed + ((level - 1) * speedLevelInc);
if (tempEnemy.speed > MAX_SPEED)
{
tempEnemy.speed = MAX_SPEED;
}
}
}
//limit 100 enemies
if (chance <= level && enemies.length < 100)
I'm working on a 2d vertical scrolling game that is based on doodle jump and i'm using flash and as3 to create it. I've put the scrolling and platform spawning and so far so good, but thing I randomize a x and y for each platform and obviously they just spawn wherever they feel like (inside the stage, that's my only actual rule). I wanna create rules so that max distance in between new platform and last one is, let's say 35px.
My current random code is:
public function createPlatform():void
{
//randomY();
var newY:Number = Math.random() * 600;
var X:Number = Math.random() * 500;
var tempPlatform:mcPlatform = new mcPlatform();
tempPlatform.x = X;
tempPlatform.y = newY;
platforms.push(tempPlatform);
mcContent.addChild(tempPlatform);
}
I also tried to do random just for Y this way:
private function randomY():void
{
var flag:Boolean = false;
while (flag == false)
{
newY = Math.random() * 600;
if(newY < lastY && (lastY - newY) < 50 && (lastY - newY) > 10)
{
newY = lastY;
flag = true;
}
}
}
the point of the game is to have character jump from platform to platform and when the game scrolls its content it just spawns a new set of platforms.
P.S.: newY is declared in the beggining of the code as 600 so first one is always starting from stage height.
Instead of just randomly placing platforms, try starting at the bottom of the screen and increasing y by a random amount each time you place a platform.
Something like:
newY = Math.random() * 50;
While (newY < 600) {
var X:Number = Math.random() * 500;
var tempPlatform:mcPlatform = new mcPlatform();
tempPlatform.x = X;
tempPlatform.y = newY;
platforms.push(tempPlatform);
mcContent.addChild(tempPlatform);
newY += 35 + math.random() * 50;
}
Once you have values for x and y of the new platform you will have to check the x and y (or one of them) with the last platform added to the array.
Something like:
...
tempPlatform.x = X;
tempPlatform.y = newY;
lastPlatform = platforms[(platforms.length)-1]; //get the last added platform
var flag:Boolean = false;
while (flag == false)
{
if(lastPlatform.y > tempPlatform.y ...)//set the condition(s) you need
{
//create new value
} else {
flag = true;
}
}
...
I've been stuck on this problem for a very long time now, I've searched around alot and tried stuff, but nothing works. Some explanations are just very hard for me to understand as Im pretty new to programming overall and got alot to learn.
I have two problems
1: The ball wont collide with the bricks sometimes when the speed is too fast.
2: The ball is capable of hitting 2 bricks.
Both problems is related to the fact that 60 fps isnt enough for my type of collision detection to work properly.
I just need someone to explain in a simple way as possible what I need to do to make a collision detection that will prevent this from happen.
Here's my current collision code:
private function checkCollision(): void {
grdx = Math.floor((ball.x) / 28);
grdy = Math.floor((ball.y) / 14);
ngrdx = Math.floor((ball.x + dx) / 28);
ngrdy = Math.floor((ball.y + dy) / 14);
var flipX: Boolean = false;
var flipY: Boolean = false;
if ((grdy <= level.length - 1) &&
(ngrdy <= level.length - 1) &&
(grdy >= 0 && ngrdy >= 0)) {
if (testBlock(grdx, ngrdy)) {
flipY = true;
paddleFlag = 1;
}
if (testBlock(ngrdx, grdy)) {
flipX = true;
paddleFlag = 1;
}
if (testBlock(ngrdx, ngrdy)) {
flipX = true;
flipY = true;
paddleFlag = 1;
}
dx *= flipX ? -1 : 1;
dy *= flipY ? -1 : 1;
}
}
private function testBlock(xPos: int, yPos: int): Boolean {
if (level[yPos][xPos] > 0 && level[yPos][xPos] != 13) {
trace("hit on X,Y");
level[yPos][xPos] = 0;
breakBlock("Block_" + yPos + "_" + xPos);
trace("Block: " + totalBreaks + " / " + totalBlocks);
return true;
}
return false;
}
private function breakBlock(blockName: String): void {
if (this.getChildByName(blockName)) {
this.removeChild(this.getChildByName(blockName));
totalBreaks++;
}
}
Thank you and sorry for my bad english, its not my motherlanguage.
One solution is to move the ball in smaller iterations, multiple times in a given frame.
For example, and I am giving this solution assuming that you are moving the ball based on the time elapsed from the last frame.
Suppose that 30 milliseconds have elapsed since the last frame update. In that case you would update the movement/collision twice in that frame using 15 millisecond as your time elapsed.
The higher resolution of collision you want, the more iterations you would do.
Here's an example :
// class declarations
var lastFrame:Number;
var iterationsPerFrame:int;
function startGame():void
{
// lets specify 3 updates per frame
iterationsPerFrame = 3;
// save initial time
lastFrame = getTimer();
// create your listener
addEventListener(Event.ENTER_FRAME, update);
}
function update(e:Event):void
{
var currentFrame:Number = getTimer();
var deltaTime:Number = (currentFrame - lastFrame)/1000;
var iterationDelta:Number = deltaTime/iterationsPerFrame;
for (var index:int = 0;index < iterationsPerFrame;index++)
{
// I'm assuming dx,dy are the velocity of the ball, in pixels per second
ball.x += dx * iterationDelta;
ball.y += dy * iterationDelta;
// check collision
}
// set lastFrame to the currentFrame time, preparing for next frame
lastFrame = currentFrame;
// after this, your frame is going to render
}
You could work out how far the ball travels each frame (A) based on its speed, how far the ball is from the paddle (B) and if A > B manually trigger a collision that frame.
You're essentially checking every bricks X and Y coordinate to the balls X and Y coordinate, so if the bricks are stored in an array this becomes: Sqrt( Sqrd(p2.x - p1.x) + Sqrd(p2.y - p1.y))
for(var i=0; i<brickArray.length; i++)
{
var distance:Number = Math.sqrt((brickArray[i].x - ball.x) * (brickArray[i].x - ball.x) +
(brickArray[i].y - ball.y) * (brickArray[i].y - ball.y));
}
This is a very good tutorial on high speed collison detection:
http://www.newgrounds.com/bbs/topic/1072673