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
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 673 results

  1. Foobar

    I need you.

    Hello, here I created game but I have a problem with a function. When did the party begin to have a message that says "Go!" and I would like it to change when the player reaches 100 points. My last try script that absolutely does not work. function textChange() { updateScore(); if (player.score == 100) { updateText("Good!"); } } Thanks all
  2. Hello there, i would like to use the babylonjs package in my JS project. If I do this with my import statement, everything goes. I then call a function in another file and want to assign a new standard material to the object (I pass scene to the function). But now he tells me "this.getScene is not a function". Can it be because this package is not designed for webpack+js+module? Uncaught (in promise) TypeError: this.getScene is not a function
  3. Hi, so I'm trying make a doodle jump type of a game , so far I've created the infinity world and added 6 ledges. now I want to kill and revive the ledges with the new X and Y coordinates, but somehow can't get it to work. I've managed to kill the ledges as they go out of camera bounds by using (forEachAlive)but got issues with reviving them. I've tried getFisrtDead and reset but nope, cant get it to work. Does anyone know how I could solve this? so this is how I create the platforms: generatePlatforms: function(){ //grouping the platforms platformPool =; platformPool.enableBody = true; var ground = game.add.sprite(0, -32 ,'ground' ); platformPool.add(ground); ground.scale.setTo(3,2); ground.body.immovable = true; for (var i= 0; i < 6; i++){ var randomX =game.rnd.integerInRange(0, -50); var randomY = -100 *i; ledge = game.add.sprite(randomX,randomY,'ground'); platformPool.add(ledge); ledge.scale.setTo(0.3,0.3); ledge.body.immovable =true; } }, and this is how I kill the ledges under the update function: platformPool.forEachAlive(function(el){ var platformYMin = el.y; if(el.inCamera == false){ el.kill(); } },this); Thanks in advance
  4. Thunderfist

    Character sprite not appearing

    I've been working on an action RPG for quite a while now, and I finally got my map to appear. Now I'm having a hard time getting my character sprite to appear. I have no idea what I should do about this. Here's my code: //establish variables var canvasBg = document.getElementById("canvasBg"), ctxBg = canvasBg.getContext("2d"), canvasEntities = document.getElementById("canvasEntities"), ctxEntities = canvasEntities.getContext("2d"), canvasWidth = canvasBg.width, canvasHeight = canvasBg.height, player1 = new Player(), isPlaying = false, obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); player1.src = "img/player.png"; function init() { document.addEventListener("keydown", function(e) {checkKey(e, true);}, false); document.addEventListener("keyup", function(e) {checkKey(e, false);}, false); defineObstacles(); begin(); } function begin() { ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); isPlaying = true; requestAnimFrame(loop); } function update() { clearCtx(ctxEntities); player1.update(); } function draw() { player1.draw(); } function loop() { if (isPlaying) { update(); draw(); requestAnimFrame(loop); } } function clearCtx(ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); } function randomRange(min, max) { return Math.floor(Math.random() * (max + 1 - min)) + min; } function Player() { this.srcX = 0; this.srcY = 600; this.width = 35; this.height = 54; this.drawX = 400; this.drawY = 300; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false; } Player.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.checkDirection(); }; Player.prototype.draw = function () { ctxEntities.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; Player.prototype.checkDirection = function () { var newDrawX = this.drawX, newDrawY = this.drawY, obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; this.srcX = 35; //Facing North } else if (this.isDownKey) { newDrawY += this.speed; this.srcX = 0; //Facing South } else if (this.isRightKey) { newDrawX += this.speed; this.srcX = 105; //Facing East } else if (this.isLeftKey) { newDrawX -= this.speed; this.srcX = 70; //Facing West } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision && !outOfBounds(this, newDrawX, newDrawY)) { this.drawX = newDrawX; this.drawY = newDrawY; } }; Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) { var obstacleCounter = 0, newCenterX = newDrawX + (this.width / 2), newCenterY = newDrawY + (this.height / 2); for (var i = 0; i < obstacles.length; i++) { if (obstacles[i].leftX < newCenterX && newCenterX < obstacles[i].rightX && obstacles[i].topY -20 < newCenterY && newCenterY < obstacles[i].bottomY - 20) { obstacleCounter = 0; } else { obstacleCounter++; } } if (obstacleCounter === obstacles.length) { return false; } else { return true; } }; function Obstacle(x, y, w, h) { this.drawX = x; this.drawY = y; this.width = w; this.height = h; this.leftX = this.drawX; this.rightX = this.drawX + this.width; this.topY = this.drawY; this.bottomY = this.drawY + this.height; } function defineObstacles() { var treeWidth = 65, treeHeight = 90, rockDimensions = 30, bushHeight = 28; obstacles = [new Obstacle(78, 360, treeWidth, treeHeight), new Obstacle(390, 395, treeWidth, treeHeight), new Obstacle(415, 102, treeWidth, treeHeight), new Obstacle(619, 185, treeWidth, treeHeight), new Obstacle(97, 63, rockDimensions, rockDimensions), new Obstacle(296, 379, rockDimensions, rockDimensions), new Obstacle(285, 25, 150, bushHeight), new Obstacle(570, 138, 150, bushHeight), new Obstacle(605, 492, 90, bushHeight)]; } function checkKey(e, value) { var keyID = e.keyCode || e.which; if (keyID === 38) { //up arrow player1.isUpKey = value; e.preventDefault(); } if (keyID === 39) { //right arrow player1.isRightKey = value; e.preventDefault(); } if (keyID === 40) { //down arrow player1.isDownKey = value; e.preventDefault(); } if (keyID === 37) { //left arrow player1.isLeftKey = value; e.preventDefault(); } if (keyID === 32) { //spacebar player1.isSpacebar = value; e.preventDefault(); } }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, treeLineTop = 5, treeLineBottom = 570, treeLineRight = 750, treeLineLeft = 65; return newBottomY > treeLineBottom || newTopY < treeLineTop || newRightX > treeLineRight || newLeftX < treeLineLeft; } Any ideas for what can be done to make the sprite appear?
  5. armstr38

    Help with scoring using animate cc

    This is my code, which changes by frame, I need to do a scoring system, but when I used the following code to add a score it works fine for the first 2 frames then doubles and by the end it's like 229. Thank you for any help. Score; var score = 0; function scoreIt(); { score += 1; } Frame by frame; this.stop(); this.ans1.addEventListener("click", fl_MouseClickHandler.bind(this)); function fl_MouseClickHandler() {; this.rocket1.stop(); this.rocket3.stop(); = true; this.ans2.mouseEnabled = false; this.ans3.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); } this.ans2.addEventListener("click", f2_MouseClickHandler.bind(this)); function f2_MouseClickHandler() {; this.rocket2.stop(); this.rocket3.stop(); = true; this.ans1.mouseEnabled = false; this.ans3.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); scoreIt(); } this.ans3.addEventListener("click", f3_MouseClickHandler.bind(this)); function f3_MouseClickHandler() {; this.rocket2.stop(); this.rocket1.stop(); = true; this.ans2.mouseEnabled = false; this.ans1.mouseEnabled = false; this.ans2.answer2.color = ("#00ff00"); this.ans1.answer1.color = ("#cd0000"); this.ans3.answer3.color = ("#cd0000"); }
  6. DigitalTina

    help with splitting an application

    <script>window.onload = function () { //Application 1: Dog 1 var app_1 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true }); var dog1; document.getElementById('area').appendChild(app_1.view) $(window).resize(function () { app_1.renderer.resize( $(window).width(),$(window).height()); }); // load spine data PIXI.loader .add('dog1', 'assets/animate/dog1_skeleton.json') .load(onAssetsLoaded); app_1.stage.interactive = true; app_1.stage.buttonMode = true; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function scaleScene() { app_1.renderer.resize($("#area").width(), $("#area").height()); var bottom_position_ratio = 50/800; dog1.position.set(app_1.screen.width / 4, app_1.screen.height - bottom_position_ratio*app_1.screen.height); var base_height = 800; var base_scale = .25; var ratio = .25 / 800; dog1.scale.set(ratio*app_1.screen.height); } $(window).resize(function () { scaleScene(); }); function onAssetsLoaded(loader, res) { console.log(res); dog1 = new PIXI.spine.Spine(res.dog1.spineData); // set current skin dog1.skeleton.setSkinByName('dog1_skin'); // set up the mixes! // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2); dog1.stateData.setMix('head_l', 'head_r', 0.4); dog1.stateData.setMix('head_r', 'head_l', 0.4); scaleScene(); // play animation dog1.state.setAnimation(0, 'neutral_breth', true); dog1.state.setAnimation(1, 'tail_fast', true); app_1.stage.addChild(dog1); app_1.stage.on('pointertap', function () { // change current skin console.log('wgt>!'); // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4); // dog1.state.setAnimation(1, 'head_l', .04); // dog1.state.setAnimation(3, 'head_r', fal); var rand = getRandomInt(2); if (rand == 1) { dog1.state.setAnimation(3, 'head_l', false, 0); } else { dog1.state.setAnimation(3, 'head_r', false, 0); } rand = getRandomInt(3); setTimeout(function () { dog1.state.setAnimation(4, 'blink', false, 0); }, getRandomInt(2000)); }); console.log(document.body); } //Application 2: Dog 2 *********************************************** var app_2 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true }); var dog2; document.getElementById('area').appendChild(app_2.view) $(window).resize(function () { app_2.renderer.resize( $(window).width(),$(window).height()); }); // load spine data PIXI.loader .add('dog2', 'assets/animate/dog2_skeleton.json') .load(onAssetsLoaded); app_2.stage.interactive = true; app_2.stage.buttonMode = true; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function scaleScene() { app_2.renderer.resize($("#area").width(), $("#area").height()); var bottom_position_ratio = 50/800; dog2.position.set(app_2.screen.width / 4 + app_2.screen.width / 2 , app_2.screen.height -bottom_position_ratio*app_2.screen.height); var base_height = 800; var base_scale = .25; var ratio = .25 / 800; dog2.scale.set(ratio*app_2.screen.height); } $(window).resize(function () { scaleScene(); }); function onAssetsLoaded(loader, res) { console.log(res); dog2 = new PIXI.spine.Spine(res.dog2.spineData); // set current skin dog2.skeleton.setSkinByName('dog1_skin'); // set up the mixes! // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2); dog2.stateData.setMix('head_l', 'head_r', 0.4); dog2.stateData.setMix('head_r', 'head_l', 0.4); scaleScene(); // play animation dog2.state.setAnimation(0, 'neutral_breth', true); dog2.state.setAnimation(1, 'tail_fast', true); app_2.stage.addChild(dog2); app_2.stage.on('pointertap', function () { // change current skin console.log('wgt>!'); // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4); // dog1.state.setAnimation(1, 'head_l', .04); // dog1.state.setAnimation(3, 'head_r', fal); var rand = getRandomInt(2); if (rand == 1) { dog2.state.setAnimation(3, 'head_l', false, 0); } else if (rand == 2) { dog2.state.setAnimation(3, 'head_r', false, 0); } else { dog2.state.setAnimation(3, 'fun', false, 0); } setTimeout(function () { dog2.state.setAnimation(4, 'blink', false, 0); }, getRandomInt(2000)); }); console.log(document.body); } }</script> I originally had 1 application with 2 dogs animated inside. I now split the application so each dog is separate dog 1 and dog 2. But I did not split it correctly, as the dogs do not appear anymore. What mistakes do you see in this code?
  7. Bladetrick

    DynamicTextures on a Cube

    Hello again! I was playing around with some of the examples (love the playground). In this instance I was looking at a PG that created a ground and applied a dynamic texture to it. For kicks, I changed it to a Cube, but noticed that whatever I drew on the dynamic texture would show up on all 6 sides. Is there a way to make it so that if I draw a star on one side its not duplicated on the others? Thanks for your time
  8. Hey, i have creating android hybrid games. i have babylonJS javascript framework for game. The skybox object textures does not loading properly. other object are loading normally in my game. var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:100.0}, game_scene); skybox.position = new BABYLON.Vector3(0, 0, 0); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", game_scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/hills", game_scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skybox.material = skyboxMaterial;
  9. Hey , If i Multiple objects loaded time the device is hanging. i have using small objects only 3 or 5 mb file objects only. how to solve this type of problem.
  10. Hey everyone, I've just started working with Babylon.js and I have a question. I've got a double array filled with 1 & 0 and I want it tranformed to 3d. 1 being blocks and 0 spaces. I did it this way: var sizeFactor = 0.2; for (var i = 0; i < array.length; i++) { for (var j = 0; j < array[0].length; j++) { if (array[i][j] === 1) { var box = BABYLON.MeshBuilder.CreateBox('box', {height: sizeFactor, width: sizeFactor, depth: sizeFactor}, scene); box.position.x = i * sizeFactor; box.position.y = 0; box.position.z = j * sizeFactor; } } } but its very taxing I believe to the system because of the many boxes. Is there any other less taxing way to achieve this?
  11. This might seem like a ridiculous question, but I was just curious to hear your input on the subject. In brief, I have spent a lot of time learning web development (specifically the front-end). Although, I recently gained interest in creating games with JavaScript frameworks such as Phaser. With that said, is there anything wrong with making simple 2D games for mobile using JavaScript code and something like PhoneGap to get it on mobile stores? Do any of you currently do this? Or should I change my focus to Unity and C#?
  12. I have all sorts of game ideas, but I quickly run into a brick wall since I'm not really an artist. Are there any guides out there for creating simple "programmer art" for games? Even better, are there any website for free game art?
  13. Hello everyone!, I'm stuck with my 2d game.. i'm trying to give certain sprites a on mousehover event(i dont really know if this is possible lel but i am really new with canvas so pleas help me out). does anyone know a better way or the sollution for this??? regards, slyvan25
  14. jamessimo

    In-game loading bar

    Hey guys, I have made a game that needs to parse and render large save files. The issue I have is that whiles the javascript in Phaser is doing its thing all I can do is show a gif spinner in html whiles the player waits for the game to load. I would like to show a progress bar, I have made a global var that basically ticks up at key intervals in the loading process. The problem is is that the number does increment however the UI in phaser does not update as well as the HTML (in html I just made a update tick and read the loadingProgress var every tick) . I have tested this using debug.text, html span and a phaser ext object. My entire game just locks up when processing stuff but I would like a hook that could be independent and update a number at core intervals.
  15. Hey guys! I am kinda new to PIXI so I apologize if there is a super obvious fix to this problem but I am having a super hard time getting display objects I called buttons to show up. Button 1 and the TilingSprite appear just fine but the rest of the buttons do not. I looked at the contents of app.stage in my console and it says the buttons are all in there. Thanks in advance for the help! function playerSelect(){ // var onClick = function(){ new characterSelect()}; var stage = new PIXI.Container(); stage.visible = true // var container = new PIXI.Container(); var button1 = new Button("resources/button-small.png", 323, 162); var player1 = new Button("resources/player-select-buttons/1player-noselect.png", 293, 575); var player2 = new Button("resources/player-select-buttons/2player-noselect.png", 293, 575); var player3 = new Button("resources/player-select-buttons/3player-noselect.png", 293, 575); var player4 = new Button("resources/player-select-buttons/4player-noselect.png", 293, 575); //selected var player1Select = new Button("resources/player-select-buttons/1player-selected.png", 293, 575); var player2Select = new Button("resources/player-select-buttons/2player-selected.png", 293, 575); var player3Select = new Button("resources/player-select-buttons/3player-selected.png", 293, 575); var player4Select = new Button("resources/player-select-buttons/4player-selected.png", 293, 575); button1.position.x = 800; button1.position.y = 900; player1.position.x = 323; player1.position.y = 227; player2.position.x = 653; player2.position.y = 227; player3.position.x = 975; player3.position.y = 227; player4.position.x = 1300; player4.position.y = 227; player1Select.position.x = 323; player1Select.position.y = 227; player2Select.position.x = 653; player2Select.position.y = 227; player3Select.position.x = 975; player3Select.position.y = 227; player4Select.position.x = 1300; player4Select.position.y = 227; button1.on("mousedown", function(){ stage.visible = false; new characterSelect()}); player1.on("mousedown", function(){ stage.addChild(player1Select) }); player2.on("mousedown", function(){ // stage.removeChildren(); stage.addChild(player2Select)}); player3.on("mousedown", function(){ app.stage.addChild(player3Select)}); player4.on("mousedown", function(){ app.stage.addChild(player4Select)}); player1Select.on("mousedown", function(){ console.log("hit")}); app.stage = stage; var renderer = PIXI.autoDetectRenderer( 1920, 1080, {view:document.getElementById("game-canvas")} ); //switch to png PIXI.loader .load(function(){ var b = PIXI.Texture.fromImage("./resources/playerSelection-final.png"); var tilingSprite = new PIXI.extras.TilingSprite(b, 1920, 1080); tilingSprite.alpha=0.5; stage.addChild(tilingSprite); stage.addChild(button1); stage.addChild(player2); stage.addChild(player1); stage.addChild(player3); stage.addChild(player4); renderer.render(stage); }); } function Button(path, width, height) { var texture = PIXI.Texture.fromImage(path);, texture, width, height); this.tilePosition.x = 0; this.tilePosition.y = 0; this.interactive = true; this.buttonMode = true; this.viewportX = 0; } Button.prototype = Object.create(PIXI.extras.TilingSprite.prototype); Button.prototype.setViewportX = function(newViewportX) { var distanceTravelled = newViewportX - this.viewportX; this.viewportX = newViewportX; this.tilePosition.x -= (distanceTravelled * button.DELTA_X); };
  16. game_prince

    multiplayer online card game

    hello i want to make a online multiplayer online card game using phaser. CAn you please help me in this that from where i would start??
  17. Hi, Our company develop simulations of aircraft systems. We are looking for developers that use Phaser Editor, and has knowledge of Typescript or Javascript and Phaser. Also we will provide you our own framework for developing easier and faster. It's a fully freelance job and we will give you only deadline. Payment method is open to negotiation. You can check our examples here:
  18. Outermedia

    Canvas Tilemaps - Javascript Help

    Ello guv'nors! GOOGLE HAS FAILED ME! I got some dumb probably really easy javascript things I'm stuck with and I'm in an endless loop of eh? So I've got the this array 0 = wall = cant move into 1 = path = can move into * white 1 = player start point var gamemap = [ 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, im also abit lost on how to make the character use a nested array two values on each? merge two arrays together? concat? idk... use of north east south west buttons that move the player one array over? on the click of a button CHECK show text saying if can or cant go in direction because wall etc Anyone fancy pointing me towards the right direction? If this makes any sense.
  19. It seems that to send a private message to a player, you are supposed to use I need to emit an image to a specific player so am using this concept, however it doesn't seem to work. Would anyone know how to emit an image to a specific client? Thanks!
  20. Hi! I did a Game Jam recently, our group used the p5 library because someone suggested it to us, and indeed it helped us develop an ok prototype in a short amount of time. The game wasn't perfect at all of course, because 48 hours is still really short, but one of the main flaws that bothered me was the graphic integration; our graphistes liked working with pixel art, and we used a tileset to create the background map, which didn't tile right, with grey line appearing between tiles; on top of that, the other sprites didn't look nice at high resolution either, because of linear filtering. After the Jam ended, I decided to try to fix these. I found the way to activate nearest filter in p5, which made the graphics look way better, but still not as nice as I wanted it to be. After googling a bit, I found this article, which was exactly what I was looking for. Then I noticed... in order to use shaders, I needed to switch the context to WebGL, which meant changing most of the code. This didn't actually bother me, so I started working on it, it was quite a nightmare (because of p5's bugs and lacks of integration...) but when I got to the point where I had basically the same game then before, but switched to a WebGL context (without the shaders), I noticed HUGE performance drops (I'm talking 10 FPS for displaying something 400 sprites in a 500 * 500 context!!!). That's when I decided that I needed to switch to a different library. A little more googling later, I opted for the PIXI library, which, I must agree, is a nice library to work with, even though the official documentation is lacking a bit of informations. I started recoding the game from scratch once again, and as soon as I could draw the map on screen, I tried to implement the pixel art shader; I copy-pasted the code and... Magic! It didn't work. I was actually not that surprised, and decided to play around with the GLSL to see where the problem was. That's when I started noticing strange things: weird texture offsets that I tried to adjust for manually, which didn't work because the offset changed depending on the scaling of the image... and then the texture itself, scaling itself up and down when I scaled the sprite... After a while and thanks to more googling, I found out that Pixi did some pre-processing on both the texture and the texture coordinates which were passed to the fragment shaders. I tried adjusting for it, I tried a lot, I got close, but it's still really messy, and float precision starts doing strange things that makes the textures look even worst then before. That's where I am now. I tried searching for others libraries, but most of them seemed to be either 3D libraries, or probably as weak as p5, so I'm here to ask, is there a good library that I can work with which won't bring me such problems? Or is there something I can do to fix my problem with PIXI? Or should I just resort to using webGL without any additional library (which at this point seems like the best solution to me)?
  21. Hi there! We’re looking for a talented, self-motivated and experienced Full Stack Developer to build games for Africa. About Us: Big5 Games is a Gamification Platform for Africa. We’re on a mission to get Africans playing more games! We’re working on a range of games to entertain and educate utilising the latest technologies and platforms. Core Skills: • Full Stack JavaScript Developer • Solid skill set in Node.js, MongoDB, Angular • Good knowledge of JavaScript, ES6, HTML5, CSS • Knowledge of React • Experience with test frameworks • Ability to apply programming and documentation principles • Able to work remotely with other team members • Good communication skills Bonus Skills: • Experience in HTML5 game development • Knowledge of game engines and services such as: GameMaker, PlayFab, Phaser, Facebook Instant Games • Knowledge of cloud systems such as Heroku and CloudFlare • Familiarity with the Lean Startup and Agile Methodologies About You: Timely and committed - you manage your time well. Quality-driven - you create great work you’re proud of! Fast learner - you’ll learn a lot with us, and we move fast! Team player - you share, discuss, ask for advice, and report on your work on yourself. You’ll work independently, we don’t want to be on your back. Passionate about technology - you are interested in new technologies and experiment with your own projects. We Offer You: Exciting, dynamic and ambitious projects to work on. Flexibility to work remotely where you want and when you want. This is a fully remote role. Join our open, collaborative culture (we want to share our knowledge as well as learn from you!) Develop your entrepreneurial side. Additional opportunities as we grow and learn together. Big5 Games is an equal opportunity employer. We’re excited to work with talented and empathetic people no matter their race, colour, gender, sexual orientation, religion, national origin, physical disability, or age.
  22. I have created a sample map using tiled software. Then tried to load the same u on webpage using phaser.js. But I am not getting the proper result. Is there any mistake in my code or something wrong with library. <!DOCTYPE html> <html> <head> <title>Basic Platformer game</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="js/phaser.min.js"></script> <script src="js/phaser.js"></script> </head> <body> <div id="phaser-game"></div> <script type="text/javascript"> (function() { var game = new Phaser.Game( 800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('map', 'background.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tile2', 'floor2.png'); game.load.image('player','bot2.png'); } var map; var layer; var marker; var player; var currentTile; var cursors; var curser; function create() { game.stage.backgroundColor = '#787878'; game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('floor2','tile2'); currentTile = map.getTile(0, 0); layer = map.createLayer('Tile Layer 1'); player = game.add.sprite(20, 20, 'player'); game.physics.p2.enable(player); player.body.fixedRotation = true; layer.resizeWorld(); marker =; marker.lineStyle(2, 0x000000, 1); marker.drawRect(0, 0, 20, 20); cursors = game.input.keyboard.createCursorKeys();, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); game.physics.arcade.enable(player); </script> </body> </html>
  23. Hello people ! I'm working on a project code in javascript without using any framework and I struggle with keyboard input. I would like to disable window (or document, I don't know the difference) keyboard detection while I'm in game, because the webpage move each time I use arrows keys to move my player. I already try to use getElementByID('myCanvas').onkeydown but it doesn't work at all ! Here a part of my code : /* In a class name Engine() */ document.onkeydown = checkKey; function checkKey(e) { var keysMap = { 37 : [-1,0], 38 : [0,-1], 39 : [1,0], 40 : [0,1], }; if(e.keyCode>=37 && e.keyCode<=40){ player.setSprite(player.spriteDict[e.keyCode]) game.moveTo(keysMap[e.keyCode][0],keysMap[e.keyCode][1]); } else if(e.keyCode == 82){ game.restart(); } else if (e.keyCode == 85){ game.undo(); } current.drawBoard(); } For more, see the project on Github
  24. mla

    (On Disconnect) Last player hangs

    I have a multiplayer game that assigns and displays an avatar for each player that accesses the game. When a player leaves the game, it will drop the image so the avatar is no longer on screen. This works - sort of. Here is the problem: Ex: Three players access the game, three avatars are created. Then one player leaves, that avatar is removed from screen. The other two players leave, and for some reason, the last avatar remains on screen. So the host will always see that last avatar sitting there. I'm using splice to remove the players. I check my array and all players dropped from the array. It shows []. I have no clue how that avatar is still there. Is there a way to completely remove that from the game?
  25. Hi! First post here. I'm currently experimenting with the gamepad API and I'm trying to capture the motion/orientation of my dualshock 3 to build controls for a new game project. I was wondering if anyone had manage such a thing and managed to make it work in the browser? It seems that WebVR makes use of the motion data using the gamepad.pose object and so far I've been unlucky to reach it on a regular controller. Has anyone managed such a thing and could help? Thank you!