Create a HTML5 Game with a Single Prompt💙 [GPT3.5]
Tags: ai, webdev, javascript, gamedev
Published: 2023-07-16 21:47:20


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc4g27knn3svv9l86idz.png)

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✨](https://app.helicity.ai)

Here is my [Game Engine - Full Open Source Code on GitHub😺](https://github.com/lil-shake-code/helicity.ai)

##AI Result

```javascript

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](https://storage.googleapis.com/ai-game-maker.appspot.com/public/zdfRs9zO3PW6LRPZ0yLlFLcQ3eA3.html)

##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](https://discord.com/invite/RkH98RgVDr) and drop your feedback! Thank you so much