今回の記事ではCSSを使ったゾンビエスケープを初心者でも簡単に作れる方法を5つ紹介します。
サンプルコードや応用例も一緒に学んで、あなたもCSSでゾンビエスケープを作成しましょう！
●方法1：CSSアニメーションでゾンビを動かす
まずは、ゾンビキャラクターをCSSアニメーションで動かしてみましょう。
次のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html>
<head>
<style>
.zombie {
width: 100px;
height: 100px;
background-image: url('zombie.png');
position: absolute;
animation: move 4s linear infinite;
}
@keyframes move {
0% { left: 0; }
100% { left: 100%; }
}
</style>
</head>
<body>
<div class="zombie"></div>
</body>
</html>
<!-- zombie.pngは適宜ご自身の動かしたいキャラクターの画像に差し替えて使えます！ -->このコードでは、ゾンビの画像を背景に持つdiv要素を作成し、アニメーションで左から右へ移動させています。
●方法2：ゾンビのスピードを変化させる
ゾンビのスピードを変化させることで、エスケープがよりリアルになります。
次のサンプルコードを参考にしてください。
<style>
.zombie.fast {
animation-duration: 2s;
}
.zombie.slow {
animation-duration: 6s;
}
</style>このコードでは、新たに”fast”と”slow”のクラスを追加し、アニメーションのdurationを変更しています。
ゾンビにこれらのクラスを追加することで、スピードが変化します。
●方法3：エスケープエリアを作成する
次に、ゾンビから逃げるエスケープエリアを作成しましょう。
次のサンプルコードを参考にしてください。
<style>
.escape-area {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
</style>このコードでは、エスケープエリアとして緑色の正方形を画面右上に配置しています。
プレイヤーがこのエリアに到達すれば、ゾンビから無事に逃げることができます。
●方法4：ゾンビとプレイヤーの衝突判定
ゾンビとプレイヤーが衝突した場合、ゲームオーバーとなります。
次のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html>
<head>
<style>
/* 以前のスタイル定義を省略 */
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const zombie = document.querySelector('.zombie');
const player = document.querySelector('.player');
setInterval(function() {
const zombieRect = zombie.getBoundingClientRect();
const playerRect = player.getBoundingClientRect();
if (zombieRect.left < playerRect.right &&
zombieRect.right > playerRect.left &&
zombieRect.top < playerRect.bottom &&
zombieRect.bottom > playerRect.top) {
alert('ゲームオーバー！');
}
}, 100);
});
</script>
</head>
<body>
<div class="zombie"></div>
<div class="player"></div>
<div class="escape-area"></div>
</body>
</html>このコードでは、JavaScriptを使ってゾンビとプレイヤーの衝突判定を行っています。
衝突した場合はアラートで「ゲームオーバー！」と表示されます。
●方法5：プレイヤーがエスケープエリアに到達した場合の処理
最後に、プレイヤーがエスケープエリアに到達した場合の処理を追加しましょう。
次のサンプルコードを参考にしてください。
<script>
/* 以前のスクリプトを省略 */
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') {
player.style.left = parseInt(player.style.left || 0) + 10 + 'px';
}
const playerRect = player.getBoundingClientRect();
const escapeAreaRect = document.querySelector('.escape-area').getBoundingClientRect();
if (playerRect.left < escapeAreaRect.right &&
playerRect.right > escapeAreaRect.left &&
playerRect.top < escapeAreaRect.bottom &&
playerRect.bottom > escapeAreaRect.top) {
alert('脱出成功！');
}
});
</script>このコードでは、矢印キーでプレイヤーが動くようにしています。
プレイヤーがエスケープエリアに到達した場合、「脱出成功！」とアラートで表示されます。
以上で、CSSを使ったゾンビエスケープの基本的な作り方が完成しました。
これらの方法を応用して、さらにリッチなゾンビエスケープゲームを作成することができます。
●応用例1：複数のゾンビを追加する
ゲームをより面白くするために、複数のゾンビを追加してみましょう。
次のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html>
<head>
<style>
/* 以前のスタイル定義を省略 */
</style>
</head>
<body>
<div class="zombie"></div>
<div class="zombie fast"></div>
<div class="zombie slow"></div>
<div class="player"></div>
<div class="escape-area"></div>
<script>
/* 以前のスクリプトを省略 */
</script>
</body>
</html>このコードでは、3つのゾンビが登場し、それぞれ異なる速度で移動します。
プレイヤーはこれらのゾンビを避けながらエスケープエリアを目指します。
●応用例2：オブジェクトを配置して障害物にする
ゲームの難易度を上げるために、オブジェクトを配置して障害物にしてみましょう。
次のサンプルコードを参考にしてください。
<style>
/* 以前のスタイル定義を省略 */
.obstacle {
width: 50px;
height: 50px;
background-color: brown;
position: absolute;
}
</style>このコードでは、オブジェクトとして森色の正方形を定義しています。
これをゲーム画面に配置することで、プレイヤーは障害物を避けながら進む必要があります。
まとめ
この記事では、CSSを使ったゾンビエスケープの作り方、使い方、対処法を5つの方法とサンプルコードで解説しました。
また、応用例とサンプルコードも紹介しました。
これらを参考にして、あなたもオリジナルのゾンビエスケープゲームを作成してみてください。
最初は難しいかもしれませんが、少しずつ慣れていくことで、楽しくゲーム作成ができるようになります。
ステージの作成、調整などでお困りなことなどありましたらお気軽にお問い合わせください！
その他の質問もお待ちしております。
