Search the Community

A Pac-Man style game made in WebGL/JS. Design goal was to have it scale and play well on both a computer and tablet/phone. All suggestions and comments are welcome. https://www.merryarcade.com/Cemetery/ Regards, Bjorn, MerryArcade.

I am creating a Pacman game in JavaScript and have ran into a problem. I am trying to implement the ghost's movement. On each loop, I record the Tile Position of the ghosts var ghostX = Math.round(ghost.x / map.tileWidth); var ghostY = Math.round(ghost.y / map.tileHeight); There are four possible directions in which a ghost can move var moves = [ { 'direction': 'left', 'position': map.getTileLeft(0, ghostX, ghostY).x, 'distance': Math.sqrt(Math.pow((map.getTileLeft(0, ghostX, ghostY).x - pacmanX), 2) + Math.pow((map.getTileLeft(0, ghostX, ghostY).y - pacmanY), 2)), 'available': levelState.pathLeftAvailable(ghostX, ghostY) }, { 'direction': 'right', 'position': map.getTileRight(0, ghostX, ghostY).x, 'distance': Math.sqrt(Math.pow((map.getTileRight(0, ghostX, ghostY).x - pacmanX), 2) + Math.pow((map.getTileRight(0, ghostX, ghostY).y - pacmanY), 2)), 'available': levelState.pathRightAvailable(ghostX, ghostY) }, { 'direction': 'up', 'position': map.getTileAbove(0, ghostX, ghostY).y, 'distance': Math.sqrt(Math.pow((map.getTileAbove(0, ghostX, ghostY).x - pacmanX), 2) + Math.pow((map.getTileAbove(0, ghostX, ghostY).y - pacmanY), 2)), 'available': levelState.pathUpAvailable(ghostX, ghostY) }, { 'direction': 'down', 'position': map.getTileBelow(0, ghostX, ghostY).y, 'distance': Math.sqrt(Math.pow((map.getTileBelow(0, ghostX, ghostY).x - pacmanX), 2) + Math.pow((map.getTileBelow(0, ghostX, ghostY).y - pacmanY), 2)), 'available': levelState.pathDownAvailable(ghostX, ghostY) } ]; As you can see, I thought the best data structure for this would be an array of objects. Each move has several properties including the name of the direction, how far the move will place the ghost from Pacman, and whether it's a legal move. To find the closest tile, you use the distance formula. This is the square root of the squares of the sums of the x and y coordinates. I then created two variables to represent the closest and furthest tiles. This is where I received the error message var closestTile = moves.filter(m => m.available).sort((a,b) => a.distance - b.distance)[0].direction; var furthestTile = moves.filter( m => m.available).sort((a,b) => b.distance - a.distance)[0].direction; I need to find only legal moves, so it was necessary to filter() the array to find only those moves. The arrays then needed to be sorted by their distance. The first such element will be the result of the variable. But it couldn't find the direction property. The movement function is finished out like this var ghostVelocity = levelState.getGhostVelocity(); this.game.physics.arcade.collide(ghost, wallLayer, function() { var ghostDirection; if (ghost.direction == 'up' || ghost.direction == 'down') { ghost.y += ghost.direction == 'up' ? 1 : -1; if (ghost.vulnerable) { ghostDirection = furthestTile; } else { if (ghost == redGhost) { ghostDirection = closestTile; } else { ghostDirection = Math.random() > 0.5 ? 'left' : 'right'; } } ghost.body.velocity.y = 0; ghost.body.velocity.x = ghostDirection == 'left' ? -ghostVelocity : ghostVelocity; } else if (ghost.direction == 'left' || ghost.direction == 'right') { ghost.x += ghost.direction == 'left' ? 1 : -1; if (ghost.vulnerable) { ghostDirection = furthestTile; } else { if (ghost == redGhost) { ghostDirection = closestTile; } else { ghostDirection = Math.random() > 0.5 ? 'up': 'down'; } } ghost.body.velocity.x = 0; ghost.body.velocity.y = ghostDirection == 'up' ? -ghostVelocity : ghostVelocity; } ghost.direction = ghostDirection; }, null, this); As you can see, I am setting the ghost's direction property based on the closest tile to pacman. For reference, here are the four functions that determine whether a direction is available. There doesn't seem to be a problem here. pathRightAvailable: function(x, y) { return [x, x + 1, x + 2].every(function(xPosition) { return !map.hasTile(xPosition, y, 0); }); }, pathLeftAvailable: function(x, y) { return [x, x - 1, x - 2].every(function(xPosition) { return !map.hasTile(xPosition, y, 0); }); }, pathUpAvailable: function(x,y) { return [y, y - 1, y - 2].every(function(yPosition) { return !map.hasTile(x, yPosition, 0); }); }, pathDownAvailable: function(x,y) { return [y, y + 1, y + 2].every(function(yPosition) { return !map.hasTile(x, yPosition, 0); }); }, I've been working on this problem for some time but have ran into trouble. Any help is greatly appreciated

I am doing this tutorial on a mac using a simple python server. http://phaser.io/tutorials/coding-tips-005 It imports the tilemap json on line 55 of this file https://github.com/photonstorm/phaser-coding-tips/blob/master/issue-005/car.html with this.load.tilemap('map', 'assets/maze.json', null, Phaser.Tilemap.TILED_JSON); The json file is here https://github.com/photonstorm/phaser-coding-tips/blob/master/issue-005/assets/maze.json If I edit the values in the data list on line 4 "data":[20, 20, 20, 20, 20, 20, 20, 20 etc... Nothing changes in the map on reload. If I delete the line with data the map still loads the same. If I copy the data line from the second tile map and reload it still shows the first map. Questions 1. How do I change the tile values without opening up the tiled program? 2. What the the list of data do? 3. I would expect to see changes in the map, what is going on here?

Hi I seem to be facing a very annoying issue. I am working on a Pacman inspired game and I based the movement off of the "Move like Pacman" tutorial from the learn examples on Phaser.io: http://phaser.io/tutorials/coding-tips-005 The bug/error I am facing is that the player/sprite randomely collides with tiles that he is not supposed to be colliding with. You can check it out yourself by playing a few minutes on http://cavagames3.meteor.com Here's the relevant code I am using - I rewrote the learn example a bit but these changes should logically be causing the issue. Especially since the issue was present even before I began rewriting it. The Create Function create: function () { // Create the map (object) this.map = this.add.tilemap('map'); this.map.addTilesetImage('tileset', 'tiles'); this.layer = this.map.createLayer('Pacman'); // Create the array of safe tiles to spawn & to add random Dots to this.safeTileArray = this.createTileArray(this.safetile); [... extra code ...] // Pacman should collide with everything except the safe tile this.map.setCollisionByExclusion([this.safetile], true, this.layer); [... extra code ...] },The Relevant Methods checkKeys: function () { if (this.cursors.left.isDown && this.current !== Phaser.LEFT) { this.checkDirection(Phaser.LEFT); } else if (this.cursors.right.isDown && this.current !== Phaser.RIGHT) { this.checkDirection(Phaser.RIGHT); } else if (this.cursors.up.isDown && this.current !== Phaser.UP) { this.checkDirection(Phaser.UP); } else if (this.cursors.down.isDown && this.current !== Phaser.DOWN) { this.checkDirection(Phaser.DOWN); } else { // This forces them to hold the key down to turn the corner this.turning = Phaser.NONE; } }, checkDirection: function (turnTo) { if (this.turning === turnTo || this.directions[turnTo] === null || this.directions[turnTo].index !== this.safetile) { // Invalid direction if they're already set to turn that way // Or there is no tile there, or the tile isn't index 1 (a floor tile) return; } // Check if they want to turn around and can if (this.current === this.opposites[turnTo]) { this.move(turnTo); } else { this.turning = turnTo; this.turnPoint.x = (this.marker.x * this.gridsize) + (this.gridsize / 2); this.turnPoint.y = (this.marker.y * this.gridsize) + (this.gridsize / 2); } }, turn: function () { var cx = Math.floor(this.pacman.x); var cy = Math.floor(this.pacman.y); // This needs a threshold, because at high speeds you can't turn because the coordinates skip past if (!this.math.fuzzyEqual(cx, this.turnPoint.x, this.threshold) || !this.math.fuzzyEqual(cy, this.turnPoint.y, this.threshold)) { return false; } // Grid align before turning this.pacman.x = this.turnPoint.x; this.pacman.y = this.turnPoint.y; this.pacman.body.reset(this.turnPoint.x, this.turnPoint.y); this.move(this.turning); this.turning = Phaser.NONE; return true; }, move: function (direction) { var speed = this.speed; if (direction === Phaser.LEFT || direction === Phaser.UP) { speed = -speed; } if (direction === Phaser.LEFT || direction === Phaser.RIGHT) { this.pacman.body.velocity.x = speed; } else { this.pacman.body.velocity.y = speed; } if (direction === Phaser.LEFT) { this.pacman.play('munch-left'); } else if (direction === Phaser.UP) { this.pacman.play('munch-up'); } else if (direction === Phaser.DOWN) { this.pacman.play('munch-down'); } else if (direction === Phaser.RIGHT) { this.pacman.play('munch-right'); } this.current = direction; },The Actual Update update: function () { [... extra code ...] // collision between the pacman, walls and dots this.physics.arcade.collide(this.pacman, this.layer); this.physics.arcade.overlap(this.pacman, this.dots, this.eatDot, null, this); // collision between the pacman and upgrades this.physics.arcade.overlap(this.pacman, this.upgradeEaters, this.eatUpgradeEater, null, this); // Calculate the grid position of the Pacman this.marker.x = this.math.snapToFloor(Math.floor(this.pacman.x), this.gridsize) / this.gridsize; this.marker.y = this.math.snapToFloor(Math.floor(this.pacman.y), this.gridsize) / this.gridsize; // Update our grid sensors this.directions[1] = this.map.getTileLeft(this.layer.index, this.marker.x, this.marker.y); this.directions[2] = this.map.getTileRight(this.layer.index, this.marker.x, this.marker.y); this.directions[3] = this.map.getTileAbove(this.layer.index, this.marker.x, this.marker.y); this.directions[4] = this.map.getTileBelow(this.layer.index, this.marker.x, this.marker.y); // Check if a key is pressed down this.checkKeys(); if (this.turning !== Phaser.NONE) { this.turn(); } [... extra code ...] }Alternative Idea As an alternative, I tried adding another layer above it with tile #17 overlapping every "wall" in the map. Then i changed the setCollisionByExclusion to setCollision(17, true, SECOND LAYER). This does however give the exact same results as the above code does where collision happens randomely on tiles where it should not. I tried debugging and printing getTileLeft, getTileRight, getTileAbove, getTileBelow to the console, and it appears that the tiles that it collides with are indeed the ones that it should not collide with. Any help will be highly appreciated as I am completely stuck with this issue! Thanks a lot!

Hi! I'm trying to make a game like pac-man, but how I can populate coins in the level? I already have a map: http://i.imgur.com/OLUpNhV.png But I need the coins appears only inside the walls. Can I user anything like "json tilemaps" to do this? And sorry about my very bad english. xD