Hot answers tagged

47

The short answer is you can't do it. Anything that runs client side, especially from source, can be modified to defeat your tactics trivially. If you put in place a client side checker to look for abrupt changes, a user can just disable the checker. The good news is that, generally, there is very little cheating on single-player games. The only major ...


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+/...


18

Don't just send an integer score to the server. Send a collection of game stats that can be used to verify the score was realistic. Or you can implement some pre-shared key for calculating the score. You could send incremental scores and stats throughout the game and ensure that the increase is reasonable. However, I wouldn't worry too much about it. The ...


15

Let's start with the array. Don't think about it as tridimensional. Indeed, if you want to have stackable units there, it makes sense at first sight: first dimension is collumns of rows of tiles second dimension is rows of tiles third dimensions is tiles, i.e. arrays of units. But this third dimension won't be consistent, as you will store there not only ...


15

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

I already answered a question like that here, and I'm sorry to tell but: I wouldn't bother to make some server side simple checking, but I don't want to go the Diablo 3 path keeping all my game state changes on the server side. Is the baddest thing you could have say here. If you wanna do an "anti-cheat" engine, you'll have to do that. You can add ...


14

Yes. There are many ways to wrap an HTML5 game for distribution on iOS. Solutions include CocoonJS, Game Closure, PhoneGap, and Ejecta. Examples of HTML5 games on iOS include Onslaught! on iPad and Biolab Disaster on iPhone.


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 ...


11

Using transparency (alpha channel) is the way to go, I recommend. This means that when you want a vertical object on the tile like this: Then you can do it easily if your renderer draws the tiles back-to-front i.e. painters algorithm. IMAGE CREDIT: Reiner's tileset.


11

1) Lack of knowledge. Developing for Canvas might be well beyond some web developers who are very accustomed to manipulating DOM. 2) Lack of a scene graph. The DOM is (in game engine terms) a scene graph, permitting strong querying and manipulation of DOM nodes. Writing a game using Canvas requires the developer to "reinvent" that part of the wheel. 3) ...


11

Quadtrees typically store and retrieve rectangles. A point is a specific case where width and height are zero. The following logic is used to find home for new rectangles in the tree, starting with the root node: void Store(Rectangle rect) { if(I have children nodes) { bool storedInChild = false; foreach(Node childNode in nodes) ...


10

First of all I suggest that you change directions from: W - up-left S - down-right A - down-left D - top-right into more intuitive: W - up S - down A - left D - right As for your concern, I suggest that you make two functions, one translating isometric tile coordinates into grid coordinates, and second the other way around. That way you could simply ...


10

As Byte56 said: "never trust the client", but: Never trusting the client comes at a price: Having all games being played on the server will increase your infrastructure cost a lot. Assuming most of the players won't cheat and the top highscore will settle after a little time and stop changing a lot there is a middle way. Record the games (on the ...


10

I think you're making a mistake thinking of a framework as a crutch. Surely when you want to build your own computer, you don't make all your own circuit boards? Mine and smelt the copper yourself? Frameworks are not crutches. They're tools that make your job much easier. If you truly want to want to get into game development, you'll want to use frameworks....


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

While the method described by sws and MarkR is also what I prefer, I would like to present an alternative approach. A hackish option for creating an isometric look with minimal effort is to actually use orthogonal tiles, and use context.transform to set a projection matrix which makes the map look isometric (or a combination of context.rotate and context....


9

Regarding the coordinate system: In order to address individual tiles, you will need some kind of origin (a 0:0 point). In order to allow the playing field to expand in every direction, you will also need negative values. This will give you a world which stretches from -2.147.483.647 to 2.147.483.647 in both directions, which is "large enough" to seem ...


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 ...


8

Renderer apart, consider reading the following articles to understand how older systems implemented optimal tile-based map traversal: Tile-Based Games FAQ version 1.2, and Tile Graphics Techniques 1.0 They're indispensable guides for implementing tile based games on systems which may have limited resources. In terms of today's technology, HTML5-based ...


8

Do I send a command to move right every frame? Sure. Why not? As long as the player is moving right, of course. If that's spamming the server too much, you could of course just send the command to move right and the command to stop moving right, but you're risking some troubling behavior if you miss the "stop moving" command. You could compromise between ...


8

Getting the raw pixel data You can get the raw pixel data with the function context.getImageData(x, y, width, height). The return value is an ImageData structure. This structure will have a field data which is an UInt8ClampedArray where each pixel is represented by four values between 0 and 255 (red, green, blue, alpha). Converting an image to greyscale ...


7

To move smoother, change scrollPosition.x -= Math.round((dragHelper.x - x) / 28) scrollPosition.y -= Math.round((dragHelper.y - y) / 28) to scrollPosition.x = Math.round((x - dragHelper.x)) scrollPosition.y = Math.round((y - dragHelper.y)) To prevent jumping when first clicking on it, change dragHelper.x = x dragHelper.y = y to dragHelper.x = x - ...


7

In your case you'd move around game objects based on their velocity, do collision detection and handling, and only then you'd render the game objects with their new positions and rotations. During the update phase you change your game state, amongst others calculating new positions and rotations for your game objects based on user input, gameplay rules and ...


7

Here's how I would suggest handling it: First, have your Player class store a variable, jumpForce, which is a 2D-vector similar to velocity and gravity. Now, also have a constant, initialJumpForce, which is the immediate force that will be exerted on your player when the jump key is first pressed. When the jump key is pressed, and the player is grounded (...


7

Generally, this advice is given not because of abstraction or code cleanliness but rather because gameplay logic that is sensitive must be simulated by an authorative server to prevent cheating and hacking. Long story short: If you don't particularly care about players hacking their score - don't bother. If your game is multiplayer, then you should looking ...


7

This page contains an excellent list of optimizations that can be made to canvas. In the section labeled "Use multiple layered canvases for complex scenes" it describes why having multiple canvas objects is actually better in many cases because you don't have to redraw large expensive objects (background images) as frequently as smaller, fast moving ones (...


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; ...


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