Friday, August 9, 2013, 10:40 AM ( 2397 views )  - Posted by Administrator
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


Sunday, February 26, 2012, 12:18 AM ( 253 views )  - Posted by Administrator
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>

Sunday, February 5, 2012, 01:32 AM ( 2124 views )  - Posted by Administrator
With the canvas Object of HTML 5 you can do a lot thing.
Here a Tetris example download it the sources codes is your !



Thursday, January 1, 1970, 01:00 AM ( 2221 views )


Monday, January 30, 2012, 12:34 PM ( 1943 views )  - Posted by Administrator
Here a Tetris in Java Click here
All the sources codes are in the jar file(open it like a zip file).
I am working on a nice tetris in javascript HTML5 an the canvas tag ... for soon

<Back | 1 | 2 | Next> Last>>