Search the Community

Showing results for tags 'javascript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 648 results

  1. hi I need help to fix a bug on mobile for a phaser game. it works on the PC (Browser) but not on mobile browser. thanks
  2. Calling all HTML5 game developers! Here at Goodboy Digital we are looking for developers with a passion for HTML5 game making to come and join a team who really love what they do. If you want to kick out some of the best HTML5 games going with us and help work on cool R&D projects like Pixi.js (and some secret ones too!) then please apply and show us what you got We are looking for all skill ranges from junior to senior. The main thing is that you love making these things! Junior Developer - https://goodboydigital.workable.com/j/5C5E976940 Senior Developer - https://goodboydigital.workable.com/j/30B8771D24 Cheers Mat
  3. SOFTGAMES is looking for an experienced Game Developer - JavaScript / HTML5 who is goal-orientated and a strong team player. Join a team of super experienced people to build great games for Messengers that will entertain tens of millions of people around the world every month. You design, architect, test and implement game features into our live games. Further you'll work on upcoming Messenger Games from the scratch until global release and during post-launch. You will collaborate with producers, game artists and with other HTML5 Game Developers to share learning and best practices. You are passionate, ship robust and high-performance code, and act as a fount of knowledge when it comes to game development. As part of a small, high experienced and dynamic team you will enjoy a creative, challenging and collaborative environment. Your role… Develop HTML5 games for Facebook Messenger to expand our portfolio, with Pixi.js Maintain and optimize game features Write robust code to be used by millions of users Work on schedule, set clear goals Independently create complete solutions from scratch Share knowledge and help colleagues Your profile… Great passion for game programming 3+ years of professional software engineering experience Deep knowledge of: Pixi.js JavaScript / HTML5 As a plus: Phaser, TypeScript, Webpack, Reactjs, Node.js Shipped at least 2 mobile/social title, preferably on multiple platforms Ability to quickly get up to speed with existing code Deliver high-quality and well-structured code Open-minded and keen to learn Check out Cookie Crush on Facebook Messenger. Can you build this game? We offer… A spirited, inspiring, international and enthusiastic team The best and brightest company in producing and distributing Messenger Games The chance to craft games for millions of monthly gamers Valuable insights into global expansion, start-up scene and entrepreneurship Flexible working-hours and flat company hierarchy Inspiring company breakfasts, epic team events Perks: fresh fruits, cold drinks, tee, coffee, discounted local transport ticket, health package, lunch vouchers, maternity leave etc. About SOFTGAMES… Based in Berlin, the creative capital of Europe, SOFTGAMES together with its ROFL brand is the leading developer of games for Facebook Messenger and the developer behind popular titles like Cookie Crush, Solitaire Story, Candy Rain or Fish Story. Further SOFTGAMES is operating the world’s largest platform for HTML5 games distribution and monetization outside the Messengers. We’re delivering fun to tens of millions of players every month across 6 continents on the device of their choosing. Our vision is to help users to instantly discover and engage with games they like, while helping brands to reach their target audiences. Have we caught your interest? Then we look forward to your detailed application here: https://softgames.recruitee.com/o/game-developer-javascript-html5
  4. Hi, I have a nodjs application that is currently saved in Windows 2012 R2 server using IISnode with IIS 8.5. I am getting a 404 File or directory not found error, however nothing is being recorded in the error logs. When I run this locally I have no issues and the game runs well. Thinking it could be a permissions issue, I decided to provide temporary read/write access, however that didn't seem to make a difference. I also confirmed that the links are all correct in terms of where files are sitting. Here is my server side code: var PORT = process.env.PORT || 8080; var express = require('express'); var app = express(); var http = require('http'); var path = require('path'); var util = require("util"); var server = require('http').createServer(app); var compression = require('compression'); //Get required classes xyLocation = require("./xyLocation").xyLocation; app.use(compression()); //Compress all routes app.use('/client', express.static(__dirname + '/client')); app.use('/js', express.static(__dirname + '/js')); app.use('/css', express.static(__dirname + '/css')); app.use('/sounds', express.static(__dirname + '/sounds')); app.use('/images', express.static(__dirname + '/images')); // Routing app.get('/', function(request, response) { response.sendFile(path.join(__dirname, 'index.html')); }); server.listen(PORT); console.log('Starting server on port '+ PORT); var io = require('socket.io')(server,{}); io.sockets.on('connection', function(socket) { ... Thanks MLA
  5. Pankaj Singh

    Html5 Game Developer

    Hi Guys, We have urgent requirement for Html5 Game Developer for Slot Game Technical Skills: • HTML5, createjs and Javascript expertise for Desktop/Mobile games • Canvas- programming (Multi Layer). • WebGL API for 3D graphics and animation. • Mobile events and device orientation. • Performance optimization techniques and run time performance improvements on mobile devices. • Ajax, Websockets & Web Workers, I/O, NodeJS and server-sent events. Kindly share your portfolio link and resume on this email- pankaj.singh@progaindia.com Thanks Pankaj Singh
  6. Hi, I have a Phaser canvas and must connect it to HTML in which it is in. Lets say I have a function var game;window.onload = function() { game = new Phaser.Game(550, 700, Phaser.AUTO, 'phaser_canvas', { preload: preload, create: create }); function phaserFunction(){ // do something }}and I have a function in the HTML container, like a selector <select id="my-selector" onchange="game.phaserFunction()"> <option> anOption</option> <option> anOption</option> </select>and this is not triggering the function inside Phaser code. How can I call the function inside Phaser from outside? I tried using game.functionName() but it doesnt work with selector Thanks!
  7. Nonostante Games

    BIOK - A strategy board game of conquests

    Hi, I'm so happy to introduce you BIOK! BRIEF DESCRIPTION BIOK is pure strategy and intuition. A board game for the ingenious and the acute minds. Lead the creatures on the playing field to capture monsters and all kinds of items. Watch the monsters’ eyes and guide them to their preys. KEY FEATURES - Simple controls and fluid mechanics, super simple to understand and fun to use - 60 levels in many worlds with various maps - 10 creatures with different characteristics and abilities - Bonus and survival mode to solve puzzles and challenges - Special objects and environmental elements - Secondary missions and hidden objectives iOS - AVAILABLE Get BIOK from the Apple App Store ANDROID/WINDOWS - BETA You can access the beta: BETA ACCESS (remember to use your google account) MORE ABOUT BIOK You can read more about on the official BIOK game page. FOLLOW US Send us any commend and advice. Help us to make a better game. Facebook | Twitter | Web
  8. gsknbabu

    Infinite Scroll

    Hi, I want to allow the user to either scroll to document bound borders endlessly i.e Infinitely drag on the canvas. Please help!!! Ex: A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas. Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser. Please refer the link https://gojs.net/latest/samples/scrollModes.html where user can start dragging the rectangle to the boundaries, scrolls automatically towards the mouse pointer. Thanks, Naveen.
  9. I want to make my own web card game, but I'm a starter in the code world, so, I need tips to choose the right JS framework. Please.
  10. ijonatron

    Entity interpolation with Pixi.js

    Hey everyone! Just joined this forum hoping someone could help me out here... I'm working on a test project to try out some of these concepts. I'm currently working on entity interpolation and I think I'm pretty close to it working, but the moving objects still seem jittery. On the back end I'm sending snapshots of player positions every 50ms... // send snapshots setInterval(() => { const snapshot = { timestamp: Date.now(), players }; ws.clients.forEach(client => { client.send(pack('snapshot', snapshot)); }); }, 50); These snapshots are being received on the client like so... const sync = snapshot => { // keep the last 2 snapshots if (snapshots.length === 2) snapshots.shift(); snapshots.push(snapshot); snapshot.players.forEach(player => { let manager = playerManagers.find(mngr => mngr.id === player.id); ... manager.updateRemote(player); }); t = 0; }; The manager here is a class instance associated with each player that controls the sprite's position, rotation, etc. Here is that updateRemote method... updateRemote = player => { this.local = this.remote ? this.remote : player; this.remote = player; } What this does is set the manager's local and remote properties. These are the states that the sprite should interpolate between. Then here is the Pixi.js ticker... let t = 0; ticker.add(() => { t += ticker.deltaTime; let lag = 50; if (snapshots.length >= 2) lag = snapshots[1].timestamp - snapshots[0].timestamp; playerManagers.forEach(manager => manager.interpolate(t / lag)); }); Here I am increasing t by the ticker's deltaTime and dividing that by the time between the two snapshots (or the intended time if there aren't two snapshots available). Remember above that t is reset each time a snapshot is received. This means when a snapshot was just received, t will be 0 and start counting up. When another snapshot is received, t will be at 50 (or whatever the real lag is) then be set back to 0 and repeat. In other words, t / lag will be between 0 and 1 for the lerp function... Here is that interpolate method... interpolate = delta => { this.sprite.position.set( lerp(this.local.pos.x, this.remote.pos.x, delta), lerp(this.local.pos.y, this.remote.pos.y, delta), ); this.sprite.rotation = lerp(this.local.direction, this.remote.direction, delta); } And the lerp function is the second formula here. AFAIK this should give me smooth movement between the past snapshot (local) and the new one (remote), but movement still seems choppy and jittery. I'm fairly new to interpolation, prediction, and other game networking concepts so hopefully someone can help me out here. Please let me know if any more information is needed.
  11. Some time ago I started my own twitch channel where I have been working at 2D space massive multiplayer game development. I try to utilise my roadmap task by task, telling about what I'm doing. I have using javascript, node.js and top-notch technologies such as service workers, websockets, server-side rendering, webgl and famous libraries & frameworks like React, Webpack, Koa. And finally the question, does anybody interested in watching Twitch to improve their skills in gamedev and programming based on real game projects? I'm free to welcome other developers, answer for any technical questions. For me it's basically chance to meet new developers, increase of motivation, extra opportunity to find anyone who can help me in gamedev as well. Thank you!
  12. ItsYaBoiWesley

    CreateJS Noob - Problem with my Sprite class

    Hi! I'm an experienced programmer with C++, but just getting started with JavaScript. I'm making a simple 2D game to get started. I'm using the CreateJS library to do my image/spritesheet manipulation. Right now, I'm trying to create a Sprite class, which will set up a spritesheet in the constructor, and draw the sprite with coordinates in the draw() function. (a member of my Sprite class) Anyways, I'm doing some debugging now. My program stops in the constructor of my Sprite class, and I can't figure out why. To anyone with CreateJS experience, what is wrong with my constructor function?!?!?! Thanks! class Sprite { constructor(src, frameWidth, frameHeight) { window.alert("DEBUG constructor. " + src + ", " + frameWidth + ", " + frameHeight); //Gets here this.spriteSheet = new createjs.SpriteSheet({ images: [queue.getResult(src)], frames: {width: frameWidth, height: frameHeight}, animations: { ani: [0,4] } }); window.alert("DEBUG end constructor"); //Never gets here } draw(x, y) { animation = new createjs.Sprite(this.spriteSheet, "ani"); animation.regX = 99; animation.regY = 58; animation.x = enemyXPos; animation.y = enemyYPos; animation.gotoAndPlay("ani"); stage.addChildAt(animation,1); } }
  13. Hello, I apologize in advance if my English is not perfect, I'm French. I've recently created a 2D brick breaker game from scratch in JavaScript (Typescript) and HTML5 Canvas, named Save the koala. I've created 7 different levels for now, and I would have liked to have some feedback to give me some improvement on this game 🙂 I think I will create multiple worlds, and other levels if the site knows a minimum of traffic. From a general point of view, how do you find this game? You can find my brick breaker game here. The website is in French, so I give you the controls here : - If you have a keyboard press Enter to play, and the arrow keys to move. - If you are on a tactile device, there are 3 buttons on the screen to play, pause and move. Thanks to those who will take the time to test and answer me 🙂
  14. We're creating interactive product experiences with Babylon and need to expand our team. Our two offices are in Gothenburg, Sweden and Warsaw, Poland. If you're close, all the better. This summer we're working on a project for a big tool company and need to beef up our team. We'll begin with a freelance engagement but we're looking for a more stable relationship in the long run. I'm not going to specify what we expect in terms of your skills, except you'll need to know your way around Babylon and be good at TypeScript / JavaScript. If you want to know more, please PM me or mail me at thomas [a] spook [dot] se .
  15. scope2229

    Cant get player to display

    I've been using this post Player.js To try and separate my code but i'm failing to understand really how it works. var Player = new Phaser.Class({ Extends: Phaser.GameObjects.Image, initialize: function Player(scene, x, y){ Phaser.GameObjects.Image.call(this, scene); this.speed = 160; }, create: function(){ player = this.physics.add.sprite(32, config.height - 150, "ship"); player.setCollideWorldBounds(true); cursors = this.input.keyboard.createCursorKeys(); }, update: function(){ player.setVelocity(0,0); if (cursors.left.isDown){ player.setVelocityX(-this.speed); } else if (cursors.right.isDown){ player.setVelocityX(160); } else{ player.setVelocityX(0); } if (cursors.up.isDown){ player.setVelocityY(-150); } else if (cursors.down.isDown){ player.setVelocityY(+150); } } }); then i call the player in lvl1.js var lvl1State = new Phaser.Class({ Extends: Phaser.Scene, initialize: function lvl1(){ Phaser.Scene.call(this, {key:"lvl1"}); }, create: function(){ this.starfield = this.add.tileSprite(400,300,800,4000, 'starfield'); this.juststars = this.add.tileSprite(400,300,800,4000, 'juststars'); this.nebula1 = this.add.tileSprite(400,300,800,4000, 'nebula1'); this.stars2 = this.add.tileSprite(400,300,800,4000, 'juststars'); this.nebula2 = this.add.tileSprite(400,300,2000,4000, 'nebula2'); this.createStarfield(); //add player this.player = new Player(this.game, 0, 0); this.game.add.existing(this.player); },//end of create update: function(){ this.starfieldEffects(); },//end of update //-------GLOBAL FUNCTIONS-----// createStarfield: function(){ this.starfield = this.add.tileSprite(400,300,800,4000, 'starfield'); this.juststars = this.add.tileSprite(400,300,800,4000, 'juststars'); this.nebula1 = this.add.tileSprite(400,300,800,4000, 'nebula1'); this.stars2 = this.add.tileSprite(400,300,800,4000, 'juststars'); this.nebula2 = this.add.tileSprite(400,300,2000,4000, 'nebula2'); }, starfieldEffects: function(){ this.starfield.y += 0.5; this.juststars.y += 0.2; this.stars2.y += 3.8; this.nebula1.y += 0.8; this.nebula2.y += 0.3; this.nebula2.x -= 0.1; } });//end of var //ADD GAME TO SCENES Space_Game.scenes.push(lvl1State); but nothing on the page shows up. I managed to get rid of all the errors at first but then still nothing happened. Im at a loss as to how i use separate classes. i have 10 lvls so far and the player with the bullets is repeated over and over. id rather remove and learn how to separate than to just continue on how i have been with rewriting or copy paste all the repeated code then add new code for the level.
  16. Hi, I'm working on creating interactive buttons which, when clicked, will set the colour of the player. I've managed to do this successfully, in Phaser 3, but the code is quite bulky and ugly looking. I've just been gathering what examples I can through the website, but I'm certain there must be a better way to do this. Here's what I've got: I think what I want to do is create a class for "smalltiles", but I'm not sure how the inheritance should work for using alongside Phaser 3. I've tried writing something like in several different ways, without success: Does anybody have any insight as to how I might be able to do this better? Thanks for the input in advance.
  17. ArcadixInfotech

    box2d collision filtering with phaser

    Hello, Can anybody please tell me how box2d collision filtering works in JavaScript(box2dweb). I need balls to collide with player but not with other balls. There are example out there but they are in c++ or other language. I am newbie in gaming hence a silly question. Thanks.
  18. About MGN Studios: MGN Studios is the new game development division of Freedom! Family Limited. Our mission is to create great games and technologies that actively engage and involve the YouTube community of players, bloggers, reviewers and creators. We’re setting up shop right here in beautiful Vancouver! If you want to join a start-up where you get to work remotely and build something new, and be a part of an honest & transparent leadership team with a veteran Studio Head, then MGN Studios is for you! THE ROLE: Are you up for the challenge? We are currently seeking a Senior Game Engine Developer to join our team in leading the architecture and development of browser-based video game engine technology. You will be the driving force in the design and development of our studio’s game engine infrastructure. You should be comfortable diving deep into technical architectures and requirements, able to quickly identify solutions to challenges discovered during development, and ready to direct and mentor other developers in creating a robust and scalable code base. Prior experience building browser-based multiplayer game technology is preferred. We are looking for someone to be a key participant in the creation of a collaborative environment that leverages agile development and rapid prototyping; rewards creative solutions and intelligent risk taking; fosters a culture of excellence, respect, and fun; and makes great games. RESPONSIBILITIES: Are you ready to make a contribution to our team? Lead the design, implementation, and growth of a browser-based HTML5 multiplayer game engine. Manage and mentor a team of software developers through the interactive development process. Set company-wide code development standards and best practices. Work with game designers and artists in the development of game features, art pipelines, and tools. Partner with producers, PMs, and other leads on schedules and plans. Identify technical and production issues/risks and propose solutions. QUALIFICATIONS: Do you have what it takes? Degree in Computer Science and/or relevant professional experience. 5+ years experience in professional software development. 3+ years of experience in the development of game engines. Very good knowledge of existing game engines (e.g. Unity, GameMaker, Phaser, Pixi, Turbulenz, etc.) and server side technologies. Deep knowledge of modular programming, API design, and game architectural patterns. Extensive experience with frontend and backend technologies such as HTML5, Javascript, CSS/CSS3, jQuery, PHP, Python, Node.js, MySQL, etc. Source revision control experience (Github preferred). Professional experience in agile software development. Experience working effectively in cross-functional game teams. Excellent oral and written English communication skills. Experience developing MMO city builder games is a PLUS Experience developing casual MMO .io games is a PLUS Experience with Apache Ant, iOS WebKit, Android Webkit / Chrome is a PLUS Knowledge of video platforms including YouTube, Dailymotion and Twitch is PLUS COMPENSATION: Competitive Salary Flexible work hours Flexible work locations (home, office, etc.) Are you intrigued? Here are a few more reasons to make MGN Studios your daytime/anytime home: Work remotely - Did we already mention you get to work remotely? Yes, it’s true! Leadership - Do you like working with veteran Studio Head who will give you clear direction, honesty and guidance, and believes people are the pillars to success. He’s the opposite of an evil villian with a curly moustache. Build something new - Play a role in building a game development studio that can’t stop and won’t stop growing. Career growth - Make an impact by leading projects and driving the direction of the studio. Develop initiatives and solutions that drive your career and boost the studio’s growth. For Freedom! Does this sound like you? Please apply asap as we are interviewing immediately for this permanent, full time position. PM and we can arrange a time to speak over the phone!
  19. Hey everyone, I want to add different buttons with 2 different clickevents. If I add one button it works, if I add another one it doesn't. The Images and sounds are in my Preloader file and i tested them, so they work and aren't the problem. Any Solutions? Thank you! Game.Level0_5 = function(){}; var frido; var back; Game.Level0_5.prototype = { create:function(game){ back = this.add.sprite(game.world.centerX, game.world.centerY, 'hauptkirche'); back.scale.setTo(1.335,1); back.anchor.setTo(0.75, 0.5); frido = this.add.sprite(game.world.centerX, game.world.centerY, 'frido2'); frido.scale.setTo(0.5,0.5); frido.anchor.setTo(2.0, 0.67); this.createButton(game, " Das ist die Hauptkirche.\n \n Die Hauptkirche wurde 1085 erbaut.\n Bis zur Reformation war sie katholisch \n und wurde danach \n im Jahr 1560 evangelisch. \n Im Dreißigjährigen Krieg (1618-1648) \n wurde die Kirche zerstört \n und musste neu gebaut werden. \n \n Frage: \n Wann wurde die Hauptkirche zerstört? ", game.world.centerX +266, game.world.centerY + 155, 268, 900.0,); var button = game.add.button( game.world.centerX+265, game.world.centerY+45, 'aki', function() { this.game.sound.play('correctanswer'); this.state.start('Level1'); }, this, 0, 1, 2, 3); button.anchor.x = .5; button.anchor.y = .5; button.input.useHandCursor = true; }, var btn = game.add.button( game.world.centerX+200, game.world.centerY+60, 'bki', function() { this.game.sound.play('correctanswer'); this.state.start('Level1'); }, this, 0, 1, 2, 3); btn.anchor.x = .5; btn.anchor.y = .5; btn.input.useHandCursor = true; }, update: function(){ }, createButton:function(game, string, x, y, w, h, callback) { var button1 = game.add.button(x, y, 'button1', callback, this, 2, 1, 0); button1.anchor.setTo(0.5, 0.6); button1.width = w; button1.height = h; var txt = game.add.text(button1.x, button1.y, string, { font: 'bold 14px palatino linotype', fill: '#0000000', align:'center', wordWrap: true, wordWrapWidth: 600 }); txt.anchor.setTo(0.5, 1.5); } };
  20. mla

    Images disappearing

    My game is build for 6 players. Each player loads the game in a browser is assigned a unique room that displays a personal card and is represented by an avatar. The game works well, the images all load, however for some reason as more players access the game, some images may disappear. The player is actually still logged into the game and can even play the game, however their avatar image may have disappeared or their personal card may have disappeared. There is no consistency to which image may vanish and it doesn't always happen, but in most cases it does. Would anyone know why this may be? Thanks!
  21. Hello, I'm fairly new to development with Phaser (TypeScript). I've made a simple login screen in HTML, and I'm trying to make the "Log In" button which is in the external HTML call a function in my Phaser game. This is the button that will call the function: <button onclick="login()">Log In</button> Where in my project should I write the function "login", and how can I call it when I click the button? Any help would be greatly appreciated. 😃 I'm using this as a base for my project (I purchased his book): https://github.com/code0wl/Multiplayer-Phaser-game
  22. Hi, I'm creating a node js game, using javascript and socket io. I originally was not going to add a mongo DB, but now I'm thinking I should for anyone who may accidentally be disconnected from the game. What would the best game option be? To use a database or not, and the reasons behind it. Many thanks, MLA
  23. Thunderfist

    making collectibles in canvas game

    I've gotten most of my game done, but I still have to make at least something that the player can do other that walk around the map and bump into things. I decided to add coins to collect, but I just have one problem: I've never added collectibles to a game before. Please help. I need to get this done in before next Friday. EDIT: I tried coding, but a coin wouldn't spawn anywhere other than the upper left corner. I tried setting its draw setting to this.randomRange, so it would spawn randomly on the map. Here's the 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, cash = new collectibles(), obstacles = [], //animation requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }, imgSprite = new Image(); imgPlayer = new Image(); imgMoney = new Image(); imgSprite.src = "img/testroomImage.png"; imgSprite.addEventListener("load", init, false); imgPlayer.src = "img/temp.png"; imgPlayer.addEventListener("load", init, false); imgMoney.src = "img/coin.png"; imgMoney.addEventListener("load", init, false); 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(); cash.update(); } function draw() { player1.draw(); cash.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 = 48; this.srcY = 1; this.width = 31; //how wide the sprite is in pixels this.height = 35; //how tall the sprite is in pixels this.drawX = 125; this.drawY = 50; this.moveX = 31; this.moveY = 35; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); this.speed = .60; 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(imgPlayer, 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,//draw specific specific points on x and y coordinates //newMoveX = this.moveX, //newMoveY = this.moveY; obstacleCollision = false; if (this.isUpKey) { newDrawY -= this.speed; //newMoveY -= this.speed; //this.moveY -= 35; this.srcX = 48; //Facing North this.srcY = 72; } else if (this.isDownKey) { newDrawY += this.speed; //newMoveY += this.speed; //this.moveY += 35; this.srcX = 48; //Facing South this.srcY = 1; } else if (this.isRightKey) { newDrawX += this.speed; //newMoveX += this.speed; //this.moveX += 31; this.srcX = 48; //Facing East this.srcY = 36; } else if (this.isLeftKey) { newDrawX -= this.speed; //newMoveX -= this.speed; //this.moveX -= 31; this.srcX = 48; //Facing West this.srcY = 108; } obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY); if (!obstacleCollision) { 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 tEdgeWidth = 512, tEdgeHeight = 10; var bEdgeWidth = 512, bEdgeHeight = 10; var rEdgeWidth = 1, rEdgeHeight = 512; var lEdgeWidth = 1, lEdgeHeight = 512; var bigFenceLeftSideWidth = 20, bigFenceLeftSideHeight = 304; var bigFenceRightSideWidth = 22, bigFenceRightSideHeight = 304; var bigFenceUpperLeftWidth = 160, bigFenceUpperLeftHeight = 30, bigFenceUpperRightWidth = 140, bigFenceUpperRightHeight = 30; var bigFenceLowerLeftWidth = 100, bigFenceLowerLeftHeight = 20, bigFenceLowerRightWidth = 195, bigFenceLowerRightHeight = 20; var smallFenceSideWidth = 4, smallFenceSideHeight = 80; var rockWidth = 34, rockHeight = 32; var smallInclineWidth = 89, smallInclineHeight = 42; var largeInclineRWidth = 153, largeInclineRHeight = 55; var largeInclineLWidth = 176, largeInclineLHeight = 58; var leftHoleWidth = 64, leftHoleHeight = 48; var rightHoleLongWidth = 113, rightHoleLongHeight = 48; var rightHoleTallWidth = 43, rightHoleTallHeight = 99; obstacles = [new Obstacle(10, 25, tEdgeWidth, tEdgeHeight), new Obstacle(10, 512, bEdgeWidth, bEdgeHeight), new Obstacle(499, 1, rEdgeWidth, rEdgeHeight), new Obstacle(14, 1, lEdgeWidth, lEdgeHeight), new Obstacle(2, 229, bigFenceLeftSideWidth, bigFenceLeftSideHeight), new Obstacle(320, 229, bigFenceRightSideWidth, bigFenceRightSideHeight), new Obstacle(10, 212, bigFenceUpperLeftWidth, bigFenceUpperLeftHeight), new Obstacle(200, 212, bigFenceUpperRightWidth, bigFenceUpperRightHeight), new Obstacle(15, 499, bigFenceLowerLeftWidth, bigFenceLowerLeftHeight), new Obstacle(144, 499, bigFenceLowerRightWidth, bigFenceLowerRightHeight), new Obstacle(90, 403, rockWidth, rockHeight), new Obstacle(184, 291, smallInclineWidth, smallInclineHeight), new Obstacle(15, 165, leftHoleWidth, leftHoleHeight), new Obstacle(258, 165, rightHoleLongWidth, rightHoleLongHeight), new Obstacle(335, 162, rightHoleTallWidth, rightHoleTallHeight), new Obstacle(97, 170, rockWidth, rockHeight), new Obstacle(73, 195, rockWidth, rockHeight), new Obstacle(0, 115, largeInclineLWidth, largeInclineLHeight), new Obstacle(192, 115, largeInclineRWidth, largeInclineRHeight), new Obstacle(120, 175, rockWidth, rockHeight), new Obstacle(215, 170, rockWidth, rockHeight), new Obstacle(233, 187, rockWidth, rockHeight), ]; } 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 collectibles () { this.srcX = 0; this.srcY = 0; this.width = 20; //how wide the sprite is in pixels this.height = 20; //how tall the sprite is in pixels this.drawX = randomRange; this.drawY = randomRange; this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); } collectibles.prototype.update = function () { this.centerX = this.drawX + (this.width / 2); this.centerY = this.drawY + (this.height / 2); }; collectibles.prototype.draw = function () { ctxEntities.drawImage(imgMoney, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); }; function outOfBounds(a, x, y) { var newBottomY = y + a.height, newTopY = y, newRightX = x + a.width, newLeftX = x, edgeTop = 512, edgeBottom = 0, edgeRight = 512, edgeLeft = 0; return newBottomY > edgeBottom || newTopY < edgeTop || newRightX > edgeRight || newLeftX < edgeLeft; } What's wrong with it? just editing it in the slightest made the coin disappear when I refreshed the page.
  24. I have Class constructor that require options parameter, that parameter is plainobject {}, also it has 0 or more arrays inside and another plainobjects. I create a lot of instances of this Class and these are succesfully pooled already. But I am wondering what to do with this options param like this one: { type: "type", ..., bodies: [ { type: "type" ..., }, ... ], ... } Sometimes options param is hardcoded, sometimes algorithm gets it by net connection in arraybuffer to recreate {} & []; What is worth pooling mechanism in javascript? For sure complex objects with a lot of properties and inner objects. What about these little guys then? {} & [] Is it worth to pool empty plain objects and arrays? With releasing it to pool you would remove all properties in {} and setting length to 0 in array.
  25. Job posting: Studio FOW Position: Senior Game Software Developer We are looking for a game senior game software developer who can deliver web based, HTML5 game applications. The role includes overseeing the full development life cycle including identifying the correct technology, architecting the application, security, testing and deploying. This is not a project management role, you will be solely responsible for implementation. The candidate must have a proven track record in developing web based game applications using WebGL and JavaScript. We expect the developer to be able to deliver a modular, scalable and testable application. You will also be working to integrate existing pre-rendered video content into the game which forms an integral part of the player experience. Experience in enterprise grade applications would be necessary so the design could address high availability requirements (i.e. load balancing and clustering). Experience in WebSockets and relational databases such as MySQL, PostgreSQL or MS SQL are required. Experience in ECMAScript, NodeJS and node-webkit would be a plus. Knowledge of other programming languages (Python, C++) is also a plus. Please note that this game will be of the adult (18+) variety and therefore anyone uncomfortable with such content need not apply. A portfolio and references will be required during the interview process.