使用单个提示创建 HTML5 游戏💙 [GPT3.5]

大家好！你们知道 GPT3.5 有多棒吗？说真的，它的性价比真的很棒。这让我能够为我的游戏引擎创建一个代码生成器。

我在提示的第一部分教 GPT3.5如何使用我的游戏引擎，在第二部分我提供了我们想要的游戏描述。

AI结果


import { GameObject } from "./Gameobject.js";
import { Input } from "./Input.js";
import { Physics } from "./Physics.js";
import { Renderer } from "./Renderer.js";
import { Game } from "./Engine.js";

// Set the background image
Renderer.setBackground("lookup: flappy bird background");

// Create the player object
class Player extends GameObject {
  constructor(x, y, width, height, type, imageSrc) {
    super(x, y, width, height, type, imageSrc);
    this.velocityY = 0;
    this.gravity = 0.5;
  }

  update() {
    // Apply gravity
    this.velocityY += this.gravity;
    this.y += this.velocityY;

    // Jump when space is pressed
    if (Input.getState().keys["space"]) {
      this.velocityY = -10;
    }

    // Check collision with pipes
    for (const pipe of Game.gameObjects) {
      if (pipe.type === "pipe" && Physics.checkCollision(this, pipe)) {
        Game.stop();
        alert("Game Over!");
      }
    }
  }
}

// Create the pipe object
class Pipe extends GameObject {
  constructor(x, y, width, height, type, imageSrc) {
    super(x, y, width, height, type, imageSrc);
    this.velocityX = -2;
  }

  update() {
    this.x += this.velocityX;

    // Remove the pipe when it goes off the screen
    if (this.x + this.width < 0) {
      Game.gameObjects.splice(Game.gameObjects.indexOf(this), 1);
    }
  }
}

// Spawn pipes every 2 seconds
setInterval(() => {
  const pipeHeight = Math.random() * 200 + 100;
  const pipeGap = 200;
  const topPipe = new Pipe(
    Renderer.canvas.width,
    0,
    100,
    pipeHeight,
    "pipe",
    "lookup: green pipe mario png"
  );
  const bottomPipe = new Pipe(
    Renderer.canvas.width,
    pipeHeight + pipeGap,
    100,
    Renderer.canvas.height - (pipeHeight + pipeGap),
    "pipe",
    "lookup: green pipe mario png"
  );
  Game.gameObjects.push(topPipe, bottomPipe);
}, 2000);

// Create the game objects
const player = new Player(
  100,
  Renderer.canvas.height / 2,
  50,
  50,
  "player",
  "lookup: flappy bird png"
);

// Add the game objects to the game loop
Game.gameObjects.push(player);

// Start the game loop
Game.start();

在这里玩

游戏

更好的提示=>更好的结果

请注意，像“制作 Flappy Bird”这样的简单提示很可能不会产生可运行的游戏版本。最好的游戏描述是那些谈论

输入- 按下哪个键做什么
良好的图片描述- 告诉引擎你想用什么图片来做什么，以及你想要什么样的背景。
碰撞- 当“elon”与“mark”发生碰撞时，会发生以下情况......
特定行为- 当鸟儿下落时旋转它，使其看起来更逼真并且让玩家感觉更舒适。

在 discord 服务器上，我列出了一些好的提示，以便任何人都可以理解和开发更好的游戏。

结论

如果你想支持这个项目，请加入Discord服务器并留下你的反馈！非常感谢

文章来源：https://dev.to/lilshake/create-a-html5-game-with-a-single-prompt-gpt35-3mhc