Hot answers tagged

30

Just putting all the files into a .zip file isn't a viable solution because most web-applications need a web-server so that they can access resources via HTTP-requests. On some systems you can access files via the file:// URI-scheme, but that's not guaranteed to work everywhere because of security-reasons and will fail for things such as AJAX requests. It ...


21

You can embed images in the HTML document using the dataurl-syntax which allows to put the base64 representation of the binary image data as the src-attribute of an image. This also works on any other kind of media file. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEgAACxIB0t1+/...


16

Phaser has support for two types of sprite sheet: "classic" ones, where every frame is the exact same size, and "texture atlases" which are created with the help of a third party app like Texture Packer, Shoebox or Flash CC and come with an associated json file. You load the "classic" ones with game.load.spritesheet where you must specify the width and ...


14

Web browsers disable some Javascript features for security reasons. My bet is that you just hit Google Chrome forbidding XMLHttpRequest on local files by default (see this answer on SO for how to disable that, but beware: this is dangerous). See this page on the Chrome dev site for details. This is why you have to setup a local HTTP server to workaround ...


10

It’s important to note that changing the co-ordinate system with rotate and translate do not affect anything that’s currently drawn into the canvas. It only affects subsequent drawing actions. var TO_RADIANS = Math.PI/180; function drawRotatedImage(image, x, y, angle) { // save the current co-ordinate system // before we screw with it ...


9

Regardless of the level of details and the number of pixels you have, you must start with a thorough understanding on how walking works. If your character looks like shaking its legs, it probably because, that's all you drew : shaking its legs. Just search "Walk cycle" with google image and you'll find plenty of examples. Here is a little example of what ...


9

There is a good reason for this precaution: Users usually don't expect audio from websites. They get really angry when they load a website, and an audio advertisement blares at them at full volume. This is even worse if they opened multiple tabs and are not sure which one is responsible. That's why all browser vendors prevent websites from playing audio ...


8

var sprite = game.add.sprite(x, y, 'spritesheet_name'); sprite.frame = 0; Spritesheets aren't limited to animations, that's just one way to use them. An animation is just a way to display different frames at different times. By manually setting the frame of a sprite, you can display a specific part of the spritesheet.


7

I've been targeting node-webkit for my html5/js game. Most of my code runs browser-side, so the node.js aspects are mostly because its simple enough to have it run a small server and send down the html/js code to the embedded browser. A good demo of a fast-paced game is, "A Wizard's Lizard". They talk about their success on reddit, and they apparently use ...


7

For a Chrome-based solution to make the game run offline and enjoy some native functionality, you can consider making a Chrome App. This way, you can distribute it in Chrome Web Store for added visibility, you can enjoy some powerful APIs, and make it look more like a standalone app. The downside is, of course, requiring Chrome.


7

tl;dr You control how much data you are willing to process each frame. If a packet is too big, break it into smaller cells and process them one at a time (i.e one each frame). If you get a lot of small packets than split the group into chunks and limit the amount of information processing that is done each frame. The client does not need all the information; ...


7

As you have found out, the W3C Vibration API is not supported in the iOS Safari browser (as reported here: https://caniuse.com/#feat=vibration). However, you've pointed out that you plan to package your app for the iOS App Store. To do this, you'll need to package your "web game" into an appropriate native container for installation on the phone. You could ...


6

Using setInterval with such a low interval period means that the drawing is probably being queued up before the previous function has finished calling (for example, the drawing takes 50ms and your interval is 40ms, then it will always be trying to catch up). I would recommend using requestAnimationFrame, a polyfill example can be found here. Here's a simple ...


6

Instead of testing the collisions ON the player, you should testing them AHEAD, to check whether there's a wall where the player WILL be walking. To do that, you'll only need to change 2 things: 1- Your player.collision function should accept two arguments: an x and y offset. You should add them to your collision checking algoythm too. 2- When calling ...


5

The simplest way to get such an effect is to literally blink the sprite: Just don't draw it half the time. var frequency = 200; if (! blinking || Math.floor(Date.now() / frequency) % 2) { ctx.drawImage(...); } The idea is that when blinking is set to true, the sprite will flash at the given frequency.


5

I had to address this same problem, basically you're doing it the right way, updating at a set rate of updates per second, and thus a set speed per second and rendering as fast as possible independently of that speed. That way it doesn't matter how you measure things in your update as long as you keep it consistent it'll be the same speed regardless of how ...


5

Arcade physics, unlike P2 and most other physics engines, is a very simple and simplistic system. The former will use a lot of lay terms whereas P2 will use terms plucked straight from a physics text book. Switching between the two is not trivial; you'll need to relearn a lot of stuff. I highly recommend the P2 examples page to get a grasp of what P2's ...


5

I would like to know if people could modify an HTML 5 game's code Yes. Like all web technologies, the client has full access to the local code; they can browse the source, modify it and send unexpected data to the server, or sniff what the server is sending to the client, but not displayed. to harm either the server Yes. This is not specific to ...


4

setTrasnform(a, b, c, d, e, f) has six parameters: a Scales the drawings horizontally b Skew the the drawings horizontally c Skew the the drawings vertically d Scales the drawings vertically e Moves the the drawings horizontally f Moves the the drawings vertically It scales and skews the whole canvas. Imagine you are drawing on ...


4

Basically if you number X and Y iso-coordinates their sum is the number of the diagonal, you sort tiles by diagonal, and then draw first tiles with lower Z. This is indipendent of screen coordinates. (of course assuming the camera is in the bottom left corner of the image)


4

requestAnimationFrame implementation depends on browser solely. Browser will try to reduce framing if it "believes" that it will be better for user, and usually does it "smoothly" from 60 to 30. But that shift is obviously easy to see. As well once it is some time in 30fps state, it then usually shifts back to 60. The problem here is that this shifting is ...


4

Well fine, after 4 days and 62 views and only ONE comment (thanks @Anko), I managed to do the formula on my own. I don't know if it's as optimized as it should be, but who cares anyways? I can't believe that out of 62 views I only got one user interested in helping...very disappointing. Anyways, here are the formulas for those interested (ix/iy = absolute ...


4

Unless the game or framework offers some sort of API that let's the webpage check on its state, there no easy way to do this. Technically, the game is always "running" even if the player is just sitting in the menu, which is why you would need the game to tell your webpage when the player has completed the level.


4

The question is a little stale, but in case it still helps: After you run ./gradlew html:dist to generate production code, you want to copy everything inside ./html/build/dist/ to your server. Running that command produces the code in that directory. The code that's under the war directory and that has a Tomcat-like structure, I believe all that is for ...


4

Draw the water Draw your sprites, flipped upside-down about the water level, and with some effects Draw the ground (this covers the reflection and water) Draw everything else normally http://jsfiddle.net/cgzrwhpn/


4

Unless you want players to be able to teleport through walls using their browsers build-in JavaScript debugger, you will have to implement any game mechanics worth manipulating on the server. This will lead to more noticeable lag, so you might implement it both on the client and the server. That way the client can perform the action locally so the player ...


3

My understanding is that Mobile Safari enables JIT compilation of JavaScript which is a pretty significant performance boost. Due to security reasons, the JIT compilation is not available to a UIWebView within native apps, such as PhoneGap wrapped applications. It seems that homescreen apps also run inside of the non-JIT UIWebView, although I read a few ...


3

Honestly as much as some of the top answers recommend more complex AI, If this is an early attempt at a game and you're not that skilled with code yet, you might try for a more dumb AI For example a simple system of wait (0-3 seconds) Roll d6 pick from 6 actions. Or something similar depending on how many actions you have


Only top voted, non community-wiki answers of a minimum length are eligible