DOM操作だけでできる簡単な番号タッチゲームを作ります。
See the Pen
番号タッチゲーム by いんわん (@inwan78)
on CodePen.
↑↑「0.5×」を押すとサイズが小さくなって遊べます↑↑0から順番に数字をタッチしていくゲームです。
準備するもの
index.html、style.css、script.jsの3つのファイルを作ります。コピペして作ってください。
まずindex.html
<!DOCTYPE HTML> <html> <script src='script.js'></script> <link type='text/css' rel="stylesheet" href='style.css'> <body> <div id="screen"> </div> </body> </html>
次にstyle.css
#screen {
margin :32px auto;
width: 900px;
height: 600px;
border: solid 1px #888;
background-color: #f0f0f0;
user-select: none;
}
script.jsはファイルを作るだけでOKです。
ゲームは<div id=”screen”></div>の中に作っていきます。
cssの内容については細かく解説はしませんがwidthが幅、heightが高さです。ここは作るゲームに合わせて好きなように調整してください。
タッチイベントを作ってみる
取りあえず一つだけ要素を表示してタッチイベントを使って色を変えてみます。
index.htmlの<div id=”screen”></div>のところに
<div id="screen"> <div id="card" class="card"></div> </div>
要素を一つ追加します。
style.cssにもこの要素のデザインを追加
.card {
width: 50%;
height: 100%;
background-color: white;
}
親要素の半分の幅のエリアが白で表示されます。
script.jsにイベントのプログラムを書きます。
window.onload = () => {
const card = document.getElementById("card");
card.addEventListener('pointerdown', function(e){
this.style.backgroundColor = "pink";
}, false);
}
window.onloadはブラウザがページの読み込みが完了したときに自動的に実行される関数です。
document.getElementById()はidで指定された要素を取得できます。取得した要素にaddEventListener()でイベントを付与しています。
pointerdownはマウスのボタンを押したときや、画面をタッチしたときに起こるイベントです。今回は要素をタッチしたときに背景色がピンク色に変わるようになっています。
複数の要素を一度に作る
<div id=”screen”></div>の中身は空に戻してください。
style.cssは
#screen {
margin :32px auto;
width: 780px;
height: 580px;
border: solid 1px #888;
background-color: #f0f0f0;
user-select: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.card {
width: 180px;
height: 180px;
background-color: white;
}
.card p {
margin: 0;
font-size: 120px;
line-height: 180px;
text-align: center;
}
#screenにdisplay:gridというものが追加されてます。gridは要素内のエリアを好きなように分割できる便利なやつです。
それ以外では幅と高さがちょっと変わっています。
script.js
window.onload = () => {
const screen = document.getElementById("screen");
for(let i = 0; i < 12; i++){
const elm = document.createElement('div');
elm.className = "card";
elm.addEventListener('pointerdown', function(){
this.style.backgroundColor = "black";
}, false);
screen.appendChild(elm);
const p = document.createElement('p');
p.innerText = i;
elm.appendChild(p);
}
}
for文を使って要素を一気に追加しています。
ついでに数字を表示するp要素も追加しています。
ランダムに並び替え
数字をランダムに入れ替える処理を追加します。
window.onload = () => {
const max = 12;
const numbers = [];
for(let i = 0; i < max; i++){
numbers[i] = i;
}
for(let i = 0; i < 30; i++){
const j = Math.random() * max | 0;
const k = Math.random() * max | 0;
if(j == k) continue;
let temp = numbers[j];
numbers[j] = numbers[k];
numbers[k] = temp;
}
const screen = document.getElementById("screen");
for(let i = 0; i < max; i++){
const elm = document.createElement('div');
elm.className = "card";
elm.id = numbers[i];
elm.addEventListener('pointerdown', function(){
this.style.backgroundColor = "black";
}, false);
screen.appendChild(elm);
const p = document.createElement('p');
p.innerText = numbers[i];
elm.appendChild(p);
}
}
maxは数字の最大個数です。好きに変更できるように変数にしました。
numbersは順番に数字を入れる配列です。この配列を次のfor文の所でランダムに入替をしています。
間違いチェック
今は順番関係なくタッチすると要素が黒くなります。順番が違っていたら反応しないようにします。
window.onload = () => {
const max = 12;
const numbers = [];
let count = 0;//追加
for(let i = 0; i < max; i++){
numbers[i] = i;
}
for(let i = 0; i < 30; i++){
const j = Math.random() * max | 0;
const k = Math.random() * max | 0;
if(j == k) continue;
let temp = numbers[j];
numbers[j] = numbers[k];
numbers[k] = temp;
}
const screen = document.getElementById("screen");
for(let i = 0; i < max; i++){
const elm = document.createElement('div');
elm.className = "card";
elm.id = numbers[i];
elm.addEventListener('pointerdown', function(){
if(count != this.id)return;//追加
count++;//追加
this.style.backgroundColor = "black";
}, false);
screen.appendChild(elm);
const p = document.createElement('p');
p.innerText = numbers[i];
elm.appendChild(p);
}
}
countという順番をカウントする変数を用意します。数字は0からなのでcountも0です。
pointerdownイベントの所でif分でcountと押した要素のidが同じかチェックします。数字が違った場合はそこでイベントを抜けます。同じだった場合はcountを一つ増やして色を黒に変えます。
おしまい
簡単な作りですがそこそこゲームっぽくできたかと思います。
間違えたときに効果音がなったり、クリアまでの時間を測ったりするとよりゲームっぽさが上がると思います。