Search the Community

Hi, I am new to coding and phaser 3. Here is what I am trying to do- I am have a world map that is draggable, and I want to add markers on the map of the cities I want to add. The cities are all stored in an array, myCities2. I have a plan to add a lot of cities and adding them through a function or loop will make it a lot easier than applying each city individually. Each city will link to a "demo scene" where the city name, city image and other relevant information will be passed and the city can be explored. I have build a lot of this in another file but each city and click event hast to be copy pasted and so on creating hundreds and hundres of lines of code and repetition, I am sure there is a better way and I know coding has a solution, as my coding friends tell me. Efficient code is my goal here. I have tried forEach(), and for loops but can't get them to add the images to the container with the map - as the map is dragged the cities need to be dragged along with it... Any suggestions? Thanks, Your help is greatly appreciated. myCities.js

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

Hey! So I'm trying to re-use a function because it can easily be done but it doesn't seem to work for me. I've got an array filled with cubes and I'm trying to call a function with an id as parameter to reference the objects within the array. cubes.push(cube, cube1, cube2, cube3); function lightFader (id) { if (!clicked) { cubes[id].material.diffuseColor = new BABYLON.Color3(1.00, 0.00, 0.00); document.getElementById("p1").innerHTML = "Text 1!"; clicked = true; } else { cubes[id].material.diffuseColor = new BABYLON.Color3(1.00, 1.00, 0.00); document.getElementById("p1").innerHTML = "Text 2!"; clicked = false; } } cube.actionManager = new BABYLON.ActionManager(scene); cube1.actionManager = new BABYLON.ActionManager(scene); cube2.actionManager = new BABYLON.ActionManager(scene); cube3.actionManager = new BABYLON.ActionManager(scene); cube.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, lightFader(0))); cube1.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, lightFader(1))); cube2.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, lightFader(2))); cube3.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, lightFader(3))); I have two major issues with this code: Firstly, I know that functions with parentheses are called on start and functions without them are called, when they are referenced in code. Meaning lightFader; only gets called on the trigger event while lightFader() gets called as soon as I launch the whole thing. But I don't want to do that, I do not want it to run on start up. How do I do that if I do require the parentheses to call the function with the right parameter? Secondly, it does not seem to be possible to change the material using my approach. What is wrong here? Is this approach completely wrong? Thank you!

Is this possible? Can import json array, but can it be done backwards?

Some snippets from code: (stripped out stuff to see where issue is unrelated to issue) Shows how I am declaring, assigning and calling the arrays.. I am thinking the problem is the declaring of the array. I believe all my values in the 2nd dimension of the array is ALL referencing the same value. Declaring is first few lines posted below. var Board = function(){//varsvar board = []; //tried var board = new Array(8,8); for(var i = 0; i < 9; i++){board[i] = [];} //load board information from datathis.loadBoard = function(data){//stripped vars player and playerID //do something with k or data... $.each( data, function( key, val ) {$.each( val, function( kk, vv ) { //if no player yet, set as player 1if(playerID == 0){player = key;playerID = 1;}else if(player != key)//set as player 2{player = key;playerID = 2;} //Log is Correct, shows each x, y pass different value console.log("setting: x: " + vv.x + " y: " + vv.y + " result: " + vv.piece);board[vv.x, vv.y] = new Piece(vv.piece, playerID);});}); } this.renderPieces = function(){//2 for loops to cycle threw 2d array stripped, if( typeof board[x, y] != "undefined") //neglected{console.log("x: " + x + " y: " + y + " result: ");board[x, y].renderPiece( ((x*80)+35), ((y*80)+35) ); //renders same piece}}} var Piece = function(piece_, color_){//varsvar color = color_;var piece = piece_; var pieces = new Image();pieces.src = "resources/pieces.png"; this.renderPiece = function(x, y){ var x_offset = 0;var y_offset = 0; //greenif(this.color = 2){y_offset = 71;} switch(piece){case "a": x_offset = 340;break;case "b": x_offset = 68;break;case "c":x_offset = 136;break;case "d":x_offset = 204;break;case "e":x_offset = 272;break;} context.drawImage(pieces, x_offset, y_offset, 71, 68, x, y, 71, 68); } this.getColor = function(){return color;} this.getPiece = function(){return piece;} Edit: thats a little upsetting. I forgot to close the code tag and my post lost all formatting of code.. And I had to click indent over and over for nice formatting since the formatting didnt keep when copying out of my editor..

Why is it that if I create an array and put an object in it, then check the array's length, I get incriments of 15 for each object in the array instead of 1 per object? This is screwing me up because I'm not sure how to reference what I put in the array because I don't know where it is. var me = { name: 'bill',}var arr = [];arr += me; // one objectalert(arr.length); //15 objects in arrayalert(arr[0].name) //undefined

Hello dear html5 cracks, so im following this tutorial about a javascript tile based theme and i came across this line: tile = (engine.currentMap[mapY] && engine.currentMap[mapY][mapX]) ? engine.currentMap[mapY][mapX] : {ground: 0}; now as i understand it checks wether there is information in the array or not, if there is none it draws a black tile. now i tryed writing : tile = (engine.currentMap[mapY] && engine.currentMap[mapY][mapX]) ? engine.currentMap[mapY][mapX] : {ground: 0}; and it wont work anymore. now to my question why cant i just check if there is a tile at mapY,mapX? thx already, whole code bit engine.map.draw = function(){ var i, j, tile; var mapX = 0; var mapY = 0; var iMax = engine.screen.tilesX + engine.viewport.overflowTile; var jMax = engine.screen.tilesY + engine.viewport.overflowTile; for(j = -engine.viewport.overflowTile; j<jMax; j++) { for(i = -engine.viewport.overflowTile; i<iMax; i++) { mapX = i + engine.viewport.x; mapY = j + engine.viewport.y; tile = (engine.currentMap[mapY] && engine.currentMap[mapY][mapX]) ? engine.currentMap[mapY][mapX] : {ground: 0}; engine.tile.draw(i, j, tile); } }};

I am new with javascript and got to the point where I wanted to create a tilemap and draw that to the screen. I was not able to find anything with google so I am asking here now. How do you use javascript to store the data of a tilemap in a array? I have a blog where I put source code on and will put the tilemap example on it as soon as I get how its done. This is my blog btw : (For beginners in game programming) http://html5gameprogrammingstepbystep.blogspot.nl/