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
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 696 results

  1. Hi I have an image like the picture below. I need to resize this image.(between x2 and x10) When I resized with Canvas's own features, I couldn't get the image I wanted. The image was pixelated. I used OpenCV's javascript library for this. (To be able to do interpolation) But here I did not get the exact result I wanted and it was slow in speed(40 - 60 ms). The resizing speed should be between about 10 - 20 ms. Then I wanted to write an algorithm myself, but I could not prevent pixelation, and the image I wanted was not revealed. In fact, if I can make gradient for each pixel according to the pixels around it (right, left, down and up), I think I can get the image I want. Is there anyone who can help me with this?
  2. Hi all and good day! 13 days ago started with new project and would like to share some stuff with you It's not completely from scratch, but took some base from my prev game DatTank []. How it looked 13 days ago How it looks today [melee attacking sys example] Would like to know if it would be interesting for somebody to read through some details in some articles or thms like this. Uh, and would be awesome to get some feedback Thx for your attention! ps: If you want to get quick updates from me follow on
  3. I am trying to develop a simple Canvas game, but I'm currently stuck at making the enemies display itself. Heres the code I'm using : <script type="text/javascript"> // SETUP INICIAL var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var innerWidth = 360, innerHeight = 620; canvas.width = innerWidth; canvas.height = innerHeight; // VARIAVEIS var score = 0, lastTime = 0; // TECLAS DE MOVIMENTAÇÃO window.onkeydown = pressionaTecla; function pressionaTecla(tecla){ if(tecla.keyCode == 38) { player.y = player.y - 10; } if(tecla.keyCode == 40) { player.y = player.y + 10; } if(tecla.keyCode == 39) { player.x = player.x + 10; } if(tecla.keyCode == 37) { player.x = player.x - 10; } } // PERSONALIZAÇÃO DO PLAYER var player = { }, player_width = 100, player_height = 105, player_img = new Image(); player_img.src = 'images/spaceship.png'; // OBJETO DO PLAYER player = { width : player_width, height: player_height, x : innerWidth/2 - player_width/2, // centralizar y: innerHeight - (player_height+10), //deixar em baixo power : 10, draw: function(){ // FUNÇÃO QUE BLOQUEIA O OBJETO PLAYER SAIR DO CANVAS if(this.x <= 0 ){ this.x = 0; }else if (this.x >= (innerWidth - this.width)) { this.x = (innerWidth - this.width); } if(this.y <= 0 ){ this.y = 0; }else if (this.y >= (innerHeight - this.height)) { this.y = (innerHeight - this.height); } ctx.drawImage(player_img, this.x, this.y, this.width, this.height); } }; // FUNDO DE GALAXIA *codigo fonte do fundo retirado do site var stars = [], // Array that contains the stars FPS = 60, // Frames per second x = canvas.width; // Number of stars for (var i = 0; i < x; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random(), vx: Math.floor(Math.random() * 10) - 5, vy: Math.floor(Math.random() * 10) - 5 }); } function updatefundo() { for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; s.x += s.vx / FPS; s.y += s.vy / FPS; if (s.x < 0 || s.x > canvas.width) s.x = -s.x; if (s.y < 0 || s.y > canvas.height) s.y = -s.y; } } function drawfundo() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI); ctx.fill(); } } // PERSONALIZAÇÃO DO INIMIGO var enemyArray = [], enemyIndex = 0, enemy_width = 35, enemy_height = 43, enemy_timer = 1000, enemy_img = new Image (); enemy_img.src = 'images/spaceship.png'; // OBJETO DO INIMIGO function enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation){ this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.img = enemy_img; this.width = enemy_width; this.height = enemy_height; this.rotation = rotation; enemyIndex++; enemyArray[enemyIndex] = this; = enemyIndex; ctx.drawImage(this.img, this.x, this.y, this.width, this.height); this.update = function(){ this.y+= this.dy; this.x+= this.dx; this.draw(); } this.delete = function(){ delete enemyArray[]; } this.draw = function(){ ctx.drawImage(this.img, this.x, this.y, this.width, this.height); } } // FUNÇÃO DE CRIAR INIMIGOS function create_enemy(){ var x = Math.random() * (innerWidth - enemy_width); var y = -enemy_height; var dx = 3; var dy = 3; var rotation = Math.random(); new enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation); } // LOOPING DA ANIMAÇAO (MAINFRAME DO GAME) function gameLoop(currentTime){ requestAnimationFrame(gameLoop); ctx.clearRect (0,0, canvas.width, canvas.height); drawfundo(); updatefundo(); // SCORE ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('PONTOS: '+score , 15, 30); // ENERGIA ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('ENERGIA '+player.power , innerWidth-110, 30); // JOGADOR player.draw(); if(currentTime >= lastTime + enemy_timer){ lastTime = currentTime; create_enemy(); } create_enemy(); } gameLoop(); </script> Everything is working fine except the enemies not showing. Already checked the images folder and it's all set up like I've puted in the code. Dev tools console does not show any errors. Enemie lines are " // PERSONALIZAÇÃO DO INIMIGO " and "// OBJETO DO INIMIGO" Please help!
  4. Hello guys, I found one of my old projects on the computer and decide to remake it and share it with you. It's a simple 2D game, made in HTML5. Enjoy it.
  5. Hi, I wanted to make a game that's really challenging and simple at the same time. Something that will require some skills and not just a simple mindless game that shows a lot of ads. Something that you will need to get used to first, learn the rhythm of the game and then be able to complete the levels. So after 5 months (only working on the weekends; not all weekends), I have finally released a playable version of the game in the Google Play Store. Let me know what you think. I would really appreciate some feedback and what you think about the game. It's not much, but hey, I'm actually proud of it Oh and one more thing, it really does require "some" skills. Play Store Link:
  6. What physics engines are available for Javascript and/or Typescript? I've searched myself but maybe there's one or two I missed. I also found a post in these forums but that's over two years old now; It's a little disappointing to see that some of them aren't actively developed and lacking a lot of features. I put together a test to compare the different engines I tried - I've attached the files if anyone wants to try it out. Here are the engines I've tried: PhysicsJs - Incomplete: lacking simple features like constraints - Seems like it was last updated 2 years ago - Possibly the worst performance - Strange API (in my opinion) and difficult to use - Built in mouse interaction behaves strangely MatterJs - Also incomplete and lacking constraints - Has a built in mouse constraint but it acts strangely - Updated recently - Simple and easy to use - Doesn't handle stress test well p2.js - Complete - Updated within the last few months - Doesn't handle stress test well - Easy to use - Good documentation Box2DWeb - Complete - everything you would expect from Box2D - Last updated one or two years ago - Semi-poor documentation - you have use the box2d flash documentation which is fairly thorough but slightly outdated - Much faster and a lot more accurate than the above three libraries. Nape - Complete - lots of features - but isn't very active - Has a great marching squares utility which can convert bitmaps into polygons - Good site and documentation - Easy to use but the pooling get/dispose stuff can be a bit confusing - Similar (or maybe even slight better) performance to Box2DWeb and possibly more accurate - Large - minified it's still 1.7MB The one problem with Nape though is that it isn't really meant for Javascript and I had a lot of trouble getting it set up in Typescript. There were some project to convert it to js and generate definition files but I had to modify them a lot to get something complete that worked for me. I also had to manually convert the debug draw classes from as3 to js and Easeljs. Luckily that only needs to be done once - after that I didn't have any problems using it though. I also tried PhysicsType2D ( but couldn't get it to work. Overall I was a bit disappointed; In terms of performance, the 'native' js libraries fell short by a lot compared to the two ported ones, and on top of that they lacked a lot of important features. Even the ported ones didn't perform as well as their Flash/As3 versions - the Nape stress test (you can find it here) which I copied, runs significantly better in flash. UPDATE: You can find the updated github repo here:
  7. I am trying to make a game so I tried to load a tileset, to help me make the game, but when I try to play my game, this shows on the console- ```Cannot read property 'addTilesetImage' of undefined``` This is my code: ``` Ball.Level1 = function (game) {}; Ball.Level1.prototype = { create: function () { var map; var layer;'element-h');'element-w'); ='map', 32, 32); this.layer =; this.layer.resizeWorld(); } }; ``` this is what I pre-load! ``` this.load.image('element-w', 'img/element-w.png'); this.load.image('element-h', 'img/element-h.png'); this.load.tilemap('map', 'img/Teste.csv'); ``` Thank for your help!
  8. Hello, hope you'll are doing fine. I'm a beginner programmer and recently I've been working on a 2d physics game engine in JavaScript. Everything seemed to be working fine until I have come across an annoying bug in my push mechanic. I have created a 2d collision system where object A will be pushed away b object B, etc. In addition, I have created a push mechanic meaning, object A can push object b (if it’s not solid). However, I have come upon a problem where e.g. object A (Player), object B (box which the player can push) and object C (Solid wall), he problem occurs when object a pushes object b against object, what happens is object B gets pushed away by object A, but object A doesn’t get pushed away by B meaning, object A will get inside of object B and it will push the object to the top instead of pushing it to the left by activating the wrong collision detection. (as seen in the video). Video which shows the problem: (Project files below) I've been trying to solve this problem for awhile now and I just can't find the perfect solution. If anyone would be able to help it'd be great. Thank you
  9. I have water shader script which was developed using Three.js and I want to convert shader as Babylon.js Who can help me, Please let me know water-material.js
  10. 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??
  11. Hi everyone, I have a picture that I draw pixel by pixel on the canvas. Size of the image: 512 * 256. When I make this picture 1536 * 768, the image looks very bad. I think I can use interpolation to fix this. But I couldn't find a good javascript library. It didn't work in the libraries I found. Is there anyone who can help me with this?
  12. If you search for how to detect mobile devices by JavaScript you will find confusing information such as looking for the string "Mobi" in the browser identifier, and other unreliable stuff. In the past people checked screen size but that no longer works because some mobile devices have huge numbers of pixels. Even the usually reliable Mozilla Developer Network pages are contradictory on trying to detect touch screens. They have an article from 2011 which says to check whether the global window object has a property called ontouchstart (except that for Internet Explorer look at navigator.msMaxTouchPoints) but a recently updated (2019) page about TouchEvent (link below) says ontouchstart is still only an experimental proposal, not in the official specification of TouchEvent. So we cannot rely on browsers using it. I came to realise that in searching for "how to detect mobile" I was really asking the wrong question (as are many others). What really matters for my programs is whether the user has a keyboard (and if not, perhaps check for mouse or touch screen). As HTML5/JavaScript programmers (what this site is about) we do not have access to the internal system of the device we are running on, to check its hardware, so how can we do this? Here is my scheme. If a keyboard event occurs we know there is a keyboard. Similarly a mouse or touch event will confirm that the user has other capabilities. So in the constructor of the main program object do the following. this.keyable = false; // Until proven otherwise this.mouseable = false; this.touchable = false; var canvas = document.getElementById ("canvasId"); // Or whatever the id is canvas.addEventListener ("keydown", handleKeydown, false); canvas.addEventListener ("mousedown", handleMousedown, false); canvas.addEventListener ("touchstart", handleTouchstart, false); Then if any of those handlers is ever invoked you can set the corresponding boolean to true. For example (if we assume the global program object is called main): function handleKeydown (ev) { if (!main.keyable) { main.keyable = true; // There is a keyboard main.adjustScreenLayout (); // As necessary } // ... Go on to handle the key supplied in ev } Note that we do not want to adjust the layout every time an event comes in, only when the boolean first changes state. There is a potential problem though. If the user of a mobile device manages to invoke the onscreen keyboard it will generate keyboard events, fooling us. Our HTML5 game will not normally provide any way for the user to do this because we do not have access to the system level. However, if our HTML includes text input fields they would spoil things, so there must not be any such fields in the page. I think there is no way to find out whether key events come from a real or virtual keyboard. I have verified that my Surface Book only fires touch events from the screen, not from the touch pad. The latter fires mouse events. So detecting touch events does seem to indicate a touch screen and maybe that is all I need. If I detect a touch event I will assume that touch is what the user wants to use, regardless of whether there is a physical keyboard, and I should present the appropriate user interface layout. See also (and linked pages) That page shows that InternetExplorer and Safari (desktop) have no support for TouchEvent. That does not break my proposal above. It says that Safari on mobile does fully support TouchEvent.
  13. I want to share a small PDF booklet with JavaScript coding challenges: These coding challenges are designed for beginners and intended to offer the foundation that they may need when developing mini-games on or any other platform.
  14. Hello guys, I'm Hipreme(aka MrcSnm). I have some experience developping some games, and over the time I developed these games I found some need of having a tool that would generate enum for acessing my resources via intellisense. This tools is Licensed on LGPL 3 In every game I developed, at some time, I wrote some code for storing in variables the path for my resources or some easier access. By thinking in this problem, I created one tool that is meant to help every game developer in any language by dynamically updating these resource enumerators when you drag'n drop in your folder a new resource. This tool is very customizable for your needs by accessing its generated file 'settings.config', it is a jar executable that will create one system tray icon on your notification area(already tested on Windows, but I think that it should work on Unix like systems). I already was able to make enums for Javascript, JSON, C++, C, Java and the default one C#. Everything just by tweaking the configs. In this tool you will set an Input path, then the executable will start to listen to this input path. After that, you can set one output path for where the generated file will be created. Every time you save the config file, or drag'n drop some file in a folder that is being listened, it will update the enum generated. That's all folks, hope this tools can help in your development. Access for this tool:
  15. 3D perspective is perfectly possible in the plain 2D canvas of HTML5/JavaScript without the overhead of any frameworks or libraries. As an example I have recently created a small game in response to a GameDev challenge relating to DOOM. I was troubled by a bug in my display when the player moved close to walls. I sat down and made some diagrams to help me get my thinking straight and then I was able to solve the bug. I thought others might find my diagrams useful so I am adding them here. My aim is to demonstrate that 3D perspective is perfectly possible in the plain 2D graphics context. I believe that it is simplest for beginners to start in this way, getting familiar with JavaScript without the additional learning curves presented by the various frameworks. You can read about what I have just done in relation to DOOM here (which has a link to my little game): The code was adapted from my earlier and more complex game, The Forest: (I now need to add a correction to the drawing of the mines in that program, having solved the bug).
  16. I am trying to add Lottie animation in the Phaser 3 in my game. But I am not able to add. Lottie Animation link. This is how I am adding into my code : this.animation = bodymovin.loadAnimation({ container: document.getElementById("game"), // Required path: "assets/json/RainLoop.json", // Required renderer: "canvas", // Required loop: true, // Optional autoplay: true, // Optional name: "Hello World", // Name for future reference. Optional. }); But here problem is, this animation is attaching to the HTML DOM elements and so that the animation comes above the Phaser game canvas, Due to what I am not able to interact with my phaser game elements.
  17. FoobarIT

    Game Data

    Hi, I'm looking for a method to save the progress of my game. I already use localstorage but I would like to know if there is better system. Thank you.
  18. I have completed writing my free JavaScript course (begun in 2011). It is in two main parts. The first is aimed at complete beginners to introduce the whole idea of programming. It shows how to get some simple examples working and introduces some HTML5 as needed to make a platform for running the examples. It covers some general programming concepts such as writing requirements and testing against them. Part 2 is a more systematic exposition of the language, up to some of the more recent capabilities such as local storage and image processing. It is available at That link is to a contents page so that those who already know some of it can jump in to any particular topic of interest.
  19. I have recently discovered a couple of useful pages about improving the speed of canvas operations. I will give links to those pages at the bottom of this item but first let me describe a good speed-up I got as a result of reading them. In my program The Forest ( I am continually looking for ways to improve the speed of drawing scenes. I have made several improvements already but this new one is very useful indeed. I have a Scene object with method draw() which is invoked whenever the observer moves or turns. From its earliest incarnation this method has reported how long it takes, so I can monitor what is going on. Its first line is var t0 = new Date ().getTime (); // ms and its last line calculates a difference and displays it in a status line on the HTML page: var dt = new Date ().getTime () - t0; forest.infoDiv.innerHTML = me.toString () + ", Drawn in " + dt + "ms (" + this.nDrawIms + " images)"; I have augmented that so that the constructor of forest.scene includes this.drawingTimes = ''; and a new final line at the end of draw(): this.drawingTimes += dt + '<br>'; I can cause drawing of the same scene over and over again by clicking a button labelled 'Look level' (as opposed to up or down buttons which would draw a slightly different view of the scene). This means I can build up a long string of forest.scene.drawingTimes. Then in a testing version I can press an otherwise unused key to dump those times as the innerHTML of a div in my HTML test page. The <br>s mean that I get a vertical column of values which I can then select, copy and paste into a spreadsheet (I use OpenOffice). Then it is easy to get the mean and standard deviation of the column. I did that twice for a large number of values. First with my last released version of The Forest and then with a tiny enhancement so that just before every time drawImage(im, x, y, width, height) is called I do this: x |= 0; y |= 0; Those are bitwise OR operations and their effect is simply to chop off the fractional parts of the screen coordinates x and y. This means that drawing starts on an exact pixel and does not require interpolation. The results: without the truncation (ORing) the mean time was 140.9ms with a standard deviation of 35.3ms; truncated the mean was 85.7ms and standard deviation 23.7ms. That is a very significant and useful improvement, so it will be going into my next version. The scene drawn here involved 1,693 calls to drawImage(), scaling each image (tree, ground, and other features) differently each time. From this big improvement I deduce that once drawImage() starts on an integer pixel then it uses integer pixels in the destination to decide where to get pixels from in the original image for scaling. In hindsight this is rather obvious really but I thought it would be useful to others to see how I went about proving the effect. I have noted before in this forum that the drawing time varies quite widely (as shown by the standard deviations) and I still attribute that to the workings of the garbage collector in the background. I should also point out that so far I have only measured this in FireFox. If you want to see more clearly what I am taking about, The Forest is at - from the initial map use the button (or key) to go to the scene. The pages which prompted this are:
  20. Hello I have problem in understanding how pixi layers work. I want to make some layers like top one, mid and bottom. I want to add players to the top layer, enemies to mid and move dead enemies to bottom layer. I tried to do this, but my sprites are invisible now. Can you provide minimum working code for pixiv4 for my problem? I init player this way: this.player = new PIXI.Sprite(texture_hero); this.player.anchor.set(0.5, 0.7); this.player.x = cords.x; this.player.y = cords.y; this.player.visible = true; container.addChild(this.player); This is how i init pixi: var type = "WebGL" if (!PIXI.utils.isWebGLSupported()) { type = "canvas" } const app = new PIXI.Application(1000, 800, { transparent: false, backgroundColor: '0x000000' }); document.body.appendChild(app.view); //var layer = new PIXI.display.Layer(); //stage.addChild(layer); var container = new PIXI.Container(); app.stage.addChild(container); My game is quite big and its hard to select code to post it here to explain my problem. If something is unclear i can post more. Thank you for your time
  21. So, I need to check whether or not the player is colliding with a tree. Once the player is colliding with a tree have it display a piece of text. Then, once the player is no-longer colliding with the tree; have the text disappear from the scene.
  22. I wanted to create a static world axes for my application using babylon js. The static axes should be like in Blender 3d editor application, their is a world axes at bottom left. The exact behavior I am looking for. Please help
  23. Today I was playing a game made in javascript, and in the game files I had several javascript files and one communicating with the other being that they all started as follows (function(){ //Codigo })(); How do I create separate files from the current one and all starting with this code so that nobody can access the function via the google chrome console?
  24. code0n

    Slot game

    While making a slot game, I need to add time delay to start individual reel and to increase its speed for which I need to increase the fps of game. So please help me out here.
  25. Hello i have some problems with pixi-layers.js. I want to move some sprites to top. I use pixi.v4 with this script: Error message i get: pixi-layers.js:705 Uncaught TypeError: Cannot read property 'prototype' of undefined at pixi-layers.js:705 at pixi-layers.js:744 I add pixi layers in index.html this way: <script src="/"></script> <script src=""></script> <script src="src/pixi-layers.js"></script> <script src="src/keyboard.js"></script> <script src="src/client.js"></script> What did i do wrong? Thank you for your time.