JavaScriptは、世界中のパソコンやスマホ、3DSやPS4などゲーム機など、ブラウザ上で動くプログラミング言語。 WebサイトをつくるHTMLと合わせて使うことで、世界中に使ってもらえる作品がつくれちゃいます！
こちら1〜15までをすばやくタップするゲーム「fifteen」
「fifteen」 6秒切れたらすごい！！
とりあえずやってみたいのはゲームですよね？テキストエディタ（わからなければ検索！）で、こちらのコードを打ち込んで（コピペ厳禁）、fifteen.html として保存（文字コードはutf-8）、ブラウザで開いてみましょう。
こんなに打つのはしんどい・・・と思う人は、JavaScriptへ進むのはまだ早いです。IchigoJamで、タイピングゲームをつくって、楽しく打てるようになっておきましょう。
検索しながらとかめんどい・・・と思う人は、教えてもらっている間は半人前と心得ましょう。
<!DOCTYPE html><html><head><meta charset='utf-8'/> <title>fifteen</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta property="og:image" content="https://fukuno.jig.jp/app/game/fifteen.jpg"> <link rel="apple-touch-icon" href="https://fukuno.jig.jp/app/game/fifteen.png"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"> <script src='https://fukuno.jig.jp/app/game/lib/fukuno.js'></script> <script>"use strict"; window.onload = function() { var ncircle = 15; var c = get("canvas"); var g = getContext(c); setUI(c); var state = 0; var circle = []; var nextcircle = 0; var fastestt = 15; var startt; g.draw = function() { g.setColor(255, 255, 255); g.fillRect(0, 0, g.cw, g.ch); if (state == 0) { g.setColor(0, 0, 0); g.fillTextCenter("fifteen", g.cw / 2, g.ch / 2, 80); g.fillTextCenter("tap to start", g.cw / 2, g.ch / 2 + 80, 40); } else if (state == 1) { for (var i = ncircle - 1; i >= nextcircle; i--) { var c = circle[i]; g.setColor(255, 255, 255); g.fillCircle(c.x, c.y, c.r + 2); g.setColor(c.col[0], c.col[1], c.col[2]); g.fillCircle(c.x, c.y, c.r); g.setColor(80, 80, 80); g.fillTextCenter(i + 1, c.x, c.y, 40); } } else if (state == 2) { g.setColor(0, 0, 0); g.fillTextCenter("clear!", g.cw / 2, g.ch / 2, 80); var dt = (new Date().getTime() - startt) / 1000; g.fillTextCenter("time: " + fixfloat(dt, 3) + "s", g.cw / 2, g.ch / 2 + 80, 40); if (dt < fastestt) { fastestt = dt; g.fillTextCenter("fastest!", g.cw / 2, g.ch / 2 + 160, 40); } else { g.fillTextCenter("fastest: " + fixfloat(fastestt, 3) + "s", g.cw / 2, g.ch / 2 + 160, 40); } } }; c.onuidown = function(x, y) { if (state == 0) { for (var i = 0; i < ncircle; i++) { var off = 0.1; var c = { x: rnd(g.cw * (1 - off * 2)) + g.cw * off, y: rnd(g.ch * (1 - off * 2)) + g.ch * off, r: 70, col: hsv2rgb(rnd(100), .3, 1) }; circle[i] = c; } nextcircle = 0; startt = new Date().getTime(); state = 1; g.draw(); } else if (state == 1) { var c = circle[nextcircle]; var dx = x - c.x; var dy = y - c.y; if (Math.sqrt(dx * dx + dy * dy) < c.r) { nextcircle++; if (nextcircle == ncircle) { state = 2; } g.draw(); } } else if (state == 2) { state = 0; g.draw(); } }; g.init(); }; </script> <style> body { background: white; text-align: center; } h1 { color: #222; font-size: 140%; text-align: center; display: none; } #canvas { display: inline-block; width: 320px; height: 320px; } #credit { text-align: center; font-size: 12px; } #credit a { color: gray !important; } </style> </head> <body> <h1>fifteen</h1> <canvas id="canvas"></canvas><br> <div id='credit'> <a href='https://fukuno.jig.jp/2012/'>CC BY fukuno.jig.jp</a></div> </div> </body> </html>
・ざっくり解説
!DOCTYPE html がHTML5の証。
apple-mobile〜 は、ホーム画面に追加した時、iPhone/iPadで普通のアプリみたいにフルスクリーンになります。
og:image はfacebookなどでサムネイルに使われる画像
apple-touch-icon は、ホーム画面に追加した時のアイコン
viewport で、スマホ用の画面設定
fukuno.js は、便利なライブラリ、気になったらダウンロードして中身を読んでみましょう
"use strict" で、変数を宣言せずに使えなくしてわかりにくいバグを防ぎます
window.onload が最初に動き出すところ
中身は画面を表示する g.draw と、タップしたときに呼ばれる c.onuidown のふたつだけ
変数 state で、ゲームはじまる前、ゲーム中、ゲームオーバー画面を管理
style は、スタイルシートといって画面内の表示を整えるCSSを使います
body の中にHTMLの本文を書いてできあがり！
・やってみよう！
15までじゃなくて20までにするには？
色を全部赤にするには？
丸の大きさをランダムに変えるには？
タップしたところに丸を表示するプログラムをつくってみよう！
オリジナルスマホゲームをつくってみよう！
Fri Night
