JavascriptとCanvasを利用したゲームの作成
要件としては以下の通りです。
図1: 初期表示
図2: 1枚目を選択
図3: 2枚目を選択
図4: ゲームクリア
HTMLファイルの作成
まずは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要素非対応の環境に向け代替メッセージを表示します。
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
