做一個電腦遊戲，一直都是我心中的清單，稱不上是夢想，但就是想要獲得一個作品的成就感，因為我所認知的遊戲很像是一個藝術品，而且必須包含美術、音樂、互動，更重要的是程式碼與邏輯概念，因此，做出一款遊戲簡直就是將自己的所學發揮到極致，對於我這個工程師來說，簡直就是很厲害的人生清單。
我在以前的時候買過一些書籍，看過一些網路影片，甚至有買線上課程，但礙於我的程式底子太弱，我總是卡關在某些地方，動畫、程式、圖層顯示、物件碰撞等等的因素，加上我是三分鐘熱度的人，我的遊戲總是胎死腹中。
後來一次上班無聊，我打開電腦問了問gpt，問說你能否幫我製作一個電腦遊戲，他說ok，並且很簡單依照我的要求做出了一個有戶動感的小程式，開啟了我新的實驗想法。
我給他了一些我的指令:
- topdowm(由上而下)的生存遊戲
- 玩家需要躲避殭屍，玩家被殭屍碰撞會受傷
- 有血條
她就幫我生了一個小程式，我可以使用wasd操作代表著玩家的綠色光點。
遊戲概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Zombie Survival - Multiplayer Fix UI</title>
<style>
body { margin: 0; background: #222; }
canvas { display: block; margin: 0 auto; background: #333; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const keys = {};
const player = {
x: 400,
y: 300,
speed: 2,
size: 20,
color: "#4caf50",
hp: 100,
attackCooldown: 0,
};
let zombies = [];
function movePlayer() {
if (keys["w"] || keys["ArrowUp"]) player.y -= player.speed;
if (keys["s"] || keys["ArrowDown"]) player.y += player.speed;
if (keys["a"] || keys["ArrowLeft"]) player.x -= player.speed;
if (keys["d"] || keys["ArrowRight"]) player.x += player.speed;
}
function updateZombies() {
for (let zombie of zombies) {
const dx = player.x - zombie.x;
const dy = player.y - zombie.y;
const dist = Math.hypot(dx, dy);
zombie.x += (dx / dist) * zombie.speed;
zombie.y += (dy / dist) * zombie.speed;
if (dist < zombie.size + player.size) {
player.hp -= 0.2;
if (player.hp < 0) player.hp = 0;
}
}
}
function spawnZombie() {
const side = Math.floor(Math.random() * 4);
let x, y;
if (side === 0) { x = 0; y = Math.random() * 600; }
else if (side === 1) { x = 800; y = Math.random() * 600; }
else if (side === 2) { x = Math.random() * 800; y = 0; }
else { x = Math.random() * 800; y = 600; }
zombies.push({ x, y, speed: 1.2, size: 20, color: "#e53935", hp: 30 });
}
function drawEntity(entity) {
ctx.fillStyle = entity.color;
ctx.beginPath();
ctx.arc(entity.x, entity.y, entity.size, 0, Math.PI * 2);
ctx.fill();
}
function drawHUD() {
ctx.fillStyle = "white";
ctx.fillRect(20, 20, 104, 14);
ctx.fillStyle = "#f44336";
ctx.fillRect(22, 22, Math.max(player.hp, 0), 10);
ctx.strokeStyle = "white";
ctx.strokeRect(20, 20, 104, 14);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawEntity(player);
for (let zombie of zombies) {
if (zombie.hp > 0) drawEntity(zombie);
}
drawHUD();
if (player.hp <= 0) {
ctx.fillStyle = "rgba(0,0,0,0.7)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.font = "48px sans-serif";
ctx.fillText("Game Over", canvas.width / 2 - 120, canvas.height / 2);
}
}
function gameLoop() {
if (player.hp <= 0) return;
movePlayer();
updateZombies();
if (player.attackCooldown > 0) player.attackCooldown--;
zombies = zombies.filter(z => z.hp > 0);
draw();
requestAnimationFrame(gameLoop);
}
setInterval(spawnZombie, 2000);
window.addEventListener("keydown", e => keys[e.key.toLowerCase()] = true);
window.addEventListener("keyup", e => keys[e.key.toLowerCase()] = false);
gameLoop();
</script>
</body>
</html>
以上是程式碼分享，可以將他貼上 JS Bin (連結:https://jsbin.com/?html,output)，便可體驗程式碼。
而後來在我的測試下，我發現gemini的遊戲程式生成較厲害且目前是免費，可以不斷叫他生成程式碼，以下我將分享我使用gemini生成遊戲的過程，並以版本更新。並期許我最後可以做出可以連線的生存遊戲(本遊戲所參考的是多年前我玩過的starve.io)
