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
    • 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 546 results

  1. Phaser CE v2.8.0 | WebGL I have a game with lots of enemies, and each enemy needs to shoot out blood particles when attacked. My problem is, my world size is much larger than the size of the emitter bitmapdata that ParticleStorm creates. I tried making it larger, but that caused extreme lag. Then I tried making an emitter for each enemy, and moving the x/y coordinates of the emitter's display to the enemy's location: this also caused heavy lag after just 2 or 3 emitters were created. Any ideas on what I can do to have enemies emit particles across a large map (1920x1920)?
  2. Noob here, Having a hard time with making game states to work - I've been following tutorials and still no luck. I'm really looking for an overview of what I have so far on states, more so than an error fix (witch is loadState is not defined in index.html line 23) HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>game v1</title> <script src="phaser.js"></script> <script src="jquery-3.2.1.js"></script> <script src="loadState.js"></script> <script src="update.js"></script> <link rel="stylesheet" href="css/game.css"> </head> <body> <div class="gameDiv"></div> </body> <script type="text/javascript"> (function() { var width = window.innerWidth; var height = window.innerHeight; var game = new Phaser.Game(width, height, Phaser.AUTO, 'gameDiv'); game.state.add("loadState",loadState); game.state.add("updateState",updateState); game.state.start("loadState"); })(); </script> </html> loadState.js: var loadState = { preload: function() { game.load.spritesheet("background" , "assets/backgroundgif2.png", 800, 336); game.load.image("ground","assets/red.png"); game.load.spritesheet("blue_player", "assets/player_sprites/playertwo standing.png", 96, 96); }, create: function(){ game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; game.physics.startSystem(Phaser.Physics.ARCADE); platforms = game.add.group(); platforms = game.add.physicsGroup(); var background = game.add.sprite(0, 0, 'background'); background.animations.add("background", [0,1,2,3,4,5,6,7,8], 10, true); background.animations.play("background"); background.width = game.width; background.height = game.height; game.world.sendToBack(background); //used this to place background behind platforms var ground = platforms.create(0, game.world.height - 64, 'ground'); platforms.enableBody = true; platforms.setAll('body.immovable', true); ground.scale.setTo(2, 2); ground.alpha = 0; //used this to make the ground transparent blue_player = game.add.sprite(-10, game.world.height -490, 'blue_player'); game.physics.arcade.enable(blue_player); blue_player.body.bounce.y = 0.2; blue_player.body.gravity.y = 300; blue_player.body.collideWorldBounds = true; blue_player.animations.add('idle', [0, 1, 2], 2, true); blue_player.animations.play("idle"); game.state.start("updateState"); } }; and updateState.js: I have also had var updateState error as undefined, witch does not happen in the tutorials I've used. Though this does not happen now with the code you see here. console.log("update is working"); var updateState = { update: function() { game.physics.arcade.collide(blue_player, platforms); } }; Thanks for reading, hope you can set me straight.
  3. What am I doing wrong here. Normal movement is fine, but when boost is applied, there is rubber banding at the end. I'm using client/server model to implement movement. pseudo code: Client sends inputs to server Client process inputs and displays locally Server receives inputs and calculates where client should be Server emit client coordinates Client receives update and applies coordinates Client reapply all inputs made after the last server update Player class: https://github.com/GodsVictory/SuperOnRoad/blob/wip/public/js/player.js Server code: https://github.com/GodsVictory/SuperOnRoad/blob/wip/server.js
  4. I have this idea for creating a character customization system. The system would be implemented as follows. 1) Organize a base template sprite sheet with character components arranged in a composition for future compositing. Example: Lets assume a full body template for a characters design is 125 by 125 consisting of head, body, and leg components. The head component of the character would use 25 pixels and would be isolated on separate parts of the sprite sheet that occupies the respective pixels while the rest of the 100/125 pixels are blank. The same would be done for the body and leg components. 2) Bind the components together via some sort of linked list or maybe even graph based implementation. I'm still learning about graphs and am thinking they're best for this system given compositing more complex sprite sheets will involve layers. Any advised implementations or any kind of information on graphs associated with player creation systems is highly appreciated. I think this is a great opportunity to practice graphs. 3) Next there will be an interface that allows the player to choose the color and textures of each of these components. The player will confirm and submit their design when finished. Now that the player has submitted their design, I'm a bit puzzled about the next step and have a few ideas on composing the data. 4a) Use Phaser api to turn the data into bitmaps? I don't know much about this implementation yet since I'm still learning how to utilize bitmaps and how Phaser handles bitmaps 4b) Composite the items on a canvas and store it in a uri using the canvas to url method. I also lack experience with api but I definitely can see how it would work. 5) Ideally I'll save the data to a database and retrieve them via player credentials. I'm not sure if I'm over complicating things or not so any feedback would be appreciated. I use Phaser but any html5 based idea or solution should be fine.
  5. How would I create multiple levels. For example, after I hit a checkpoint, the game will load a new level? This is the code I currently have, it just loads a few blocks(level 1). boxes = game.add.group(); boxes.enableBody = true; var blocks = boxes.create(300, game.world.height - 125, 'block2'); blocks.body.immovable = true; blocks = boxes.create(400, game.world.height - 125, 'block2'); blocks.body.immovable = true; blocks = boxes.create(400, game.world.height - 150, 'block2'); blocks.body.immovable = true; blocks = boxes.create(625, game.world.height - 125, 'block2'); blocks.body.immovable = true; blocks = boxes.create(650, game.world.height - 150, 'block2'); blocks.body.immovable = true; blocks = boxes.create(650, game.world.height - 125, 'block2'); blocks.body.immovable = true;
  6. Hi All, I am a JavaScript developer with more than 7+ years of experience on HTML5 game development, i can work on game development for multiple platforms. I can work on projects with limited timeline and budget, available for both part time and full time. Regards, Gideon
  7. javascript

    I'm trying to make a quiz that sends you to a different page based on your answers, and I was wondering if it's possible to use conditionals to decide which page you'll be sent to. Is it?
  8. I just wanted to bring this article to your eyes: https://blog.sucuri.net/2015/03/why-a-free-obfuscator-is-not-always-free.html Resume of the linked article: some online obfuscators may add spamming code to your obfuscated javascript. Also, I am currently giving Google Closure Compiler ( https://developers.google.com/closure/compiler/ ) a try in advanced mode, if anybody wants to add some cool tips, thanks.
  9. Hi all I'm trying to make an animation play when i hit a button so far I've tried using an onclick attribute on the button tag but it didn't work and nothing on the forums looks like it would help. I'm trying to make it a bit like jigspace if that helps. }); project.js
  10. I'm trying to move a canvas object towards a onmousedown position, which gets sent from a user to the server. But my problem is the following: The object on the canvas is only moving a little step towards the delivered position. There must be a problem which could be caused by the dest calculation. Youtube video which shows my problem: https://www.youtube.com/watch?v=XxB1dNsuY38 A jsfiddle with a working example: http://jsfiddle.net/loktar/5d02ooaf/ Code which sends the position from the user to the server and which draws each user on the canvas: <script type="text/javascript"> var ctx = document.getElementById("ctx").getContext("2d"); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight - 142; var socket = io(); socket.on('newPositions', function(data) { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillStyle = "rgb(255,0,0)"; ctx.beginPath(); for(var i = 0; i < data.length; i++){ ctx.arc(data[i].x, data[i].y, 10, 0, Math.PI * 2); } ctx.closePath(); ctx.fill(); }); document.onmousedown = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY - ctx.canvas.offsetTop, state: true}); } document.onmouseup = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY - ctx.canvas.offsetTop, state: false}); } </script> Part of the app.js code which contains the current position update code var serv = require('http').Server(app); var SOCKET_LIST = []; var PLAYER_LIST = []; var Player = function(id, x, y){ var self = { x: 100, y: 100, id: id, number: "" + Math.floor(10 * Math.random()), mouseMovement: false, maxSpd: 5, radius: 10 } self.updatePosition = function(x, y) { if(self.mouseMovement){ // Problem movement var targetX = x; var targetY = y; var tx = targetX - self.x; var ty = targetY - self.y; var dist = Math.sqrt(tx * tx + ty * ty); var velX = (tx / dist) * self.maxSpd; var velY = (ty / dist) * self.maxSpd; if (dist > self.radius / 2) { self.x += velX; self.y += velY; } // Problem movement end } } return self; } var io = require('socket.io')(serv, {}); io.sockets.on('connection', function(socket){ console.log('socket connection'); socket.id = Math.random(); SOCKET_LIST[socket.id] = socket; var player = Player(socket.id); PLAYER_LIST[socket.id] = player; socket.on('disconnect', function(){ delete SOCKET_LIST[socket.id]; delete PLAYER_LIST[socket.id]; }); socket.on('positionUpdate', function(data){ player.mouseMovement = data.state; player.updatePosition(data.x, data.y); }); }); setInterval(function(){ var pack = []; for(var i in PLAYER_LIST){ var player = PLAYER_LIST[i]; player.updatePosition(); pack.push({ x:player.x, y:player.y, number:player.number }); } for(var i in SOCKET_LIST){ var socket = SOCKET_LIST[i]; socket.emit('newPositions', pack); } }, 1000/30); Explaination: The following code sends the target position to the server: document.onmousedown = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY -ctx.canvas.offsetTop, state: true}); } Then the following code will be triggered: socket.on('positionUpdate', function(data){ player.mouseMovement = data.state; player.updatePosition(data.x, data.y); }); Which will set the player.mouseMovement to true and delivers the targeted x and y cordinates to the player.updatePosition function: self.updatePosition = function(x, y) { if(self.mouseMovement){ // Problem movement var targetX = x; var targetY = y; var tx = targetX - self.x; var ty = targetY - self.y; var dist = Math.sqrt(tx * tx + ty * ty); var velX = (tx / dist) * self.maxSpd; var velY = (ty / dist) * self.maxSpd; if (dist > self.radius / 2) { self.x += velX; self.y += velY; } // Problem movement end } } I would appreciate any kind of help or suggestions.
  11. Not sure if anyone is interesting on this. I am currently trying to develop a new way to reasonably *protect* full Javascript code, and just out of curiosity: can you actually rip this? [ https://imersiva.com/security_test ] Probably an easy task for some people, who knows, rippers get very creative some times. I am not worrying about the WebGL shader code for now, but just the Javascript part. Are you able to rip that program completely and run it on your own machine or anywhere else? Thanks. =)
  12. Hey , i'm very new to Phaser, and i'm trying to create a game that display road and two bicycle race each other... Can any one tell me how to start please?
  13. Hi, You want to learn basics game development with a simple game. Go to Developper jeux video Please tell me what you think about that. You can contact me, i answer any questions in english or french. It's in french language but some posts are in english. Thanks in advance.
  14. This is more of a generic JavaScript question than a Phaser question, still I ask here because Phaser users must have best practices for this situation, probably better than generic JavaScript programmers would tell. To my dismay, I found out that my LD38 game doesn't work with Internet Explorer (gosh, I hate that browser, I always have to make special adjustments for IE compatibility – even if my game works great with every other browsers in existence, it will surely break somehow with IE). So what apparently causes the problem for IE now is something as simple and straightforward like the following class declarations: class Entity extends Phaser.Sprite { constructor(x, y, sprite) { super(game, x, y, sprite); this.anchor.setTo(.5,.5); } enablePhysics() { game.physics.arcade.enable(this); this.body.bounce.y = 0.2; this.body.bounce.x = 0.2; this.body.collideWorldBounds = true; } } class Player extends Entity { constructor(x, y, sprite) { super(x, y, sprite); this.lastmovetime = 0; } } class Gem extends Entity { constructor(x, y) { super(x, y, 'gem'); this.lastInteraction = 0; this.isActivated = false; } enablePhysics() { super.enablePhysics(); this.body.bounce.y = 0.75; this.body.bounce.x = 0.75; } activate() { this.isActivated = true; this.loadTexture('gem_active'); } deactivate() { this.isActivated = false; this.loadTexture('gem'); } } Google tells me that IE doesn't support this kind of class declaration, as it somehow needs to find a way to deviate from common sense. But then how am I supposed to declare classes? Is there a neat way that works with IE and other browsers as well? (Or maybe I should just show a warning that IE is not supported?) Any help or suggestion is appreciated.
  15. Hi All, I have 5 Html5 games developed using Phaser. kindly Suggest me some of the methods to make money using it, can i publish in webs or package it for IOS and Android. kindly help me
  16. Hi All, I'm a JavaScript developer with goods hands on experience on game development. I need artists to develop games for IOS ,Android and web. if any one intrested do Pm me.
  17. This is my first html5 game made with javascript. Usually I make games in flash, but lack of flash support across browsers forced to me learn new language. The hardest part was dealing with the fact that canvas turns everything into one big picture making object tracking that much more difficult. Needless to say I am extremely proud of the game even though it's short and simple, especially compared to some great stuff posted here. I made two games using the same code but just inserting different pictures into it. The game is size responsive and available on mobile as well since it's just javascript. It's not supported however by old browser versions such ie8 for example. Feedback will be greatly appreciated. First game - Messy House http://getlostgames.com/games/html5/hidden/messyhouse/index.htm Second game - Office Chaos http://getlostgames.com/games/html5/hidden/officechaos/index.htm
  18. Hello! I am new in Webgl programming, and I am having trubel with moving the camera. I try to create a maze game, and I use three.js and box2D.js. The problem is that the camera is looking from above into the mazze, while I am trying to make it part of the maze (I mean looking like you are trying to escape from the maze). Could anyone, please, help me? I haven't found any ideeas on the web....
  19. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render }); function preload() { game.load.image('fon1', 'images/fon1.png', ); game.load.spritesheet('friends', 'images/friends.png', 153,82); game.load.spritesheet('public', 'images/public.png', 153,82); game.load.spritesheet('osebe', 'images/o sebe.png', 153,82); } function create() { //фон game.add.sprite(0,0,'fon1'); //кнопки buttonfriends = game.add.button(20,55,'friends',actionOnClickfriends,this,0,0,0); buttonpublic = game.add.button(340,55,'public',actionOnClickpublic,this,0,0,0); buttonosebe = game.add.button(560,55,'osebe',actionOnClickOsebe,this,0,0,0); } function actionOnClickfriends(){ } function actionOnClickpublic(){ } function actionOnClickOsebe(){ //here the code } function render(){ }
  20. We would love to hear from any interested Game Developers to join our young studio. We are creating exciting games and offer huge opportunities for driven, experienced developers who want to work in an autonomous, creative, collaborative environment. Our culture is very unique - check out our careers page to get a feel for who we are : www.casumocareers.com Or check out our "Javascript Developer with a passion for Games" vacancy to see if you might have the skills for this particular role: http://www.casumocareers.com/games-developer/ We can consider remote workers as well, or candidates outside the EU who wish to relocate to Malta or Barcelona. Feel free to drop me an email for more information: [email protected] High Five from the Unicorn Center!
  21. Hi guys, I want to share my game project that I have created in 2013. It was developed for 2 months but unable to finish it due to some unavoidable circumstances. Introducing Infinite Gears! https://github.com/alectora/infinite-gears Infinite Gears is an open-world, survival, 2D space-shooting, bullet-hell game (Whew!). As a Player, you can select a spaceship and start wandering through planets and destroy enemy motherships who are taking over those planets, while also fighting against some small enemies along the way. Each spaceship has its own power. One that focuses on pure power, one that focuses on single-target, and one that can protect itself from enemy attacks. As the Player saved a planet, Player can start buying upgrades so the ship gets stronger. The upgrade cost scraps you got from defeating an enemy. The scraps are then converted into GEARS to buy upgrades from the shop. There is an Overdrive (O.D.) bar that is generated by killing enemies. If this is triggered, it will grant you maximum power of that spaceship for a limited time. The enemies also get stronger as you go further away from where you start. This is indicated by the map on bottom right. There are sectors that are determined as levels to indicate that there will be more enemies and stronger enemy motherships. You must eliminate them as much as you can, and see how far you can go! The game should work on desktop browser at least IE9, Chrome, Firefox, and Opera. How to Play Clone or download this project, extract, and go to the project folder. Inside the ./bin folder, run the index.html. Use ASWD to move the spaceship. Use LMB (Left Mouse Button) to shoot. Use Space bar to throw off the bomb. Attack target is based on the mouse cursor. Last Note The game project was developed by Annobox (me and the illustrator) around June - July 2013 (2 months) for a competition and was still in development, but is no longer continued since then. This project is open to use for everyone, but for more detailed on the copyright notice, please visit the link and read the README.md file. The development is discontinued until now, so there won't be any fix. JavaScript has changed so long since this project and I have my latest code been changed a lot since then, especially after ES6 gets global. So I hope you enjoy the game and the source code! Link to the Game https://github.com/alectora/infinite-gears
  22. Hey everyone, Sorry for that rookie question. I'm trying to develop this 1vs1 RPG multiplayer game and have a hard time implementing player matchmaking mechanism. For testing purposes, I'm creating a player when the client connects to the server. // Client side: const socket = io(); socket.on('connect', () => { socket.emit('create player', data => console.log(data)) }) // Server side: let players = []; const playerFactory = () => { return { state: 'idle', // idle, searching, fightInProgress lvl: getRandomArbitrary(1, 10), // Get random number from 1 - 10 winRatio: getRandomArbitrary(0, 100) } }; io.on('connection', socket => { socket.on('create player', fn => { console.log('Player created'); const player = playerFactory(name); player.id = socket.id; players.push(player); //returning acknowledgement to client fn(player); }) }) Assuming there is a 'Find opponent' button. How do I watch and match players with 'searching' statuses and appropriate levels? Also, how would I match players by their win/loss ratio? Any information or code examples, libraries or frameworks would help a lot. Thank you in advance!
  23. Hi everyone, I just finished this little project that I call Room Walkers. You can play it here: https://room-walkers.firebaseapp.com/ 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.
  24. 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 (www.digilocker.co.uk - 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 http://www.enea.sk/blog/preloading-web-font-pixi.js.html). 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!
  25. I keep getting this Error: 'Phaser was used before it was defined' from running this Code: Please see attached all code and errors