ユーザーID パスワード

技術情報

  • FAQ よくある質問
  • 個人ユーザー向けサービスのお手続きについて
  • M2Mソリューション
  • (PR)FAQを利用してお問い合わせコスト削減

コード&コラム Web編 〜実践!HTML5〜

第4章 神経衰弱ゲーム

1 |2 |3 次へ

JavascriptとCanvasを利用したゲームの作成

要件としては以下の通りです。

  • Canvas機能を用いて5枚のカードを2列表示させる。
  • 1枚ずつクリック(タップ)することでカードをめくることができる。
  • 1枚目と2枚目がマッチしてペアとなったカードは表を向いたままとする。
  • 全てのペアが揃った時点でクリアとなり、クリアにかかった時間が表示される。

図1

図1: 初期表示

図2

図2: 1枚目を選択

図3

図3: 2枚目を選択

図4

図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章
Audio/Video

第2章
Canvas

第3章
Photo Gallery

第4章
神経衰弱ゲーム