Friday, February 13, 2015, 03:47 PM ( 1407 views )
- Posted by Administrator
Just a little HTML5 snake game to play with Javascript Audio array canvas
to play mp3 in javascript juste create a object Audio(a url to mp3)
eatsound = new Audio('eat.mp3');
popul = new Audio('popul.mp3');
autoeatsound = new Audio('autoeat.mp3');
music = new Audio("music.mp3");
music.loop = true;
music.play();
juste play() to play... very easy
In have added
<meta name='viewport' content='content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 ,minimal-ui' />
<meta name="apple-mobile-web-app-capable" content="yes" />
this will remove the address bar of safari
it will fix the zoom ...
to be like a real webApp you need to block the body scroll
for this the best way is to catch the touchmove event by jquery
$(document).on("touchmove", "#fx", function (e) {
/*here my stuff => */ mv(e.originalEvent.layerX, e.originalEvent.layerY);
/* And here we say "No don't do the normal scroll effect !" */ e.preventDefault();
});
About the firefox onmousemove event bug or problem:
do it like this its work for all browser .. better than layerX layerY
$(document).on("mousemove", "#fx", function (e) {
mv(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); });
The code source is here http://celermajer.net/snake/index.php
permalink
| print article
| 







