ゲーム
このゲームは、スマホで遊ぶことを前提にしています。プレイヤーはスマホを傾けて、水中の魚を操作します。目的は、魚を上手に操作して、障害物を避けながらできるだけ長く泳ぎ続けることです。
まず、HTMLファイルには以下のようなコードを書きます。
🐟
これで、背景色が青色になり、画面の下部に魚が表示されます。
次に、JavaScriptで魚の操作や障害物の生成などの処理を記述します。
var fish = document.getElementById("fish");
var screen = document.body.getBoundingClientRect();
// スマホを傾けたときの処理を登録
window.addEventListener("mousemove", function(event) {
var x = event.movementY // スマホの傾きを取得
var newX = Math.min(Math.max(screen.left, fish.offsetLeft + x), screen.right - fish.offsetWidth); // 新しい魚の位置を計算
fish.style.left = newX + "px"; // 魚の位置を変更
});
// 障害物を生成する関数
function createObstacle() {
var obstacle = document.createElement("div");
obstacle.className = "obstacle";
obstacle.style.left = (screen.right - screen.left - 100) * Math.random() + screen.left + "px";
obstacle.style.top = -200 + "px";
document.body.append(obstacle);
setTimeout(function() {
obstacle.remove();
}, 5000);
}
// 3秒ごとに障害物を生成
setInterval(createObstacle, 3000);
このコードでは、スマホを傾けると、魚の位置が変わるようになっています。また、3秒ごとに障害物が生成され、画面をスクロールして下に向かって移動していきます。
これで、水泳ゲームが完成しました。プレイヤーは、スマホを傾けて魚を操作しながら、障害物を避けて長く泳ぎ続けることができます。可能なら、絵文字を使って、魚や障害物をよりカラフルに表現してみてください。
493
Prev
Script
Back
0
0