Create a HTML5 Game with a Single Prompt💙 [GPT3.5]

Hey guys! Did you know that GPT3.5 is amazing? Seriously, its performance to price ratio is amazing. That has allowed me to create a Code Generator for my game engine.

I taught GPT3.5 how to use my game engine in the first part of the prompt and in the 2nd part I provided the Game Description we want.

You can try it out for free at Helicity.ai✨

Here is my Game Engine - Full Open Source Code on GitHub😺

AI Result

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();

Play it here

Game

Better prompts => Better Results

Notice that a simple prompt like "Make flappy bird" would probably not have resulted in a working version of the game. The best game descriptions are those that talk about

1. Input - What keys pressed do what
2. Good Image Descriptions - Tell the engine what images you want to use for what. And what kind of a background you want to have.
3. Collisions- When "elon" collides with "mark" do this ...
4. Specific Behavior - When the bird is falling rotate it so it looks more realistic and feels good on the player.

On the discord server I am making a list of good Prompts so anyone can understand and develop better games.

Conclusion

If you want to support this project, please join the Discord server and drop your feedback! Thank you so much