A simple platform Game Concept Made with AI

by | Dec 2, 2023 | AI, Gaming | 4 comments

Bunny vs Ghosts

[ez-toc]

About

The following game was made using the ChatGPT and AI Image Generation services and a little bit of custom programming, feel free to reuse the concepts and ideas provided here to create your virtual creation. In a nutshell, to develop that game I kept on asking ChatGPT for code examples which I have been altering and fixing by repeating the Prompt until they worked. Then, once I was happy with the outcome I created art for that game using bing.com/create and NightCafe Studio services.

Embarking on the exciting journey of game development is a thrilling endeavor for many aspiring programmers. In this blog post, we’ll delve into the creation of a simple side-scrolling game using the basic trio of web technologies: HTML, CSS, and JavaScript. Through this project, we’ll explore the fundamentals of game development, including player movement, jumping mechanics, and even a bit of projectile action.

Controls: WSAD – move. X – start spawning more enemies. U – shoot. Z – Toggle Fullscreen. Being hit by enemy resets the score. What’s your record?

Game

A long time ago, there used to live a Bunny, whose land – the Bunnydaise hath been attacked by rabid Bears. Atop of them was the deadly Albino Grizzly. Without any hesitation, the Bunny joined the Bunnylitary and fought alongside his troops against the rabid Bears. The Albino Grizzly hath escaped and is yet to be defeated. As of now, the Bunny is on a mission to defeat the Ghosts who hath invaded his lands, his next journey is yet to follow…

Score: 0
Music
Full Screen
Start Game
Bunny vs Ghosts

Description

Setting the Stage: Our game features a minimalist design with a player represented by a Rabbit generated by Bing Image Creator. The game world is the container window, and the objective is to navigate the player left and right, jump gracefully, and even shoot bullets towards potential adversaries.

Player Movement: Controlling the player is achieved through the keyboard. The “A” and “D” keys enable left and right movement, allowing the player to traverse the game world horizontally.

Jumping Mechanics: To add a dynamic element to our game, we’ve implemented a jumping mechanic. Pressing the “W” key propels the player upward, creating an engaging vertical dimension to the gameplay. Gravity is at play, ensuring the player descends realistically after reaching the apex of the jump.

Projectile Action: For an additional layer of excitement, we’ve incorporated a shooting mechanism. Pressing the “U” key fires  bullets from the player towards the side of the screen. This introduces a strategic element, allowing players to engage with targets or obstacles.

Challenges and Solutions: While developing this simple game, we encountered challenges such as ensuring smooth jumping mechanics and addressing issues with player movement. Iterative refinement and careful debugging were essential in overcoming these hurdles.

Conclusion: Embarking on the journey to create a side-scrolling game using HTML, CSS, and JavaScript is a fantastic way for beginners to gain hands-on experience in game development. This project provides insights into fundamental game mechanics, player controls, and even basic collision detection.

By exploring and expanding upon this project, developers can gradually enhance their skills and potentially move on to more complex game development frameworks and engines. Whether it’s refining the game’s aesthetics, adding new features, or tackling more advanced game mechanics, the possibilities are endless.

As we wrap up this journey, remember that game development is an iterative process. Embrace the learning curve, celebrate small victories, and, most importantly, have fun crafting your own digital worlds. Happy coding!

Concept ART

Code

HTML + PHP + CSS

JS

Full Code Download link

Feel free to upload the code as a WordPress plugin.

Bunny vs Ghosts

ChatGPT Example Prompts

 

 

WP doin dev & security
WP doin dev & security

Oh hi there 👋
It’s nice to meet you.

Sign up to receive WordPress tips in your inbox, every month.

I don’t spam! Read my privacy policy for more info.

Related Posts:

4 Comments

  1. James
    James on February 29, 2024 at 10:44 am

    First of all, congratulations for the nice job.

    I have just a question: how have you used bing AI to create all sprite animations?
    I use it often but it creates just one image, not all animation frames

    Reply
    • Rafał Gicgier
      Rafał Gicgier on February 29, 2024 at 10:46 am

      Hey James,

      Thank you for your comment.

      I asked Bing to create a 2-by-2 sprite with different animation frames of the character. After multiple tries, I received what was OK.

      In the end, this takes a while of trial and error 🙂

      Reply
  2. Joshua Morley
    Joshua Morley on September 17, 2024 at 2:45 pm

    Rafał really amazing job on this. Cant see what you come up with next +1 for Bunnyvs Ghosts 2: Bunny Ghosts Returns

    Reply
    • Rafal Gicgier
      Rafal Gicgier on September 17, 2024 at 2:55 pm

      Thanks Josh,

      We’ll see about that. Bunny is also good at dealing with Vampires, but first he’d have to fight with the Ghost Boss, who’s protecting the entrance to the Vampire lands 😉

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.