Search the Community

Showing results for tags 'Javascript'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 525 results

  1. Hi everyone, I just finished this little project that I call Room Walkers. You can play it here: In the top-left corner enter a name and click "Play!". Then a character will appear which you can control with arrow keys. When other players join you can see them and they can see you as well. There is no attacking or messaging in this game, just walking around. I used basic JavaScript Phaser with NodeJS "ws" library on the backend. Let me know what you guys think. woot.
  2. Hi all, first post, and a Pixi.js noob trying to learn the ropes - so please be gentle! First off, I'm a designer by trade ( - shameless plug) but I have dabbled in coding over the years mainly on a UI Development basis (AS3 Scaleform, Flash, C# Unity). A lot of my work at the moment is casino games, and we've been looking for a modern alternative for putting these together. Previously games would be made strictly in canvas using sprite sheets and keyframed animations for the most part. I've started using Spine for animations, which in turn has led us to Pixi.js as front runner for a renderer (with most mobiles now supporting webgl). Phaser looked attractive, but not sure it would offer the low level access the developers would need to hook into the backend. My role really is to get a prototype together in some form to showcase animations, get the frontend together and roll that onto future games as we learn the possibilities. Previously tried Animate CC but webgl offerings are seriously limited I think there atm, so thought it was time to get my hands dirty! Javascript is also pretty new to me to be honest, so trying to get my head around it at the moment. I've got a very basic game prototype together, using GSAP for transitions (which I'm already accustomed to), but still struggling on how best to split a game down into classes if this is possible? All the script is in one js file currently, and was wondering if it would be possible to take a more OOP approach? (Can tell I'm used to working in editors and attaching scripts to components etc). So for instance, I have a spin button in the game that has 4-5 functions for the state of the button. Would it be possible to split this down into a separate class just for this button, and have them communicate with the main game file? Similar scenario with a few functions I have for preloading webfonts (based on Just trying to lay things out the best I can before I end up with a mammoth js file! Know this maybe pretty basic javascript coding to some, but if there are any pointers, or tutorials out there that cover this side of things, it would be very greatly appreciated! Thanks in advance!
  3. I keep getting this Error: 'Phaser was used before it was defined' from running this Code: Please see attached all code and errors
  4. I create a group of objects and load a layer from Tiled. this.saws =; this.saws.enableBody = true;'saws', 4, 'saw', 0, true, false, this.saws); In update function, I set the rotation angle and I want the saw to rotate around its axis. this.saws.angle += 1; But a group of objects starts positioning relative to the origin and the saw starts to spin around (0, 0) and around its axis. How to make it stay in its original place? I just wanted to draw a level in Tiled, and assign certain behaviors to individual groups of objects: the saws rotate, the platforms move, etc. Demo
  5. Hello everyone! Just a quick question for you all. Sprites in my game are moving flawlessly when the game is played inside a browser window. However, once I switch to mobile webview, all the movements / animations become choppy. I have already set the following inside my game: game.forceSingleUpdate = true but nothing has changed. Is there any way I an optimize my game, or add something to make make my sprite move without lags? Thank you in advance!
  6. Hi, it's been a while since I've been in web development world, including HTML5 for games. I'm just wondering if I can finally use EcmaScript 6 features by default (class, let, const, extends, etc.)? How about you? If not, what are the transpilers that you can recommend me? Thanks
  7. Introduction: Hello, my name is Jack. I represent SymmetryGames as the lead 3D Artist, founder, and co-director of our current and very first game being developed as a studio. Currently, our studio is looking for a senior Javascript programmer. The following will describe more details about our studio, the game and the position we are hoping to fill. Game Info: Title: Z-Warz Genre: Zombie Survival Play Style: Top-Down Shooter Platform: Web-based browser MMO Graphics Style: 3D, Semi-realistic/cartoonish blend Game Engine: PlayCanvas, 3D Javascript Game Engine. (experience with this engine is not required) Server: Will be hosted on AWS Game Basic Description: A 3D IO game redesigned for zombie survival. Players get spawned in at random locations and must shoot zombies and build bases to survive. In this game, players will want to work together to survive rather than kill each other like most IO games, giving a fresh new look to standard IO games. With different classes, weapons, and buildable items, this creates a diverse game system with a lot of variation. Players will want to form teams, people of different classes and roles will work together, players will build bases and protect each other from hordes of different types of zombies. There are three Game Modes: Independent, Team, and Survival. Game Development Schedule: Currently, our studio is developing the prototype for Z-Warz. After we complete our prototype of the game, we will work for 1-4 weeks on our Kickstarter video and other Kickstarter related topics. After that is complete, we will launch our Kickstarter Campaign for $38,000 U.S. Dollars, however, some calculations are still being made so that number may fluctuate. After our Kickstarter campaign has finished, we will begin the first week of development by establishing payment systems for employees, purchasing the needed software, and preparing other important assets. After the first week, we will have 12 weeks exactly to develop the full Z-Warz game. An additional 1-2 months after development will be used for beta testing/corrections and marketing. After our games initial release, all employees will receive 2-3% of the game's ad based revenue for the first initial 2-3 months. About the job: Currently, we are looking specifically for a Javascript Programmer. If you happen to have experience with the PlayCanvas Engine, that will be noted. We are looking for someone who specifically finds an interest in developing games similar to ours. The programmer should have a strong understanding of the Javascript fundamentals. Alongside our other developer, you would work to develop player movement, character AI, combat systems, a building system, a player class system, and more. The PlayCanvas game engine handles most of the rendering systems. The Javascript programmer will be expected to work roughly 15-20 hours per week during the 12 weeks of development. Aside from royalties, this job pays an hourly wage of 20 USD. Please understand that as an Indie Startup studio, we are unable to pay large amounts per person. If you choose to help work with us on our prototype before the Kickstarter/official development phase, please note we will not be able to pay at that time, however, higher amounts royalties will be offered to those interested. Application: To apply for the position as Senior Javascript Programmer, please email me directly here: Please provide some basic information about yourself, as well as any work you have done in Javascript that you feel expresses your talent as a programmer. This job posting has been made short and to the point. If we missed any big questions, please feel free to ask anything in your application for this job, or below in the comments. Thank you for your time, - Jack (SymmetryGames Founder and Lead 3D Artist)
  8. Hey there, So I've snagged onto a little problem while developing my game. I'm using Phaser with it's inbuilt support of gamepad. The axis of the controller input works in a way such that it returns 1 when held to the right and -1 when held to the left. Here's a picture to make things easier to understand. How would I map the values to degrees? Here's a visual representation of what I'd like to get. What's a formula that would allow me to do this?
  9. Hello everybody! I hope you are having a fantastic day! Our team wants to start making simple HTML5 games for our Android / IOS apps. Games are supposed to be ran inside the WebView. We are looking for a very lightweight engine, because there is already ads placed at the bottom of the screen in our apps. Our first attempt was Phaser.js, but the performance wasn't the greatest inside the WebView. Choppy sprite movements, common fps drops and so on. If you guys know an engine that could help us achieve the goal, please let me know! Thank you in advance!
  10. Hello everyone, my name is Sascha and I'm developing websites and games. Here on this thread I want to offer you some of my games. (step by step), if you are interested in one game, please contact me on All is possible, just to buy a single-use license, a single-use license with you're brand, a exclusive license (if not sold in another way until the request comes in), to buy the source code or graphic templates. Just contact me, I'm openminded for a lot of ways. The games offered in this thread are build with javascript and the frameworks jQuery and Pathfinder (1920x1080 | scaleable and fullscreen possible):
  11. Hi, sorry for very noobish question I have my phaser game.js file which have reached more than 700 lines of code. I want to divide it into documents containing f.e. only create function, update, variables and other functions. I thought this will work: <div id="game"> <script type="text/javascript" src="game.js"></script> <script type="text/javascript" src="create.js"></script> <script type="text/javascript" src="update.js"></script> <script type="text/javascript" src="functions.js"></script> </div> But error, create function not found. In game.js it look like this: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { (...) } function create() { (...) } function update() { (...) } functions....
  12. Hello everybody! I hope you are having a great day! I have recently build a prototype for my new phaser.js game. It's a simple runner where the player has to avoid obstacles. I have tested it in multiple environments, including mobile browsers and webviews. The game refuses to run smoothly like I want it to. I have experienced lags, loosing frame rate and total unresponsiveness. So here I am, begging for your help and advice, what am I doing wrong? How can I make my game run smoothly? Is my update loop simple enough? Anything help guys! Here is the source Play it here (don't forget to switch to a mobile view) Thank you in advance! This community is awesome
  13. Hello I can't play phaser animation through getting of constructor new Animation(game, parent, name, frameData, frames, frameRate, loop, loop). Before adding an instance of class new Animation all work, and just sprite is showing, but after adding animation it is ceasing to work. I spent a lot of time for realization, but without results. What is the problem? My classes for sprite animation: mainPlayer.js: import 'phaser-shim'; export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) this.anchor.setTo(0.5); this.outOfBoundsKill = true; this.scale.setTo(0.8);// scale this.angle = 90; game.physics.enable(this, Phaser.Physics.ARCADE); } update () { } } My mainPlayerAnimation.js: import 'phaser-shim'; export default class extends Phaser.Ainmation { constructor ({ game, parent, name, frameData, frames, frameRate, loopFirst, loopSecond }) { super(game, parent, name, frameData, frames, frameRate, loopFirst, loopSecond); //this.anchor.setTo(0.5); //this.outOfBoundsKill = true; //this.scale.setTo(0.8);// scale //this.angle = 90; //game.physics.enable(this, Phaser.Physics.ARCADE); } update () { } } My level class: import 'phaser-shim'; import config from '../config'; import currentGameState from '../currentGameState'; import backgroundMainGame from '../objects/backgroundFirstlevel'; import mainPlayer from '../objects/mainPlayer'; import mainPlayerAnimation from '../objects/mainPlayerAnimation' import bullets from '../objects/bullets'; import enemiesloader from '../loaders/enemiesloader'; import bossloader from '../loaders/bossloader'; export default class extends Phaser.State { preload () { this.load.image('background', './img/firstlevel.jpeg'); this.load.spritesheet('mainPlayer', './img/main.png', 50, 50); this.load.image('bullet', './img/shot.png'); this.load.image('enemy', './img/enemy.png'); } create () { //--------------------------------------------------------------- this.background = new backgroundMainGame({ game: this, x: 0, y: 0, width: 1024, height: 768, asset: 'background' });; //--------------------------------------------------------------- this.mainPlayer = new mainPlayer({ game: this, x:, y:, asset: 'mainPlayer' });; //--------------------------------------------------------------- this.mainPlayerAnimation = new mainPlayerAnimation({ game: this, parent: this.mainPlayer, name: 'mainPlayerAnimation', frameData: null, frames: [0, 1, 2], frameRate: 100, loopFirst: true, loopSecond: true }); //--------------------------------------------------------------- this.bullets = new bullets({ game: this, parent: null, name: 'bull', addToStage: true, enableBody: true, physicsBodyType: Phaser.Physics.ARCADE });; //-------------------------score--------------------------------- this.scoreText = this.add.text( config.gameWidth-200, config.gameHeight - 50, `score: ${currentGameState.score}`, { font: '32px Arial', fill: '#dddddd'}); this.scoreText.anchor.setTo(0.5); //--------------------------------------------------------------- this.cursors = this.input.keyboard.createCursorKeys(); this.fireButton =; } update () { //--------------------------update score------------------------------ this.scoreText.text = `score: ${currentGameState.score}`; //--------------------------if press nothing stop the ship------------ this.mainPlayer.body.velocity.x = 0; this.mainPlayer.body.velocity.y = 0; //------------------------spawn enemies------------------------------------- enemiesloader(this); //---------------------spawn boss------------------------------------------ bossloader(this); //-------------------------controls---------------------------------------- if(this.cursors.left.isDown){ this.mainPlayer.body.velocity.x = -350; } if(this.cursors.right.isDown){ this.mainPlayer.body.velocity.x = 350; } if(this.cursors.up.isDown){ this.mainPlayer.body.velocity.y = -350; } if(this.cursors.down.isDown){ this.mainPlayer.body.velocity.y = 350; } if(this.fireButton.isDown){; } } }
  14. How can I create start menu in Phaser? I found nothing on that.
  15. So to get right to the point. I am having issues with my ship image/sprite and my drawn objects on screen disappearing as soon as I try and addEventListener to code. why does my code essentially break when i add the EventListener? is it not possible to add controls to image or sprite within Html canvas? Ship game code =
  16. Hey folks, what's going on? * I'm still a baby-worm level Phaser developer, so warn me if I'm doing anything wrong! As far as I know, many frameworks have some tricks and quirks that are not very clear when you visit the good looking Github page (or website, or dungeon, multiversal spiritual portal [it's over now, I'm not going to use BGE again..], etc) to download it. My intent here is to learn and document about those little things that are not listed anywhere and you can certainly stumble upon one day. Alright people, if you have experienced what I'm talking about here, let me hear your voice! (If you know any post which aims exactly the same thing, put a link down here, so that this one will serve as a pointer until it gets deleted) Thanks for choosing the American Airlines!
  17. I have a group with sprites. Will the sprite `enemy` be deleted from the group if I add such code and the sprite go out of bounds? enemy.outOfBoundsKill = true;
  18. If I have a group, how can I disable its colliding with top and bottom? Here is a code which I apply to every sprite in group: enemy.enableBody = true; enemy.body.gravity.y = 2000; enemy.body.collideWorldBounds = true; enemy.body.bounce.y = 0.1; enemy.animations.add('attackMagic', Phaser.Animation.generateFrameNames('attackMagic/', 0, 24, '.png', 1), 7, false, true); enemy.animations.add('attack', Phaser.Animation.generateFrameNames('attack/', 0, 5, '.png', 1), 10, false, true); enemy.animations.add('run', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true); enemy.animations.add('idle', Phaser.Animation.generateFrameNames('stance/', 0, 3, '.png', 1), 10, true, true); enemy.animations.add('jump', Phaser.Animation.generateFrameNames('jump/', 0, 3, '.png', 1), 10, false, true); enemy.outOfBoundsKill = true;
  19. How can I generate enemies in arcade physics?
  20. Can someone tell me, please, why collision does not take place during animation? Here is a game :
  21. So more than a year ago, I started learning javascript and had to build something using vanilla javascript. I thought it would be cool and fun to build a game and decided to build a Mario clone. But you know, only the Mario gameplay wouldn't be enough for the project. So I decided to add a level editor where you could save your levels that you can create yourself. Found the sprites and images from google, forgot the exact source . Also I had no idea "Mario Maker" already existed. Only found out after this project was completed. Anyways, this fun little project was completed a year ago, with the help from html5gamedevs of course, and i hadn't actually shown to anybody outside my circle. So here it is, do give it a look. It's not much but it's something I am very proud of. Link to the game: Link to Repo:
  22. How can I change background of the game in Phaser? I am using tileSprite for the bacground and when I destroy current sprite and add new the new one goes at the top of all my game.
  23. I wrote: background =, 0,,, 'back'); How can I change the spritesheet shown at the back? I already have "back2" preloaded.
  24. Let us suppose I added tileSprite to the window like this : background =, 0,,, 'back'); After that I added a lot of different things above the tileSprite. And now I want to change background without showing it over everything else. How can I do that?
  25. Here is my code: var Main = function(game){ }; var velocityOfTileMoving = 10, speedOfTileGenerating = 15000, speedOfPlayerMovingRightLeft = 150, facing = 'left', sizeOfPlayer = 0.5, me, spaceBar, jumpTimer = 0; Main.prototype = { create: function() { me = this; spaceBar =; //The spacing for the initial platforms me.spacing = 200; //Set the initial score me.score = 0; //Get the dimensions of the tile we are using me.tileWidth ='tile').width; me.tileHeight ='tile').height; //Set the background colour to blue = '479cde';, 0,,, 'back'); //Enable the Arcade physics system; //Add a platforms group to hold all of our tiles, and create a bunch of them me.platforms =; me.platforms.enableBody = true; me.platforms.createMultiple(100, 'tile'); //Create the inital on screen platforms me.initPlatforms(); //Add the player to the screen me.createPlayer(); //Create the score label me.createScore(); //Add a platform every speedOfTileGenerating seconds me.timer =, me.addPlatform, me); //Enable cursor keys so we can create some controls me.cursors =; }, update: function() { //Make the sprite collide with the ground layer, me.platforms); //region delteMaybe //Make the sprite jump when the up key is pushed // if(me.cursors.up.isDown && me.player.body.wasTouching.down) { // me.player.body.velocity.y = -1400; // } // //Make the player go left // if(me.cursors.left.isDown){ // me.player.body.velocity.x = -150; // } // //Make the player go right // if(me.cursors.right.isDown){ // me.player.body.velocity.x = 150; // } //endregion //Check if the player is touching the bottom if(me.player.body.position.y >= - me.player.body.height){ me.gameOver(); } = somethingWasPressed; me.player.body.velocity.x = 0; if(me.cursors.left.isDown) { animateRunLeft(); } else if(me.cursors.right.isDown) { animateRunRight(); } else { if(facing != 'idle') {'idle'); if(facing == 'left') { me.player.frame = 5; } else { me.player.frame = 5; } facing = 'idle'; } } if(jumpHasToOccur()) { me.player.body.velocity.y = -250;'jump'); * 1.450, function(){'idle');}, this); jumpTimer = + 750; } }, gameOver: function(){'Main'); }, addTile: function(x, y) { //Get a tile that is not currently on screen var tile = me.platforms.getFirstDead(); //Reset it to the specified coordinates tile.reset(x, y); tile.body.velocity.y = velocityOfTileMoving; tile.body.immovable = true; //When the tile leaves the screen, kill it tile.checkWorldBounds = true; tile.outOfBoundsKill = true; }, addPlatform: function(y) { //If no y position is supplied, render it just outside of the screen if(typeof(y) == "undefined"){ y = -me.tileHeight; //Increase the players score me.incrementScore(); } //Work out how many tiles we need to fit across the whole screen var tilesNeeded = Math.ceil( / me.tileWidth); //Add a hole randomly somewhere var hole = Math.floor(Math.random() * (tilesNeeded - 3)) + 1; //Keep creating tiles next to each other until we have an entire row //Don't add tiles where the random hole is for (var i = 0; i < tilesNeeded; i++){ if (i != hole && i != hole + 1){ this.addTile(i * me.tileWidth, y); } } }, initPlatforms: function() { var bottom = - me.tileHeight, top = me.tileHeight; //Keep creating platforms until they reach (near) the top of the screen for(var y = bottom; y > top - me.tileHeight; y = y - me.spacing){ me.addPlatform(y); } }, createPlayer: function() { //Add the player to the game by creating a new sprite me.player =, - (me.spacing * 2 + (3 * me.tileHeight)), 'kisameSprite', 'stance/0.png'); me.player.scale.setTo(sizeOfPlayer); //Set the players anchor point to be in the middle horizontally me.player.anchor.setTo(0.5, 1.0); //Enable physics on the player; //Make the player fall by applying gravity me.player.body.gravity.y = 2000; //Make the player collide with the game boundaries me.player.body.collideWorldBounds = true; //Make the player bounce a little me.player.body.bounce.y = 0.1; me.player.animations.add('attackMagic', Phaser.Animation.generateFrameNames('attackMagic/', 0, 24, '.png', 1), 7, false, true); me.player.animations.add('attack', Phaser.Animation.generateFrameNames('attack/', 0, 5, '.png', 1), 10, false, true); me.player.animations.add('left', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true); me.player.animations.add('idle', Phaser.Animation.generateFrameNames('stance/', 0, 3, '.png', 1), 10, true, true); me.player.animations.add('right', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true); me.player.animations.add('jump', Phaser.Animation.generateFrameNames('jump/', 0, 3, '.png', 1), 10, false, true); }, createScore: function(){ var scoreFont = "100px Arial"; me.scoreLabel =, 100, "0", {font: scoreFont, fill: "#fff"}); me.scoreLabel.anchor.setTo(0.5, 0.5); me.scoreLabel.align = 'center'; }, incrementScore: function(){ me.score += 1; me.scoreLabel.text = me.score; }, }; function animateRunRight() { me.player.body.velocity.x = speedOfPlayerMovingRightLeft; if(facing != 'right') { me.player.scale.setTo(sizeOfPlayer, sizeOfPlayer);'right'); facing = 'right'; } } function animateRunLeft() { me.player.body.velocity.x = -speedOfPlayerMovingRightLeft; if(facing != 'left') { me.player.scale.setTo(-sizeOfPlayer, sizeOfPlayer);'left'); facing = 'left'; } } function jumpHasToOccur() { var jumButtonClicked = me.cursors.up.isDown || spaceBar.isDown; console.log("jumpButtonClicked == " + jumButtonClicked ); var alreadyOnFloor = me.player.body.onFloor() && > jumpTimer; console.log("alreadyOnFloor == " + alreadyOnFloor); return jumButtonClicked && alreadyOnFloor; } function somethingWasPressed(keyCode) { if(keyEqualTo(keyCode, "a")) {animateAttack();} if(keyEqualTo(keyCode, "m")) {animateAttackMagic();} } function keyEqualTo(keyCode, key) { var equalKey = (keyCode.key == key); return equalKey; } function beIdle() {'idle'); if(facing == 'left') { me.player.frame = 5; } else { me.player.frame = 5; } facing = 'idle'; } function animateAttack() {'attack', 10, false, false); me.player.animations.currentAnim.onComplete.add(beIdle,this); } function animateAttackMagic() {'attackMagic', 3, false, false); me.player.animations.currentAnim.onComplete.add(beIdle,this); } I want player to collide with dynamically generated tiles, but it does not happen. The player just falls down after any animation. For example, is I run left or right the player runs, but falls down simultaneously. To make player and tiles collide I use that in update() function:, me.platforms); So, help me, please to figure out what am I doing wrong, why collision between player and tiles does not occur when animation takes plays?