Search the Community

Showing results for tags 'html5'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 977 results

  1. I create a container and I add some sprites on this container, then it is very bad. This is my main code: Ground.prototype.createCGround = function (count, x, y) { var front = PIXI.Sprite.fromFrame('Tile_10.png'), blank = PIXI.Sprite.fromFrame('Tile_13.png'); var container = new PIXI.Container(); container.addChild(front); container.addChild(blank); front.position.set(0, 0); var count = count || 1; for (var i = 0; i < count; i++) { var span = PIXI.Sprite.fromFrame('Tile_11.png'); container.addChild(span); span.position.set(front.width + i * span.width, 0); } blank.position.set(front.width + i * span.width, 0); container.position.set(x, y); container.isUes = false; return container; } It have some black lines in the border !!!!!!! And the black lines are random , not all !!!! Who can help me ! I'm very need help!!! Thank you!
  2. Hello everyone ! I made a memory game called Click&Match using . It is a cordova based html5 app developed using Intel XDK. This is my very first game. You can download it on Play Store here Please be sure to rate and review if you do download.
  3. phaser

    Hi all, Please try out my very first game created with Phaser: Follow My Lead. INSTRUCTIONS: - Pay attention to the button sequence - Now repeat the button sequence to go to the next level - Try to complete the stage to unlock the next one! The last stage is unlimited and works the same way as a Simon game. You can try it here on newgrounds: I also converted it into an Android app with Cordova (any Cordova users here?) You can try it out here: Any feedback or advise is appreciated! Walking Fort
  4. Portals & Galaxies - Save your beloved planet by forbidding the aliens from stealing the polonium, enjoy a game where luck is the only hope in Portals&Galaxies ! Storyline - When humans found out that there is a stolen polonium on the moon stolen by the aliens, the aliens been investing this polonium in order to create a massive power to control the planet earth but with the power of our human soldier we can save our beloved planet by forbidding them from using that element against us . How To Play - The polonium is at the end of the electrified stages that you move on, each electrified stage has its own power that moves you, you can activate the stage by pressing on the stage button at the bottom of the page, Step in portals in order to teleport to higher level and beware of galaxies that teleport you to lower level . Little Game Twist - Land exactly on the polonium ! if the power of the electrified stage is too high your vehicle bounces back due to the nature of polonium power, the polonium absorbs the power of the stage and push you back with the exceeded power. for example, if you’re on stage 99 and the power was 4 your vehicle moves on the polonium then bounce back to 99, 98, 97 (one, two and three moves) if there’s a portal or galaxy at stage 97 your level raise or fall depending on it. Game Link - More Informations - Screenshots [Attachment]
  5. beat em up

    Hey, guys. I'm a web developer intern at an important company. To enter they asked me to make a game prototype on html5. I thought it was weird because I was from a small town and I was like the "prodigious child" at college. I thought I was the first one on making a video game on html. I thought i was the best until I was proven wrong. Well, I've been learning, making a lot of games of my own on this platform. Lately I've been working on this beat 'em up, and all my co-workers say this is awesome. But lately I've been wondering if HTML5-based games were actually video games (existencial question to me). Anyways, here's a screenshot of my game so far.
  6. Play Link: Squares Vs Circles Game Circles don't like Squares, because Squares have edges... Welcome to this fun mobile Puzzle Game You tap Squares to toggle their position: defensive or vulnerable. Toggle smart to survive against the incoming Circles. There are different Square types that require different strategies: - Normal Square - Lazy Square - Coward Square This is my first Puzzle game. If you guys like it, I will add more levels Have fun! Play Link: Squares Vs Circles Game
  7. Hello everyone, Recently i finished my first medium-sized HTML5 game - Medieval Defense Z. I came from flash background and developing for HTML5 presented with some new challenges. So i would like to share what worked and what didn't. This is more like review/tutorial type of thing, so hopefully someone will find something useful. • Goals: • 60fps. • Smooth gameplay and animations. • Quality comparable to flash games. • Tools: • Language: Haxe. Strictly typed programming language, similar to ActionScript 3.0. Compiles to all major languages, including javascript. • Editing: HaxeDevelop IDE. Freeware, great code completion and very fast compared to everything i tried. • Debugging: Chrome. Has console, debugger and profiler. • Rendering library: Pixi.js. Uses display list concept like flash. Works well. • Sound library: Howler. Good enough, the id system is a bit weird though. • Bitmap font exporter: Free and web-based. • Sprite Sheet Packer: Freeware and very simple. • Graphics: • Scaling will look ugly if you use many small png files for textures. • If you want nice scaling, fast load times and fast rendering - pack everything to 2048x2048 spritesheets (include bitmap fonts too). • Resolution of assets: 1024x768, background can extend to 1382x768, so it covers most aspect ratios in horizontal orientation. • To get proper native resolution in mobile browsers i scaled up renderer and scaled down canvas by window.devicePixelRatio. • Sounds: • Library: Howler. • Sound formats: ogg for Chrome and Firefox, m4a for Safari and Internet Explorer (note: mp3 has licensing issues with play count). • ffmpeg: because of licensing issues and whatnot can't convert to m4a, unless you recompile ffmpeg with m4a, which is a pain to setup. • I used MediaHuman Audio Converter (freeware) to convert from wav to ogg and m4a (64 bit). • iOS Safari: keep in mind that before any sound could be played, user must first tap on the screen. • Mouse Events: • Used pixi.js API to open links. • iOS Safari: under "touchstart" event won't open links in new tabs, use "tap" event instead. • sprite.on("mousedown", callback) for desktop. • sprite.on("tap", callback) for mobile. • Performance: • Reuse frequently used sprites. • Avoid creating too many objects every frame. • I would recommend looking up data-oriented programming to get more juice out of Javascript. • Record timeline with Chrome profiler to find performance bottlenecks. • Masks are slow. Use trim if you only need a simple cut. • Very large functions may cause lag spikes. My best guess is that browser is trying to optimize the function. Splitting big function into several smaller ones solved my problem. • Game Debugging: • Simple CSS + DOM side menu. • Basic field view/edit. • Simple buttons with callbacks. • How to debug html5 game on android (mobile) with desktop chrome (PC): 1. Upload game to your website. 2. Go to (desktop) chrome: chrome://inspect 3. Connect Android device with USB and run your game on android chrome (your android device must be enabled for development). 4. Open Command Prompt and enter: adb devices (must have Android Debug Bridge installed). 5. To quit debugging enter: adb kill-server • Conclusions: • Programming in Haxe instead of pure Javascript probably saved hours and hours of debugging. • Would have liked more automated solution for spritesheet and sound stuff. • Poor performance bites sooner or later, so be prepared to do extensive profiling. • Stable 60fps is very hard to achieve, even if you keep your code below 1-2ms per frame. • Overall i am happy with the results, however it took longer than expected to make this game. Any feedback is appreciated. Game Link: Trailer:
  8. Fasten your seat belt. And unleash your imagination. Build with pixijs and pixi-haxe and nape physics. It's friday! Share your level in the comments!
  9. Hi. We're working on a few HTML5 games. Maze Runners is absolutely a work in progress but I'm hoping to quickly improve it and get it sort of to beta by Saturday. It requires at least two players to test. Instructions: (Desktop only) Clicking play will put you in the lobby and a game will start if there's another player. Clicking the blue box on the Maze Runners panel will bring up an invite url to link to someone you want to test with. Thoughts and comments welcome! BIT ARCADE PS: Pretty much nothing else on the site works yet (pool etc are mostly dead links)
  10. Description: "Spaceroids" is addictive arcade game which depends on Timing, Anticipation, and Luck. Use your hand to launch the space rocket to explore the solar system and travel between planets on the "Endless" mode, or control your spaceship and test your skill on the challenging set of levels! Details: App Name: Spaceroids Price: Free Developer: Qalamar Release Date: 8 July 2017 Platforms: Android, Web (HTML5) Press/Business Contact: [email protected]:Screenshots: Features: • Addictive Gameplay & Simple Controls • Unique Levels & Endless Mode • Neat Theme & Breathtaking Visual Effects • Achievements & Leaderboards • Player States & Dynamic UI • 3 Supported Languages: English,Arabic and French Links:Google Play: Website: Trailer:
  11. Hi my friends I got a lot Flash to html5 converter ... The number of games that are healthy and have no problem working for more than a thousand ... I also can not find the same set html5 (course notes are available in flash format) The package will appear only at your disposal and will not be sold to any other website and you'll own them If you want to buy this set you send us your price offer. For example:
  12. Hi All!, I want to introduce my first game in html5 (Phaser), and, as you can see, I love to start with one of the most difficult of all the games!. First a picture of the game: And off course, a link to play it: As you can see the game is RPG like, and have the following features: · Multiplayer game (all the players in the same map for now!), · You can chat with other players (press enter, type message and then enter again), · Level up as you kill monsters, · Items drop with different attributes (more than 20 items types), · 5 types of monster that appears as you level up, · 6 spells. The game is yet in alpha, we are showing a concept of how it will looks like when it is finished J. The objective right now is to kill the cosmic monster, it is this one (it appears when you are lvl 5): To kill him, you will need really good items!, so try to equip as good as you can or engaged him with some other friends!. I would like to thanks the two persons that help me do this game: · Leonardo: That make the tiles for the game and the side bar! (and help me to test it a lot!), · Julian: That make all the draws, specially the cosmic monster and the principal character!. We are a team of people that love to play games, and love more to make them. What we use to make this game? All of this: · Phaser C.E 2.7.5 (so great framework!!). · Node.js for the server. · Server and Client write in Typescript (much better than plane javascript, it help a lot to debug the game). · Some pictures and sounds were taken from · JS Signals by Miller Medeiros for the server. · TileMap to do the map of the game. If you like the game please give us some feedback and ideas to continue the development of the game!. Hope you enjoy it!.
  13. 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
  14. This game is now open source: Title: BeFive Smart Ball Platforms: Browser with WebGL enabled. Game Link: Instruction Card: Description: This is a 3D video game version of an old game machines based on pinball. Press start button to dispense balls. Click on the white button and hold until the button turns to green. If you release the button when the green light is on, a ball is launched. Please try using SPACE BAR to shoot balls which is easier than using mouse button. When your balls fall in any of those holes, you are rewarded with a certain number of balls. Game tips: Exchange a number of balls at a time, then keep on shooting as fast as possible to increase your chance of winning balls. Keyboard shortcuts. SPACE BAR: shoot a ball. P: Payout. S: Start. F: Full screen. C: Reset camera position. T: toggle control panel. Additional notes: This game uses Oimo.js (for physics engine) and Three.js (3D rendering). This is my 4th html5 game to publish and is the first I made in 3d. Please feel free to leave feedbacks. Thank you in advance for checking the game out.
  15. Hi guys, i want to show us a very nice and modern website that helps the developers to share their games (demo or full). It's . If you upload your game it will be playable automatically online (like kongregate) and the staff helps you to share it (on facebook, youtube, etc.). It was a website about only downloadable games, but now it's also for HTML5 Games. It's linked with several communities about Rpg Maker that with the last version ( rpg maker MV) left the possibility to share rpg games in html5. So... try it and share your games p.s. you can share also your demo and then replace it. Because you can edit your page (or delete it) in every moment Bye
  16. Noob here, I'm trying to get an update function to call inside a separate JS file. I have a basic phaser structure in load.js: var myGame = {}; myGame.load = function (game) { }; myGame.load.prototype = { preload: function() { //.. }, create: function(){ //... } }; myGame.update = function(game) { }; myGame.load.prototype = { update: update }; And the update function I'm trying to add and call in update.js update = function() { game.physics.arcade.collide(blue_player, platforms); console.log("update is working"); }; load.js is loaded before update.js in my HTML Thanks a lot for reading
  17. Hi, I am noob, and this is a nooby question. I've looked everywhere for a fix, but I can't get my ground to show, I'm not sure if it's even there. My code: (updated to show all my code so far) <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>hello phaser!</title> <script src=""></script> <script src="phaser.js"></script> <link rel="stylesheet" href="game.css"> </head> <body> <script type="text/javascript"> window.onload = function() { var width = $( document ).width(); var height = $( document ).height(); var game = new Phaser.Game(width, height, Phaser.AUTO, '', { preload: preload, create: create }); function preload () { //800 336 game.load.spritesheet("background" , "backgroundgif1.png", 800, 336); game.load.image("ground","red.png"); game.load.spritesheet("blue_player", "player_sprites/playertwo standing.png", 96, 96); } function create () { game.physics.startSystem(Phaser.Physics.ARCADE); platforms =; platforms = game.add.physicsGroup(); platforms.enableBody = true; var ground = platforms.create(400, 450, 'ground'); platforms.setAll('body.immovable', true); ground.scale.setTo(2, 2); var background = game.add.sprite(0, 0, 'background'); background.animations.add("background", [0,1,2,3,4,5,6,7,8], 10, true);"background"); background.width = game.width; background.height = game.height; blue_player = game.add.sprite(-10, -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('left', [0, 1, 2], 2, true);"left"); } function update() { game.physics.arcade.collide(blue_player, platforms); } }; </script> </body> <script src="update.js"></script> </html> Any ideas as to what I'm doing wrong?
  18. 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 =; 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"); background.width = game.width; background.height = game.height;; //used this to place background behind platforms var ground = platforms.create(0, - 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, -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);"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.
  19. Hi, As the title states, I wanted to hear from developers who make HTML5 games and how much they earn from their work. I am aware of html5 devs like @True Valhalla & @devMidgard who provide monthly income reports which have been really enlightening, but the pragmatic part of my brain says there are always exceptions, for every rich dev like @True Valhalla there are thousands struggling to make ends meet and have 2nd jobs to get by. I am using GameMaker and in the middle of working on a HTML5 mobile game that I really like the look of and hope to me able to take to game portals and really get my name and brand out there, with the eventual long term goal of making a living writing HTML5 games but I suppose I need to know if such a dream is feasible if you work hard enough or is it more that I've missed the boat and even if I made 10 good quality HTML5 games it's unlikely to be enough sustain myself long term. Thanks
  20. Hi. Is it possible to use phone as controller to steer my HTML5 application in the web? Should I use And may I write my android's application in Android Studio - without use phaser? I want to do something like airconsole or justdance Please help.
  21. I've toyed with JavaScript based HTML5 game development for a while. It's pretty cool, but I always found myself yearning for a game library I fell in love with at one point, and that was pygame. But you can't write/run python in the browser you say... au contraire my little one, there is Brython ( which is a Python 3 interpreter in JavaScript that integrates with JavaScript! So I was poking around the internet and found this neat game engine in JavaScript called GameJS ( which is, remarkably, like pygame. An idea started brewing. What if I wrote a python Pygame wrapper that translated into GameJS functionality that ran in the browser? Then I could run python in the browser, import pygame, and run MOST of pygame in the browser as well! So that's what I did! It's in rough draft, this is the first draft, and I had to modify some libraries to do it (which is documented on my github account). It's not bullet proof or heavily tested, but it works (at least I got it to work on my nodewebkit installation). Here's a more detailed journey of my thoughts and motivations for this library: The github repository is here: I thought this might be of interest to you HTML5 guys cause it uses HTML5 and the browser in the end, you just get to Pythonize it up! Fun! Anyways, I hope you guys find this useful in any way, even for a kick, Asher P.S. I can use all the encouragement I can get, being a self-taught programmer, so there's two links that you can help me if you like what I've done here to continue development: and my patreon at Anyways! HAPPY PYGAMING!
  22. 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.
  23. Hi, I made a very simple game based on President Trump's handshake habits. The game uses Phaser and the P2 Physics system, mainly revolute constraints to create arm joints. The game is played by simply clicking on two buttons. The 'grip' button increases the strength of a pull, and the 'pull' button pulls the connected arms to the right. You win the game by keeping the handshake on the right hand side of the screen. The game can be found at
  24. It's been a long time since I was able to finish a project of my own, but here it finally is: Tap Racer! Tap Racer is a mobile optimized game that combines rogue-lite elements with a racing game. While your car drives automatically you need to tap the arrow-buttons to switch lanes and find the fastest route as well as avoid obstacles. There are 10 race tracks from around the world and while they all have a unique layout they also have a different surface composition of: asphalt, sand, and dirt. You can preview each track, tune your car in the garage and then give it your best shot! Tuning your car correctly is crucial so you have the right suspension, wheels and body that give you the most advantage in the upcoming track's surface composition. Win 10 races in a row and you win the game on your chosen difficulty. But don't worry if you lose: you get to keep everything that you have unlocked to get an advantage on your next try! This is where the rogue-lite characteristic of the game comes into place. Controls: – Tap arrow buttons to switch lanes (if on a computer, you can use your keyboard's arrow keys) – Car drives automatically Features: – Rogue-Lite elements – Tune your car in the garage – Unlock new cars and hard difficulty Game Link: Play Tap Racer
  25. Hi, My new game PirateRiddle is available for licensing for both exclusive or non-exclusive licenses. Technical details Programming language: haxe/openFL Release target: html5(js)desktop & mobile, Android, iOs, Desktop (Windows, Linux,Mac) Multilingual: English, German, Spanish.... Possibility to easy extend localisation via XML Levels/categories: extendable via XML You can play it here: If you're interested please contact me here or directly on [email protected] Regards Dfabrik team