A new feature of HTML5, allowing Javascript apps to have a drawing surface in the browser.

learn more… | top users | synonyms

0
votes
0answers
17 views

Drawing a object with Box2D and HTML5 canvas on current mouse position

I'm attempting to create a air hockey type game with HTML5 canvas and JavaScript, using Box2dWeb for the physics calculation. I need a way to draw the puck at the current mouse x and y position every ...
0
votes
1answer
4k views

How To Scale Canvas In Android

I am writing a android game using Canvas as the way to draw everything, the problem is that when i run it on different android phones the canvas dosn't change size i tried using canvas.scale() but ...
6
votes
2answers
871 views

Is using multiple canvas objects a good practice?

We're developing a jump and run game with HTML5 and JavaScript and have to build an own game framework for this. Here we have some difficulties and would like to ask you for some advice: We have a ...
1
vote
1answer
38 views

Removing a previously rendered image on a canvas

I made a platformer using ctx.clearRect and ctx.fillRect, so each time the player moved I would just delete the previous position and draw him again. Now I'm working on importing my own art into the ...
1
vote
2answers
76 views

Canvas - darken sprites rendered by drawImage

I am implementing lighting in a tile engine, and I need a way to darken tiles, based on their light level. For the ground tiles, I can clear the context to black, then set the globalAlpha and use ...
1
vote
2answers
232 views

Bullet entry Point around Player Object

I have a player rotating by the mouse and want the bullets line up with the player's gun. Right now they simply come from the point of the player and shoot in the direction of mouse. I just need the ...
0
votes
0answers
43 views

Puzzle Game on Android using canvas with matrix

I'm making a slide puzzle game on android. I have handled the gestures and tranaslate the matrix that holds the pieces succesfullly, and I have made the logic when the pieces get on the border of the ...
0
votes
0answers
30 views

How do I repeat parts of some images in 2D Array in JavaScript but not all of them?

OK, I am trying to make a game that is a little bit like SimTower but utilizing HTML5 (particularly the canvas element) and JavaScript with a little CSS. I have progressed pretty far in the past week ...
0
votes
2answers
127 views

How to move an image back and forth with javascript

I currently am trying to make a baseball game and have this code here: http://jsfiddle.net/769BK/ I have the baseballX set to a decrement, and then I try increasing the value using baseballX++; but it ...
2
votes
5answers
2k views

Are there any good html 5 mmo design tutorials? [closed]

Hey all. I got a rather inspired after playing gaia online's zOMG and wanted to revive an old project idea I've had laying around for a few years now. I'm looking to work with html5 (ie canvas, svg ...
0
votes
2answers
147 views

How to move an object using X and Y coordinates in JavaScript

I am making a 2d baseball game with JavaScript and HTML5 and am trying to move an image that I have drawn with JavaScript like so: //canvas var c = document.getElementById("gameCanvas"); ...
-2
votes
2answers
108 views

collision detection algorithm issue

here is the jsfiddle i am working on so far : http://jsfiddle.net/TLYZS/ if you debug the code and check the collision function you can see that the collision is working fine when the user overlap ...
1
vote
2answers
444 views

Dealing with multiple animation state in one sprite sheet image using html5 canvas

I am recently creating a Game using html5 canvas .The player have multiple state it can walk jump kick and push and multiple other states my question is simple but after some deep research i couldn't ...
5
votes
3answers
230 views

How to do a genetic algorithm's chromosome which controls movements

First I would like to inform you that I'm french and 15 so my english is not very good. I've read some articles about genetic algorithms (GA) and since I discovered the HTML5's canvas element, I can ...
0
votes
0answers
84 views

Drawing and scrolling paths performance problem

Hi I'm doing and endless sidescroller game where the terrain looks like a tunnel which is infinite. I managed to randomly generate the tunnel using this code: protected void createPath(){ path = ...
1
vote
2answers
93 views

How can I make EaselJS' skew behave like canvas'?

The skew property of a bitmap in EaselJS (given as angle) rotates the image such that it also flattens. I'd like to skew it without "squashing" it, as canvas does. JSFiddles, to demonstrate: Canvas ...
1
vote
2answers
71 views

How do you account for zoom in a top down viewport?

I've been stumped on this for days so please forgive me if this question is in bad-form. I have a generic top-down RPG structure, and I want to create a zoomable Canvas viewport for it. I've read ...
3
votes
2answers
618 views

Converting Doom maps to JSON [closed]

This is a really cool demo of a Canvas Doom Engine made back in 2006: http://canvex.lazyilluminati.com/84/play.xhtml Here is the e1m1 map in JSON format: http://canvex.lazyilluminati.com/84/map1.js ...
3
votes
4answers
878 views

Why wouldn't one use Canvas for HTML 5 game development? [closed]

I'm just getting into the HTML 5 game development. I've discovered that some games seem to be created using just JS/CSS/HTML instead of the canvas. Since canvas seems to enjoy good browser ...
8
votes
5answers
1k views

Good technological solutions to build an ascii map and moving characters in a browser (like dwarf fortress)? [closed]

I'd like to build a webapp for my game website that involves using text characters to represent animals and people, and have them move around on map squares with independent (server driven) AI. So ...
1
vote
3answers
351 views

Algorithm to zoom a plotted function [closed]

I'm making a game in android and I need plot a function, my algorithm is this: @Override protected void onDraw(Canvas canvas) { float e = 0.5f; //from -x axis to +x evaluate ...
0
votes
0answers
45 views

EaselJS SpriteSheet isn't responding to gotoAndPlay

I'm developing a Fez-based HTML5 Canvas game using EaselJS and I've found a problem, that I can't solve myself, while trying to implement SpriteSheets to the hero. The problem is that I've defined ...
3
votes
3answers
661 views

Client Side Logic vs Server Side Logic for HTML5 Game

I'm writing an HTML5 game that takes place in a single screen and does not have any data that would need to be saved (except for a score). I am writing all of my canvas logic on the front end. because ...
-1
votes
1answer
82 views

creating an html5 game [closed]

I am working on a really simple online version of the parachute shooters game that was preprogrammed on old iPods. I'm pretty new to game development and so at first I tried to build the whole game ...
0
votes
1answer
288 views

Should I render all of my HUD views to a single SurfaceView?

I'm using a SurfaceView and canvas to implement a game HUD, title screens etc., by overlaying standard Android view widgets over my SurfaceView. This works reasonably well and maintains an acceptable ...
1
vote
2answers
832 views

HTLM5 canvas game (easeljs) slow peformance on ipad (ios7) with phonegap

I have developed a game with easeljs for HTML5 Canvas. the game is a single HTML5 page with canvas and a lot of javascript. All this time I tested the app on iOS Safari (iPad3 iOS7) with 40~50 fps ...
5
votes
0answers
2k views

Poor performance in android when running APK, runs fine in browser

I have created a small game project in HTML5 using Phaser engine (tried both 1.1.5 and 1.1.6). Then to port it to mobile platform, used Phonegap/Cordova for Windows Phone 8, Android and iOS. In my ...
2
votes
1answer
80 views

How do I use createPattern with a spritesheet? [closed]

Say that I have a spritesheet like this And I want to use the dirt tile at (1, 1). I know that I can repeat an entire image using createPattern but how do I create the pattern from just the tile ...
-2
votes
1answer
1k views

How to make Moving road/track for android game? [closed]

I am very much new to Android game development. and i have little idea about the canvas and open GL. in one of my requirement i wanted to draw a moving road/track(Jazzy). how should i start. please ...
1
vote
1answer
105 views

JavaScript: Rotating a canvas around its center for a 2D sidescroller

I've been making a 2D sidescrolling game using JavaScript and HTML. The game is set in space, where the player character can fly around (Up, Down, Left and Right keys) and rotate the world around him ...
0
votes
0answers
49 views

HTML5 Canvas: Get rect coords after rotation (relative to screen)

update: function(delta) { for (var i = 0; i < this.bullets.length; i++) { this.bullets[i].velocity = this.bullets[i].speed * delta; this.bullets[i].contextX += ...
3
votes
1answer
1k views

HTML5 - Dynamic canvas grid for scrolling a big map

I've been working on different scrolling algorithms for my JS-based game. My main problem is that I need to draw a huge map and also have it scroll smoothly. I've made a few attempts and while they're ...
10
votes
0answers
908 views

How to create 2D shadows [duplicate]

I'd like to create lights and shadows in a 2D environment, like in the image below: I did several searches but got no results. Do you have any hint?
2
votes
2answers
154 views

Glitch-free cross-fades in HTML5

In my HTML5 canvas game, I need to cross-fade two sprites which have some glow around them. (Glow is backed into sprites.) Initially, the first sprite is visible. During the cross-fade the first ...
1
vote
2answers
244 views

How can I center a circle around a point on an HTML canvas?

I've got a job to make an engine and light game for canvas in HTML5. I like the things I make to be centered on the x,y positions I give it, I don't know why, it just helps me think about them ...
3
votes
2answers
276 views

HTML5 game fps render lag

I am currently creating a flappyBird-like HTML5 game using Proccessing.js You can see current work here: http://files.tips4design.com/flappySlothRelease/ The problem is that even though the FPS is ...
0
votes
1answer
172 views

How do I make a sprite blink on an HTML5 canvas?

I'm thinking of the flashing effect many games have when a character gets hit and takes damage. Something like overlaying a lighter color on visible sprite pixels for a second.
0
votes
1answer
99 views

What's the best way to time a character AI movement on android/java?

I'm creating an android game and I'm trying to figure out the best way to time a character position change, something like this: public void move() { //this.posX += 5; this.posY += 5; if ...
0
votes
0answers
144 views

Make bitmap moviment on android canvas using timer or handler/Runnable/postDelayed

Im trying to to move enemies on a android canvas, i have to update its x and y position every x time (run enemy.move() every x time). I got 2 problems: Currently im implementing my canvas redraw ...
0
votes
1answer
221 views

2D to 3D perlin noise, I'm not sure I get it

I've been using 2d perlin noise to generate height maps for a little isometric terrain experiment. The noise value is directly related to the z-layer a tile will appear in: Math.floor(noise * 10). ...
1
vote
2answers
109 views

Calculate tile ID on a Reus style world with canvas context.arc()

I need a bit of math help for my game. I'm using Javascript and the Canvas tag to create a circular world, think God Finger, and Reus. The current version of my game is here: ...
0
votes
1answer
44 views

Update function in html5 canvas game isn't working properly [closed]

Jsfiddle : http://jsfiddle.net/seekpunk/6eeKH/15/ the code : if (this.collection.length > 0) { if (((this.collection[0].blockX + this.collection[0].blockW) >= cw) || ...
2
votes
3answers
198 views

Is it more efficient to encode rotation in a spritesheet or rotate at runtime?

I'm developing a game with JavaScript and HTML5 and I'm wondering about the performance implications of sprite rotations. There are two ways that I know to rotate a sprite: Rotate the actual sprite ...
0
votes
0answers
61 views

What would be a good way to scroll a large html canvas (that contains little repetition if any)

What would be a good way to scroll the content of a huge html5 canvas so that the scroll is crisp and smooth, and memory consumption (and cpu load or battery consumption) is also reasonable? any ...
1
vote
3answers
136 views

Canvas setTransform function clarification

I'm currently building some kind of fake-3D dungeon, and I'm facing some difficulties understanding the behavior of the setTransform() function. Here's my simplified code: var can = ...
22
votes
2answers
994 views

My game is just about finished! What do I do now? [closed]

I have an HTML5/canvas game just about finished and ready to launch. It's a 2d game in which you explore and disrupt a procedurally-generated landscape, crafting items and structures to survive. I ...
0
votes
0answers
18 views

Clicking on a canvas getting polygon [duplicate]

I'm using Canvas to create polygons like this: http://bl.ocks.org/mbostock/6675193 I want each of those polygons to represent a clickable province. How do I know which province is clicked when the ...
0
votes
2answers
292 views

translating canvas for rotating sprites that shoot

I am trying to align bullets to my different sprites guns (top down 2D for android). Right now Im using this method to draw my bullets: public void draw(Canvas canvas){ update(); ...
3
votes
1answer
316 views

How can I detect mouse events on sprites in a canvas?

I'm making an HTML 5 game. I want mouse clicks on sprites drawn in a canvas element cause events that my code can react to. At the moment, I'm doing it by checking through all of my sprites in a ...
2
votes
1answer
245 views

How can I repeat only a portion of an image in Javascript?

So I'm trying to repeat a portion of my spritesheet as a background. So far, I have attempted this: var canvas = $("#board")[0], ctx = canvas.getContext("2d"), sprite = new Image(); ...