ゲームプレイ機能を実装する
要件：
- JavaScript のループと条件分岐に精通していること。
- JavaScript を使って DOM を操作する方法を知っていること。
機能：
- ゲームの核心となるダイナミクスを作成する。
- ゲームオーバーのシナリオを設計する。
- ブロックの作成と移動のメカニズムを実装する。
手順：
- プレイヤーが黒いブロックまたは白いブロックをクリックしたかどうかを確認する。プレイヤーのクリックに基づいてゲーム状態を更新する。
// 黒いブロックまたは白いブロックをクリックしたかどうかを判断する
function judge(ev) {
if (
ev.target.className.indexOf("black") == -1 &&
ev.target.className.indexOf("cell") !== -1
) {
ev.target.parentNode.pass1 = 1; // pass 属性を定義し、この行の白いブロックがクリックされたことを示す
}
if (ev.target.className.indexOf("black") !== -1) {
// クラス名に black が含まれるターゲットをクリックすると、黒いブロックになる
ev.target.className = "cell";
ev.target.parentNode.pass = 1; // pass 属性を定義し、この行の黒いブロックがクリックされたことを示す
score();
}
}
- プレイヤーの操作に基づいてゲームが終了するタイミングを判断する。ゲームが終了したときにゲーム終了アクションをトリガーする。
// ゲームが終了したかどうかを確認する
function over() {
var rows = con.childNodes;
if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
fail();
}
for (let i = 0; i < rows.length; i++) {
if (rows[i].pass1 == 1) {
fail();
}
}
}
// ゲームオーバー
function fail() {
clearInterval(clock);
flag = false;
confirm("最終得点は " + parseInt($("score").innerHTML) + " です");
var con = $("con");
con.innerHTML = "";
$("score").innerHTML = 0;
con.style.top = "-408px";
}
- ゲームプレイ用のブロックの行を生成する。他のブロックの中に「黒い」ブロックをランダムに配置する。
// <div class="row"> とその子要素 <div class="cell"> を作成する
function createrow() {
var con = $("con");
var row = creatediv("row"); // div を作成：className=row
var arr = createcell(); // div cell のクラス名を定義し、その中の 1 つは cell black
con.appendChild(row); // row を子ノードとして con に追加
for (var i = 0; i < 4; i++) {
row.appendChild(creatediv(arr[i])); // row cell の子ノードを追加
}
if (con.firstChild == null) {
con.appendChild(row);
} else {
con.insertBefore(row, con.firstChild);
}
}
// クラス名の配列を作成する; その中の 1 つは "cell black"、他は "cell"
function createcell() {
var temp = ["cell", "cell", "cell", "cell"];
var i = Math.floor(Math.random() * 4); // 黒いブロックの位置をランダムに生成する Math.random() 関数のパラメータは 0~1 の乱数
temp[i] = "cell black";
return temp;
}
- ブロックを連続的に下に移動させる。古い行が画面外に移動したときに削除する。
// 黒いブロックを下に移動させる
function move() {
var con = $("con");
var top = parseInt(window.getComputedStyle(con, null)["top"]);
if (speed + top > 0) {
top = 0;
} else {
top += speed;
}
con.style.top = top + "px"; // 上の値を動かし続けて移動させる
over();
if (top == 0) {
createrow();
con.style.top = "-102px";
delrow();
}
}
// 行を削除する
function delrow() {
var con = $("con");
if (con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
