タイトル画面をクリックする
タイトル画面をクリックする
それでは、jQueryを使ったJavaScriptのコードを書いて、ゲームらしくタイトル画面(図2)がクリックされたらゲーム開始してみましょう。ここでは、まだ背景色が変わるだけです。
pc.cssをコーディングする
「css/pc.css」を新規作成します。CSSはタグを装飾などするスタイルシートです。CSSの書式についても「WebGPUではじめる3DCGアニメーション入門」の第2回を参考にしてください。
・サンプルコード「css」→「pc.css」ファイル* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
-ms-user-drag: none;
}
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
h1 {
position: fixed;
width: 100%;
text-align: center;
top: 35%;
font-size: 400%;
}
#main {
width: 100%;
height: 100%;
}
.color {
position: fixed;
}
.images {
display: none;
}タイトル画像をクリック判定する
「js/main.js」ファイルを新規作成します。タイトル画像をクリックしたらゲーム開始の音声を再生し、真っ白以外のランダムな背景色になります。JavaScriptの文法については「WebGPUではじめる3DCGアニメーション入門」の第2回を参考にしてください。jQueryについては【サンプルコードの解説】を見てください。
・サンプルコード「js」→「main.js」ファイル$(function() {
var _stage = 2;
var _audio = $("audio").get();
for ( i = 0; i < _audio.length; i++ ) _audio[i].load();
function init() {
var rgb = [0,0,0];
$('#main').empty();
while ( rgb[0] == rgb[1] ) {
rgb = [~~(Math.random()*_stage),~~(Math.random()*_stage),~~(Math.random()*_stage)];
}
setBgColor(rgb);
}
function setBgColor(rgb) {
var max = (rgb[0]<rgb[1])?((rgb[1]<rgb[2])?2:1):((rgb[0]<rgb[2])?2:0);
var color = 'rgb(0, 0, 0)';
if ( rgb[max] != 0 ) {
var i = 255/rgb[max];
color = 'rgb('+~~(i*rgb[0])+','+~~(i*rgb[1])+','+~~(i*rgb[2])+')'
if ( rgb[0] == rgb[1] && rgb[0] == rgb[2] ) {
_stage++;
$('h1').html('<img src="images/StageClear.png" />');
playAudio(2);
start();
}
}
$('body').css('background-color',color);
}
function start() {
$('h1').off().on('click',function() {
playAudio(0);
$(this).empty();
init();
});
}
function playAudio(mp3) {
try {
_audio[mp3].currentTime = 0;
_audio[mp3].play();
} catch (e) {
_audio[mp3].play();
}
}
start();
});【サンプルコードの解説】
jQueryの「$(function() { })」は、DOM(HTMLの読み込み)が完了したら、この中の処理を実行します。
「_stage」変数は2が第1面(ステージ)になります。
「_audio」変数に後に出てくるHTML5のaudioタグを配列として取得し、プリロードします。
「init」関数で「#main」セレクタをjQueryで空(から)にし、背景色の「rgb」変数をランダムな色に作成します。(R,G,B)は正の整数です。
「setBgColor」関数で「rgb」引数を元に背景色を決めます。(R,G,B)で最も大きい色を「max」変数に取得し、255をその色の要素の値で除算して「i」変数に代入し、rgb(R,G,B)の3色にiを乗算してそれぞれ0～255の値になるようにして「color」変数に代入します。背景色が真っ白になったらステージクリア処理します。「body」タグのスタイルシート(CSS)の'background-color'プロパティにcolor変数をjQueryで指定します。
「start」関数でh1タグが'click'されたかjQueryでイベントリスナーを登録し、クリックされたらサウンドを再生し、タイトル画面を消してinit関数を呼んで初期化し、ステージを開始します。
「playAudio」関数でaudioタグのサウンドを頭出しして再生します。
変数の初期化後、jQueryコードは「start();」でstart関数を呼び出すことから開始します。
index.htmlファイルをコーディングする
次のサンプルコードをコーディングしたらブラウザでindex.htmlファイルを開き、Colorゲームを開始します。タイトル画像をクリックできましたね。
audioタグはJavaScriptの「for ( i = 0; i < _audio.length; i++ ) _audio[i].load();」で、「#audioGameStart」の上から順に0、1、2、3インデックスになります。
・サンプルコード「index.html」ファイル<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<TITLE>カラーゲーム「Color」</TITLE>
<link href="css/pc.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="./js/main.js"></script>
</head>
<body>
<div id="main"></div>
<h1><img src="images/Title.png" /></h1>
<audio id="audioGameStart">
<source src="sounds/GameStart.mp3" />
<source src="sounds/GameStart.ogg" />
</audio>
<audio id="audioGameOver">
<source src="sounds/GameOver.mp3" />
<source src="sounds/GameOver.ogg" />
</audio>
<audio id="audioStageClear">
<source src="sounds/StageClear.mp3" />
<source src="sounds/StageClear.ogg" />
</audio>
<audio id="audioMix">
<source src="sounds/Mix.mp3" />
<source src="sounds/Mix.ogg" />
</audio>
</body>
</html>単なるプログラマーより、サイバー攻撃を守る側のホワイトハッカーの方が平均年収が高いそうですね。ホワイトハッカーのトップは年収数十億円だそうです。でも僕は自分さえ守れません…。
- この記事のキーワード
バックナンバー
この記事の筆者
筆者の人気記事
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
