要件としては以下の通りです。
図1: 初期表示
図2: 1枚目を選択
図3: 2枚目を選択
図4: ゲームクリア
まずはmemory.htmlを用意します。
memory.htmlの<head>タグ内の定義は以下のようになります。
<head> <meta charset="UTF-8" /> <title>神経衰弱ゲーム</title> <script type="text/javascript" src="./js/memory.js"></script> <!--[if lte IE 8.0]> <script type="text/javascript" src="./js/excanvas.js"></script> <![endif]--> <style> :root { background-color: #cccccc; } h1 { color: #0b305f; margin-top: 2em; text-align: center; font-size:36px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } canvas { display: block; margin: auto; } </style> </head>
今回のゲームで利用するJavaScript、memory.jsをロードしています。
また、Canvas要素を利用する為、InternetExplorerのバージョン8以下でも対応できるようexcanvas.jsをロードします。
また、ページ全体の背景色をCSS3セレクタである":root"を利用して定義しています。
memory.htmlの
タグ内の記述はこのようになります。<body onload="init();"> <h1>神経衰弱</h1> <canvas id="canvas" width="900" height="600"> お使いのブラウザはHTML5のCanvas要素に対応していません。 </canvas> </body>
ページ読み込み時にinitメソッドがロードされるよう定義します。
横900px、縦600pxのCanvasを定義し、Canvas要素非対応の環境に向け代替メッセージを表示します。