Friday, February 13, 2015, 03:47 PM ( 13043 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


| 1 | 2 | Next> Last>>