みたいですね！では、以下が実際のプログラムになります。
index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>麦わら帽子少年の戦い</title>
<style>
#game {
width: 960px;
height: 480px;
margin: 0 auto;
background-color: #FFF;
position: relative;
}
#player {
width: 48px;
height: 48px;
background-image: url('hat.png');
position: absolute;
bottom: 0;
left: 0;
}
.enemy {
width: 48px;
height: 48px;
background-image: url('enemy.png');
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="game"></div>
<script src="script.js"></script>
</body>
</html>
```
script.js
```javascript
// フィールドの描画
const game = document.getElementById('game');
for (let i = 0; i < 20; i++) {
const grass = document.createElement('div');
grass.style.width = '48px';
grass.style.height = '48px';
grass.style.backgroundImage = 'url("grass.png")';
grass.style.position = 'absolute';
grass.style.bottom = '0';
grass.style.left = `${i * 48}px`;
game.appendChild(grass);
}
const player = document.createElement('div');
player.id = 'player';
game.appendChild(player);
let enemies = [];
// キャラクターの動き
let mouseX = 0;
game.addEventListener('mousemove', (event) => {
mouseX = event.clientX - game.offsetLeft;
});
game.addEventListener('click', () => {
player.classList.add('punch');
setTimeout(() => {
player.classList.remove('punch');
}, 200);
});
function moveCharacter() {
const playerPos = player.offsetLeft;
if (mouseX > playerPos + 24) {
player.style.left = `${playerPos + 4}px`;
} else if (mouseX < playerPos + 24) {
player.style.left = `${playerPos - 4}px`;
}
requestAnimationFrame(moveCharacter);
}
moveCharacter();
// 敵の出現と動き
function createEnemy() {
const enemy = document.createElement('div');
enemy.classList.add('enemy');
enemy.style.left = `${Math.floor(Math.random() * (game.offsetWidth - 48))}px`;
game.appendChild(enemy);
enemies.push(enemy);
setTimeout(createEnemy, Math.floor(Math.random() * 3000) + 1000);
}
createEnemy();
function moveEnemies() {
enemies.forEach((enemy, index) => {
const enemyPos = enemy.offsetLeft;
if (enemyPos + 24 < player.offsetLeft + 24) {
enemy.classList.add('move-right');
} else if (enemyPos + 24 > player.offsetLeft + 24) {
enemy.classList.remove('move-right');
enemy.classList.add('move-left');
}
if (enemyPos > game.offsetWidth) {
enemy.remove();
enemies.splice(index, 1);
}
});
requestAnimationFrame(moveEnemies);
}
moveEnemies();
```
注意点として、evalや他サイトへのリダイレクトは使用していないことにご注意ください。また、alertも使用していません。
それでは楽しんでお試しください！
