JavaScript デモを作るコンテスト「JS1K」

スラド

1位の「Legend Of The Bouncing Beholder」の解説

使われてるテクニックのメモ

1. 全体構造

setInterval(function(){
 ....
},unit);

onkeydown=onkeyup=function(e){
 ....
}

プログラムの基本構造は、定期的呼ばれるメイン処理と、キー入力時（キーダウン）に呼ばれる処理の２つで出来ている。キー入力の方は、自キャラのy座標が上に上るか下に落ちるかを決めるjump変数と、横移動量を決めるspeed_x変数を設定する。これら変数の参照は、setInterval()で呼ばれる関数内。

2. 描画

    A=function(color,x,y,radius){
      // a is the abbreviated form of arc
      radius&&a(x,y,radius,0,7,0);
      // if color is not a gradient object (we set a P property in gradient objects), it is an index
      // into a set of colors
      fillStyle=color.P?color:'#'+'ceff99ff78f86eeaaffffd45333'.substr(color*3,3);
      // f for fill, ba for beginPath
      f(); ba();
    };

画面上のいろんなオブジェクト（背景の虹、雲、自キャラ、等）を描いてる関数。HTML5のCanvasのarcを使ってるもよう。a()がarc(), f()がfill(), ba()がbeginPath()の省略形として使っている。ここ以外でもm=moveto, qt=quadraticCurveTo,等、省略形を多用している。

// The abbreviation loop, initializing the variabled needed by the key-handlers on the side.
for(prop in context=canvas.getContext('2d'))
  context[prop[jump=speed_x=speed_y=0]+(prop[6]||'')]=context[prop];

例えば、beginPathなら、0番目(=b)と6番目(=a)の"ba"をbeginPathとして登録している

3.　XORによる数値比較

 e=e.keyCode;
 // give jump a truthy value if up was pressed, falsy if up was released
 jump=e^38?jump:new_val;

キーコードが38ならnew_val、そうでないならjump、というif文をXORと条件演算子で実現している