網頁
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<title>健康小精靈遊戲</title>
<style>
#gameArea {
width: 600px;
height: 400px;
border: 1px solid black;
position: relative;
}
.sprite {
width: 50px;
height: 50px;
position: absolute;
}
.food {
width: 20px;
height: 20px;
position: absolute;
background-color: green; /* 健康食物 */
}
.unhealthy {
background-color: red; /* 不健康食物 */
}
</style>
</head>
<body>
<div id="gameArea">
<div id="sprite" class="sprite"></div>
</div>
<script src="game.js"></script>
</body>
</html>
JavaScript (game.js)
document.addEventListener('DOMContentLoaded', () => {
const sprite = document.getElementById('sprite');
let spriteSpeed = 5;
let gameArea = document.getElementById('gameArea');
let gameWidth = gameArea.offsetWidth;
let gameHeight = gameArea.offsetHeight;
function moveSprite(event) {
let x = sprite.offsetLeft;
let y = sprite.offsetTop;
switch (event.key) {
case 'ArrowUp': y -= spriteSpeed; break;
case 'ArrowDown': y += spriteSpeed; break;
case 'ArrowLeft': x -= spriteSpeed; break;
case 'ArrowRight': x += spriteSpeed; break;
}
// 保持小精靈在遊戲區域內
if (x < 0) x = 0;
if (y < 0) y = 0;
if (x > gameWidth - sprite.offsetWidth) x = gameWidth - sprite.offsetWidth;
if (y > gameHeight - sprite.offsetHeight) y = gameHeight - sprite.offsetHeight;
sprite.style.left = x + 'px';
sprite.style.top = y + 'px';
}
// 鍵盤控制
document.addEventListener('keydown', moveSprite);
});
// 這裡您可以添加食物生成的邏輯，以及與食物交互時的效果等。
這個框架提供了一個基本的遊戲區域和一個可以使用鍵盤方向鍵控制移動的小精靈。為了實現您的遊戲概念，您需要進一步開發，例如添加食物元素、碰撞檢測、得分和生命系統、不同的關卡設計等。這需要較為進階的JavaScript編程知識和創造性的遊戲設計。
