大宇宙作戦
普及型宇宙艦「センタープライス」の艦長となり、敵艦クイン号をすべて破壊せよ！
センタープライス座標:
センタープライスエネルギー:
こんにちは、宇宙の冒険者たち！新しいミッションがあなたを待っています。あなたは普及型宇宙艦「センタープライス」の艦長として、敵艦クイン号を全て撃退せよ！ゲームを楽しんで、友人に話したくなるようなエキサイティングな冒険を始めましょう！
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大宇宙作戦</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
#gameStatus { margin-top: 20px; }
#gameBoard { display: grid; grid-template-columns: repeat(8, 30px); grid-gap: 2px; margin: 20px auto; }
.cell { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; }
.S { background-color: blue; color: white; }
.Q { background-color: red; color: white; }
.P { background-color: green; color: white; }
.B { background-color: yellow; color: black; }
button { margin: 5px; }
</style>
</head>
<body>
<h1>大宇宙作戦</h1>
<h2>普及型宇宙艦「センタープライス」の艦長となり、敵艦クイン号をすべて破壊せよ！</h2>
<div id="gameBoard"></div>
<div id="gameStatus">
<p>センタープライス座標: <span id="Scoords"></span></p>
<p>センタープライスエネルギー: <span id="Senergy"></span></p>
</div>
<div id="controls">
<button id="upBtn">↑</button>
<button id="downBtn">↓</button>
<button id="leftBtn">←</button>
<button id="rightBtn">→</button>
</div>
<script>
const gridSize = 8;
let S = { x: 0, y: 0, en: 100 }; // 初期位置とエネルギー
let enemies = [];
let bases = [];
let planets = [];
function initGame() {
S = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize), en: 100 };
placeEntities(enemies, 'Q', 1, 3, 30);
placeEntities(bases, 'B', 1, 2, 10);
placeEntities(planets, 'P', 1, 2, 50);
updateBoard();
updateStatus();
}
function placeEntities(arr, type, minCount, maxCount, en) {
const count = Math.floor(Math.random() * (maxCount - minCount + 1)) + minCount;
for (let i = 0; i < count; i++) {
let pos;
do {
pos = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize), en: en, type: type };
} while (isOccupied(pos.x, pos.y));
arr.push(pos);
}
}
function isOccupied(x, y) {
return (S.x === x && S.y === y) ||
enemies.some(e => e.x === x && e.y === y) ||
bases.some(b => b.x === x && b.y === y) ||
planets.some(p => p.x === x && p.y === y);
}
function updateBoard() {
const board = document.getElementById('gameBoard');
board.innerHTML = '';
for (let y = 0; y < gridSize; y++) {
for (let x = 0; x < gridSize; x++) {
const cell = document.createElement('div');
cell.classList.add('cell');
if (S.x === x && S.y === y) cell.classList.add('S');
else if (enemies.some(e => e.x === x && e.y === y)) cell.classList.add('Q');
else if (bases.some(b => b.x === x && b.y === y)) cell.classList.add('B');
else if (planets.some(p => p.x === x && p.y === y)) cell.classList.add('P');
board.appendChild(cell);
}
}
}
function updateStatus() {
document.getElementById('Scoords').innerText = `(${S.x + 1}, ${S.y + 1})`;
document.getElementById('Senergy').innerText = S.en;
}
function moveS(dx, dy) {
const newX = S.x + dx;
const newY = S.y + dy;
if (newX >= 0 && newX < gridSize && newY >= 0 && newY < gridSize && !isOccupied(newX, newY)) {
S.x = newX;
S.y = newY;
S.en -= 1;
updateBoard();
updateStatus();
// 移動後の処理（攻撃やエネルギー増減）を追加
} else {
alert('無効な移動です。');
}
}
document.getElementById('upBtn').addEventListener('click', () => moveS(0, -1));
document.getElementById('downBtn').addEventListener('click', () => moveS(0, 1));
document.getElementById('leftBtn').addEventListener('click', () => moveS(-1, 0));
document.getElementById('rightBtn').addEventListener('click', () => moveS(1, 0));
initGame();
</script>
</body>
</html>
```