ちょっとGeminiにブログでも遊べるゲームって作れるかどうか質問したところ、本格的なのは難しいとの事だったので、簡易版でどこまで出来るかテストしてみました。
黄色い●を動かして・を食べていくだけのものです。
操作方法はテンキー
・8 → 上
・2 → 下
・4 → 左
・6 → 右
動かすにはゲーム画面中の黒い画面を1度クリックしてください。
とまあ、こんな感じでまだまだゲームとしては物足りなすぎますが、頑張ればもっとゲームっぽく作れます。
作ってみたい！
作りたい時はGeminiにHTMLやJavaScriptで◯◯のゲームっぽいのは作れる？
と言ってみればある程度説明してくれるので、あとは自分でどういう風にしたいか？というのをその都度Geminiに追加で言ってください。
ちなみに今回のゲームのプログラムコードは以下の青い文字ですので、以下を改造して遊んでみるのもありかも？
<style>
#game-container {
position: relative;
width: 300px;
height: 300px;
background-color: #000;
border: 2px solid #fff;
overflow: hidden;
}
.player {
position: absolute;
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
transition: left 0.1s, top 0.1s;
}
.food {
position: absolute;
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
}
.wall {
position: absolute;
background-color: #333;
}
#score-display {
text-align: center;
font-family: monospace;
font-size: 20px;
color: black;
padding: 10px;
}
</style>
<div id="score-display">Score: 0</div>
<div id="game-container">
<div id="player" class="player"></div>
<div> </div>
<div class="wall" style="left: 80px; top: 0; width: 20px; height: 150px;"> </div>
<div class="wall" style="left: 150px; top: 150px; width: 100px; height: 20px;"> </div>
</div>
<p>
<script>
const player = document.getElementById('player');
const gameContainer = document.getElementById('game-container');
const scoreDisplay = document.getElementById('score-display');
const walls = document.querySelectorAll('.wall');
const step = 5;
let playerX = 0;
let playerY = 0;
let score = 0;
// プレイヤーの初期位置を設定
player.style.left = playerX + 'px';
player.style.top = playerY + 'px';
// 当たり判定関数
function checkCollision(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
return !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
}
// 食べ物をランダムに10個配置
const foodCount = 10;
const foodSize = 5;
const containerWidth = gameContainer.offsetWidth;
const containerHeight = gameContainer.offsetHeight;
for (let i = 0; i < foodCount; i++) {
let food;
let isColliding;
// 壁と重ならない位置が見つかるまでループ
do {
isColliding = false;
food = document.createElement('div');
food.className = 'food';
const foodX = Math.floor(Math.random() * (containerWidth - foodSize));
const foodY = Math.floor(Math.random() * (containerHeight - foodSize));
food.style.left = foodX + 'px';
food.style.top = foodY + 'px';
for (const wall of walls) {
if (checkCollision(food, wall)) {
isColliding = true;
break;
}
}
} while (isColliding);
gameContainer.appendChild(food);
}
document.addEventListener('keydown', (e) => {
let newX = playerX;
let newY = playerY;
switch (e.key) {
case '8':
newY -= step;
break;
case '2':
newY += step;
break;
case '4':
newX -= step;
break;
case '6':
newX += step;
break;
default:
return;
}
e.preventDefault();
// 移動先の位置を計算
const tempPlayerRect = {
left: newX,
right: newX + player.offsetWidth,
top: newY,
bottom: newY + player.offsetHeight
};
let isCollidingWithWall = false;
for (const wall of walls) {
const wallRect = wall.getBoundingClientRect();
if (
tempPlayerRect.right > wallRect.left &&
tempPlayerRect.left < wallRect.right &&
tempPlayerRect.bottom > wallRect.top &&
tempPlayerRect.top < wallRect.bottom
) {
isCollidingWithWall = true;
break;
}
}
if (!isCollidingWithWall &&
newX >= 0 && newX <= gameContainer.offsetWidth - player.offsetWidth &&
newY >= 0 && newY <= gameContainer.offsetHeight - player.offsetHeight) {
playerX = newX;
playerY = newY;
}
player.style.left = playerX + 'px';
player.style.top = playerY + 'px';
const foods = document.querySelectorAll('.food');
const playerRect = player.getBoundingClientRect();
foods.forEach(food => {
if (food.style.display !== 'none') {
const foodRect = food.getBoundingClientRect();
if (
playerRect.x < foodRect.x + foodRect.width &&
playerRect.x + playerRect.width > foodRect.x &&
playerRect.y < foodRect.y + foodRect.height &&
playerRect.y + playerRect.height > foodRect.y
) {
food.style.display = 'none';
score += 10;
scoreDisplay.textContent = `Score: ${score}`;
}
}
});
});
</script>
