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

What's can be found in this code:

addEventListener Very usefull

SetTimeout ... better than SetInterval

canvas.getImageData .... with putImageData canvas are very speed.

It's like the scanline of Windows API


My cursor pos is not good for Firefox !!! I do it on purpose !!!
In using ClientX and ClientY

it should work on all the browser !!!


Let's see the wonderful world of Fractal


Open Fractal in a new window

Maybe you've already played with the SVG tags.
Easy ... <svg> <rect id="rct" x="100" y="100" width="100" height="100"/> </svg>
Easy for a first try.
Then, we want to modify or get the value of X and there! a strange object appeared ...SVGAnimatedLength
At this point you can get the value of X this way
document.getElementById("rct").baseVal.value
the baseVal will give you a SVGLength
But change its value is even easier
document.getElementById("rct").setAttribute("x", 150);
Here a example http://celermajer.net/javascriptTest/SV ... ength.html :

Let's move this black square now !




<svg>
<rect id="rct1" x="55" y="25" width="150" height="150" style="fill:rgb(100,100,100)"/>
<rect id="rct2" x="45" y="15" width="150" height="150" style="fill:rgb(0,0,0)" />

</svg>



<script type="text/javascript">
var rct2x =-99;
var rct2y =-99;
$("#rct2").mousedown(rct1mousedown);
window.onmouseup = function (event) {rct1mouseup(event);} ;
function SVGAnimatLengthVal(o) {
oo = o.baseVal.value;
return oo;
}
window.onmousemove = function (event) {
if (rct2x==-98) {
rct2x = event.screenX;
rct2y = event.screenY;
}
if (rct2x!=-99) {
rct = document.getElementById("rct2");

var x = SVGAnimatLengthVal(document.getElementById("rct2").x) + event.screenX -rct2x ;
var y = SVGAnimatLengthVal(document.getElementById("rct2").y)+ event.screenY -rct2y ;
rct.setAttribute("x", x);
rct.setAttribute("y", y);
rct2x = event.screenX;
rct2y = event.screenY;
}
};
function rct1mouseup(event) {
$("#rct2").css("fill", "rgb(0,0,0)");
rct2x =-99;
}
function rct1mousedown(event) {
$("#rct2").css("fill", "rgb(0,0,255)");
rct2x = -98;
}

</script>

With the canvas Object of HTML 5 you can do a lot thing.
Here a Tetris example download it the sources codes is your !