var cssStyle = document.createElement('style');
cssStyle.innerHTML = 'body { color: #000; }';to var cssStyle = document.createElement('style');
cssStyle.innerText = 'body { color: #000; }';and everything works.
Because of nearly release of stable Firefox 5, first Mozilla's browser with CSS3 Animation support, I decide to create CSS3 demo for the Single Effect Compo.
#toastBody {
background-color:#fad695;
width:100px;
height: 70px;
border: solid #000 5px;
border-radius: 15px;
padding: 2px;
position:absolute;
z-index:19;
}
#toastBody > div {
width:100px;
height:70px;
border-radius: 30px;
background-color: #fc9dff;
display:block;
color: #da3eb9;
font-size: 40px;
line-height: 10px;
}
All the animations was declared with @-moz/webkit-keyframe (I wrote a lot about this method before). 
<div id="mainHead" class="skin">
<div class="mouth">E</div>
</div>
.mouth {
position: absolute;
-moz-transform: scale(2, 0.7) rotate(-90deg);
-webkit-transform: scale(2, 0.7) rotate(-90deg);
font-family: Arial;
font-size: 25px;
font-weight: bold;
top:9px;
left:37px;
color: #000;
}
What about the rainbow behind the cat? I just cropped part of original image, put it into CSS Gradient Editor by ColorZilla (awesome tool BTW, but still without couple of necessary features I use daily; I think I will create something like this on my own), which generates me css gradient ready for pasting into the div background:.rainbow {
position:absolute;
width:45px;
height:90px;
background: -moz-linear-gradient (top, #d91a12 15%, #e13300 15%, #ff7f14 16%, #f2ab03 32%, #ebc000 32%, #fade00 33%, #efff03 48%, #56fc02 49%, #52ff01 66%, #4ade7e 67%, #3baaf2 67%, #3baaf2 84%, #7337f7 84%, #6b40f2 100%);
}The most annoying thing was the star. Animated stars in the background are made up from 8 animated elements. I google "nyan cat sprite" and found all the star frames [like this]. The only way to animate it was pixel-perfect animation of each of 8 divs. It took me really lot of time:![[like this]](http://i1037.photobucket.com/albums/a453/DryBowser455/th_NyanCatSprite.png?t=1304659408){kind=link}
@-moz-keyframes star1 {
0% { top: 0; height: 5px;}
33.19% { top: 0; height: 5px; }
33.2% { height:10px; top:0; }
49.79% { height:10px; top:0; }
49.8% { height:10px; top:5px; }
66.39% {height:10px; top:5px; }
66.4% { height:5px; top:10px;}
82.99% { height:5px; top:10px;}
83% { height: 5px; top: 15px; }
99.99% { height: 5px; top: 15px; }
100% { top: 0; height: 5px; }
}
@-moz-keyframes star2-3-6-7 {
0% { visibility: hidden; }
16.59% { visibility: hidden; }
16.6% { visibility: visible; }
33.19% { visibility: visible; }
33.2% { visibility: hidden; }
100% { visibility: hidden; }
}
@-moz-keyframes star4 {
0% { left: 0; width: 5px; visibility: visible;}
33.19% { left: 0; width: 5px; }
33.2% { width:10px; left:0; }
49.79% { width:10px; left:0; }
49.8% { width:10px; left:5px; }
66.39% {width:10px; left:5px; }
66.4% { width:5px; left:10px;}
82.99% { width:5px; left:10px;}
83% { width: 5px; left: 15px; visibility:hidden;}
99.99% { width: 5px; left: 15px; visibility:hidden;}
100% { left: 0; width: 5px; visibility:hidden;}
}
@-moz-keyframes star5 {
0% { left: 38px; width: 5px; visibility: visible;}
33.19% { left: 38px; width: 5px; }
33.2% { width:10px; left:33px; }
49.79% { width:10px; left:33px; }
49.8% { width:10px; left:28px; }
66.39% {width:10px; left:28px; }
66.4% { width:5px; left:28px;}
82.99% { width:5px; left:28px;}
83% { width: 5px; left: 15px; visibility:hidden;}
99.99% { width: 5px; left: 15px; visibility:hidden;}
100% { left: 0; width: 5px; visibility:hidden;}
}
@-moz-keyframes star8 {
0% { top: 32px; height: 5px; visibility:visible;}
33.19% { top: 32px; height: 5px; }
33.2% { height:10px; top:28px; }
49.79% { height:10px; top:28px; }
49.8% { height:10px; top:23px; }
66.39% {height:10px; top:23px; }
66.4% { height:5px; top:18px;}
82.99% { height:5px; top:18px;}
83% { height: 5px; top: 15px; visibility:hidden;}
99.99% { height: 5px; top: 15px; visibility:hidden;}
100% { top: 0; height: 5px; visibility:hidden;}
}
.star {
position: absolute;
width: 40px;
height: 40px;
z-index: 10;
}
.star div {
width: 5px;
height: 5px;
background-color: #fff;
position: absolute;
-moz-animation: star1 0.4s linear 0s infinite;
-webkit-animation: star1 0.4s linear 0s infinite;
}
"During the workshop you will learn about different methods of animation in JavaScript. We will compare the performance and ease of it's implementation in various browsers on different devices. Are we condemned to use DOM? What about new CSS techniques? Or maybe canvas is future of the web games?"
.png)
.png)
if (typeof document.body.style.webkitAnimation !== "undefined") {
//all your animation are belong to us
} else {
//no css animations:(
}
Unfortunately it don't work in Aurora, mozAnimation always return 'undefined'. Is there any way to easy detect it?var calculateSpeed = function(speed, frames) {
return (~~((1 / (60 / speed)) * 100) / 100) * (frames+1);
};
constructAnimationClass = function(){
var animClass = "@-webkit-keyframes 's" + t.id + "' {\n",
step = 100 / (t.fs + 1),
str = '% { -webkit-transform: translate(';
for (var q = 0; q < t.fs+1; q++) {
animClass += ~~((step * q) * 100) / 100 + str + t.animation * t.width*-1 + 'px,' + q * t.height * -1 + 'px); }\n';
animClass += ~~((step * (q + 1) - 0.01) * 100) / 100 + str + t.animation * t.width * -1 + 'px,' + q * t.height * -1 + 'px); }\n';
}
return animClass += '100'+ str +t.animation*t.width+'px, 0px); }\n}';
};
//append created class to the document
t.animStyle = document.createElement('style');
t.animStyle.innerHTML = constructAnimationClass();
document.body.appendChild(t.animStyle);
Above code creates class like this:
And every sprite needs to implement description of the animation (name is created by concatenating 's' and internal id of the sprite:
t.style.webkitAnimation = "'s"+t.id+"' "+calculateSpeed(t.speed, t.fs)+"s linear 0 infinite";Main problem I had with implementing this was pausing the game - even if main loop stops, CSS engine still animates the keyframes. So I just set '0' for the -webkit-animaition-duration parameter:
'off': function(){
MB_Stop();
if (MB_usingCSSAnimations){
var i = MB_elements.length;
for (;i--;){
if (MB_elements[i].image)
MB_elements[i].image.style.webkitAnimationDuration = 0;
}
}
};
It sucks but it works. Anyone know better solution?
Next step is to provide support of webkitAnimationIterations for iteration's callbacks (now it is calculated using JavaScript, not with the events, but contrary to what I thought webkit has already supported DOM events for animation [thanks Askoth]). If you want help feel free and contribute: Mibbu on github. There are also some issues I found creating new features and I have no time to fix it now. If you use Mibbu and have some ideas or found any bugs, write me about it or fork & pull request on Github.
I have just published initial release of Mibbu - my javascript microframework for fast game prototyping. To be honest - it is just set of functions and patterns I use always when I write my games. It is more a sandbox, starting place with basic tools, than a real framework (that's why I called it 'microframework'). It provides sprite animations, basic operations like movement or collisions, scrolling backgrounds and drawing on both - canvas or DOM. It uses DOM only when it is not possible to use Canvas (like in older IEs), but you can force it to do so with one single function (canvasOff()) - then it will be drawn with divs & imgs. It is the same mechanics I have used in OpenOdyssey or Janpu. I will try to write something more about using Mibbu later this week.
That post has nothing in common with programming or even computers but I was so excited when I discover things I want to write about that 140 chars of twitter wasn't enough for me. 
First was Robert Tomaszewski from Hypermedia Isobar with his presentation about different context of calling Js structures. He started with a little of JS history, then explained basics of using 'this' depending on placement of the objects and different approaches of using 'this' in DOM events.
Next was Marek Stepień - lead of Aviary.pl, team of programmers and translators localizing open source software for Polish users. He started with review of past JS objects, its restrictions and methods of its elimination. Then he presented new methods of creating objects in Js 1.8.5 like defineProperty() etc. 
After the break there were a little contest - I won weekend stay in Karpacz for my implementation of adding function (Thanks!:) ). Just after that Tomasz Tunik talked about his Einie framework. He showed a lot of cool examples (like mouse tracking and interactions with canvas objects, or Pew! Pew! Towers, game created in 48h by Thomas and Szymon Pilkowski on HTML5gameJam in Paris. All of that examples are published on Einie's site so don't hesitate to check it.
I will try to write some summary of that period later this week or at the beginning of the next one. For sure one of the best things I wrote about was my HTML5 Canvas Game Tutorial, one of the most popular in all over the web, but there were also other posts I would like to remind.
Safari and some of mobile browsers cannot animate any element with CSS3 animation if there is no '0%' and '100%' step.That's why example from Paul's blog didn't want to work when I test them:
@-webkit-keyframes 'animationName' {
0% { background-position: 0px 0px; }
12.5% { background-position: -128px 0px; }
25% { background-position: -256px 0px; }
37.5% { background-position: -384px 0px; }
50% { background-position: -512px 0px; }
62.5% { background-position: -640px 0px; }
75% { background-position: -768px 0px; }
87.5% { background-position: -896px 0px; }
}Adding the last frame, with the same parameters as the first one, fixes the problem:@-webkit-keyframes 'animationName' {
0% { background-position: 0px 0px; }
12.5% { background-position: -128px 0px; }
25% { background-position: -256px 0px; }
37.5% { background-position: -384px 0px; }
50% { background-position: -512px 0px; }
62.5% { background-position: -640px 0px; }
75% { background-position: -768px 0px; }
87.5% { background-position: -896px 0px; }
100% { background-position: 0px 0px; }
}Of course I didn't want to show that Paul and other guys was wrong - for sure all of them has bigger experience and knowledge than me. And their solutions will eventually work when browsers will implement the standards (what was the point I supposed) - but I was looking for something what will work here and now.
Generator created in previous example was able only to create integer numbers from zero to the given maximum (2^50) using provided seed. But in most cases we need random numbers from some range, so lets modify previous example and add 'min' and 'max' arguments to the .next() method. Also, to make it more like the native Math.rand(), let's make it generating floats from 0 to 1.var CustomRandom = function(nseed) {
var seed,
constant = Math.pow(2, 13)+1,
prime = 1987,
//any prime number, needed for calculations, 1987 is my favorite:)
maximum = 1000;
//maximum number needed for calculation the float precision of the numbers (10^n where n is number of digits after dot)
if (nseed) {
seed = nseed;
}
if (seed == null) {
//before you will correct me in this comparison, read Andrea Giammarchi's text about coercion http://goo.gl/N4jCB
seed = (new Date()).getTime();
//if there is no seed, use timestamp
}
return {
next : function(min, max) {
seed *= constant;
seed += prime;
return min && max ? min+seed%maximum/maximum*(max-min) : seed%maximum/maximum;
// if 'min' and 'max' are not provided, return random number between 0 & 1
}
}
} Now its easy to use it in such a way:var rng = CustomRandom(23);
//use '23' as a seed
rng.next(); // 0.426
rng.next(); // 0.205
In the next part I will show some GameDev related examples of using Random Number Generators with custom seeds.
Introduction
Generating pseudorandom sequences of numbers has wide variety of uses, ranging from creating random maps for games (with well constructed map generator all the game should remember is just the initial seed, not the array with list of map elements), to steganography, where you code & decode message on the sample image using the same seed (it is impossible to decode the information from the image without knowing exact number used as seed during coding it). I will create some examples in the next part of the series. var CustomRandom = function(nseed) {
var seed,
constant = Math.pow(2, 13)+1,
prime = 37,
maximum = Math.pow(2, 50);
if (nseed) {
seed = nseed;
}
if (seed == null) {
//if there is no seed, use timestamp
seed = (new Date()).getTime();
}
return {
next : function() {
seed *= constant;
seed += prime;
seed %= maximum;
return seed;
}
}
}And now:var rng = CustomRandom(23);
//use '23' as a seed
rng.next(); //188476
rng.next(); //1544183905
rng.next(); //12651498733702In the next parts I will extend that CustomRandom() generator with limits (min and max value) and implement some real-life use cases.
//in this way calculators implements square roots:
var ownSqrt = function(number) {
return Math.exp(Math.log(number)/2);
}
But if it is forbidden to use Javascript Math object constants at all, the best way is to use approximation like this:var ownSqrt2 = function(number) {
var x = number;
while (Math.abs(x*x-number) > 0.001) x = (x*x+number)/(2*x);
return x;
}
There are a lot of different algorithms on Wiki, and their implementations all over the Web.
using 'non open' technologies like flash or Unity. Finally, there are 124 chosen titles in the gallery. Checking almost every game I found couple of technologies, libraries, plugins, frameworks or engines I've never heard of before, or just forgot about. Some of them are worth describing in here. First of all I totally forgot about HTML5 Boilerplate, an "HTML/CSS/JS template for a fast, robust and future-proof site", used in Snake game [MGO2010]. Another technically interesting entry was Black Obelisk [MGO2010], written completely in haXe, opensource programming language with ability to compile to Javascript, Flash, NekoVM bytecode, PHP, C++ and C# or Java in the near future. 
Couple of games was written in Java with cross-compiled JavaScript presentation layer using GWT, eg SVG-EDU [MGO2010] or Zulu [MGO2010]. Main reason people used Flash in their games was enabling sound effects (like Sinuous [MGO2010], the winner of 10kApart). But Wizard Wars [MGO2010] used SoundManager2 to achieve same effect. Mad Tanks TD [MGO2010], one of my personal favorites in the competition, uses LESS, which "extends CSS with variables, mixins, operations and nested rules". Looks cool! (both, the game and the compiler:) ). I was impressed with amount of WebGL based games. In Red shooting Hood [MGO2010], made by Tymon Zgaiński from Poland, member of polish gameDev community Warsztat, I found Sylvester, "Vector and Matrix math for JavaScript". Open web implementation of simple and well known Frogger [MGO2010] was compiled to Javascript & canvas using Ristretto Mobile, "a Web-based Compiler for Running Interactive Games and Simulations". My own entry, OpenOdyssey [MGO2010]was made simultaneous with Mibbu framework and is based on it. I'm not satisfied with the final result, but I will develop both after the competition. If I will find some free time during the weekend I will write few words about OO & Mibbu.
var check = function(input) {
var result = 0,
max = Math.sqrt(input/2);
if(Math.sqrt(input)%1==0) {
result++;
}
for(i=1;i <= max;i++) {
if(Math.sqrt((input-Math.pow(i, 2)))%1==0) {
result++;
}
}
return result;
}
var MainFunction = function(args) {
var a = readFile(args).split("\n");
for (var i=1, j=a.length;i < j ;i++) {
print(check(a[i]));
}
}(arguments);
standard I/O is the worst thing programming languages could ever implement. Fortunately - Javascript has no input at all. And in most cases it doesn't need any - it was designed as script language for web pages. But nowadays we use Javascript in any other aspects of our programming life - we can build for desktops using XUL, server-side tools like node.js (for example with announced last week JSPP) or any other Server-side Javascript implemenation provide JS backend for the web, native mobile apps could be created using frameworks like Phonegap. So what about executing JS scripts from command line? And why do we need it?
Array.prototype.binSearch = function(element) {
var element = parseInt(element, 10),
left = 0,
right = this.length-1,
middle = ~~((left+right)/2),
lastMiddle;
while (parseInt(this[middle], 10) !== element) {
if (lastMiddle === middle) {
return null; //nothing found, break
}
if (parseInt(this[middle], 10) < element)
left = middle++;
else
right = middle--;
lastMiddle = middle;
middle = Math.round((left+right)/2);
}
return middle; //index of found element
}
var MainFunction = function(args) {
var a = readFile(args).split("\n"),
arrayElement = a[0].split(" "),
result;
print("Array: "+arrayElement);
for (var i=1, j=a.length;i < j;i++) {
result = arrayElement.binSearch(a[i]);
if (result)
print("Element "+parseInt(a[i], 10)+" in on position nr "+result);
else
print("Element "+parseInt(a[i], 10)+" cannot be found in the array");
}
}(arguments)
As an input it takes filename with the elements of an array in first row and elements to find in that array in next rows, like this:4 10 12 19 25 34 41 50 52 61 66 68 76 81 82 85 94 97 105 112 115 124 128 138 139 230 321 432 456 540 61 82 94 2 10 4 24 432Assuming that script file is called binSearch.js, data.txt is the file with input data, and both are in the same directory as Rhino, to run the script simply type
java -jar js.jar binSearch.js data.txt
Ideone
You can simply achieve the same effect using online tools\, without installing anything on your computer. Ideone, online IDE & debugging tool allows you to run your scripts using Rhino or SpiderMonkey, another Mozilla's JS engine, this one written in C. You can edit your scripts in realtime and provide different inputs on every run.
Good luck in FBHC!