Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create a tile based 'whack a mole' game in HTML 5. Also at every instance a new mole appears at a given tile an audio prompt needs to given indicating where the mole is(this is so that visually impaired individuals can also play it ). Additionally on hover over each tile its location needs to be said aloud (eg.(3,4)). Now the problem is I am not sure how do I start programming this in HTML5. Please can someone help me.
you may want to try panda.js it is a html5 game engine for mobile and desktop
and it has video tutorial
the showcase itself had whack a mole like game
http://www.pandajs.net/showcase/
(full disclosure: I've used pandajs myself)
Start with the basics in javascript. You'll need this to do anything in HTML5 canvas:
http://www.w3schools.com/js/default.asp
Then proceed learning about HTML5 canvas:
http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am designing a webpage with an overlay intro video. Essentially the moment you enter the webpage an intro video will play. It works and did what I wanted it to do. WHAT I DON'T WANT IT TO DO is play every time I go into this page. What I want to do is:
Have the video play the moment you enter the page (PAGE A).
Then lets say you go to page B...
After that you return to page A and the video doesn't play again until after a certain period of time (lets say 12 hours).
We did figure out a way to do this but we lost the code, so we know its possible.
Anyway you guys can help me out here?
I would look into localStorage or sessionStorage. Either of those can be used to store information in-browser - for example, whether or not the user has seen the video before. On load, check localStorage for videoPlayed (or whatever you decide to call the variable) and use that to determine whether or not to show the video.
The main difference between the two is that localStorage never expires, while sessionStorage does once the page/browser is closed.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am looking at some design option on recreating an existing generated website. The site currently has a number of UML class diagrams within it. The diagrams are generated with a corresponding imagemap, which allows the user to interact with different parts of the diagram.
An example diagram is available here : http://www.datadictionary.nhs.uk/data_dictionary/diagrams/diagrams/organisation_diagram_im.asp?shownav=0
Feedback from users have asked for features like :
Image Scaling
Image Panning
It appears that using Image Maps is considered a bit "old school" in HTML these days. If that's the case what are the alternatives?
You can use SVG for the same.. For SVG tutorials refer this or you can use HTML 5 canvas.
But HTML5 is still not supported on every browser so you can go for SVG. SVG might be costly in terms of performance in case of large number of objects.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Quadtrees are used as an optimisation in games and elsewhere for spatial organisation of entities http://en.wikipedia.org/wiki/Quadtree.
Are there any examples of quadtrees being used for HTML5 Canvas?
I think you should visit Mike Chambers.
Using Easel JS.
http://www.mikechambers.com/blog/2011/03/21/javascript-quadtree-implementation/
HTML5 canvas is merely a standard that doesn't define it's particular implementation. However I still doubt that canvas's will use quadtrees in their implementation. Quadtrees are mainly used for efficient collision detection and in general storing spatial data.
On the other hand, a canvas acts as a bitmap which is more naturally stored as a pixel array. There isn't any notion of "colliding" objects so each element is drawn independently of the previous ones.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Is there any software available like blend, for working with HTML5. Especially, to do animation related stuffs.
Something like http://raphaeljs.com/ might be useful
Hype allows you to make animations in HTML5. Pretty bare-bones at the time of writing but they seem to be planning to implement most of the functionality that Flash and Expression Blend offer.
http://www.tumultco.com/hype/
(I realize this is an old question but at the time of writing there still doesn't seem to be a good HTML5 flash/blend alternative.)
have a look at this free illustrator plugin which converts any drawing into canvas, also can do animation and interactivity too:
http://visitmix.com/labs/ai2canvas/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Canvas from html5 was introduced some time ago. Currently it's used (almost) only for demonstrations how cool it is - it's mainly related to painting, games and charts. Many of them can be found at Canvas demos.
How creatively / unusually can canvas be used?
Some examples:
jsAscii - ASCII art from images with
Javascript and Canvas (yea, I
know, it's painting but not the
classic one)
Javascript compression using PNG and
Canvas
There's a really cool tool called Detexify which uses machine learning on the back end which allows you to draw the LaTeX symbol you're interested in knowing the LaTeX code of and it will suggest one for you based on what it's learned from other users.
My two favorite are:
Processing.js - an implementation of the processing language in javascript/canvas.
Bespin - a collaborative coding IDE that feels more like a beautiful native app.
I always thought of creating a simple image editor with the canvas tag. It would be easy to use it for cropping, resizing, changing color values, removing red eyes etc.