Hey coders, are you trying to use ChatGPT or Bard to help you with the code? then this video is for you. In this video i will show you how you can write prompt properly that AI can understand and give you result that you want. At the end of the video i will share the prompt so you don’t have to write just copy this prompt make changes as per your need and ai will build code for you.
Let’s start in this particular video i will tell ChatGPT to write complete Game with Html that we can play on bowser.
So basically we are going to instruct ChatGPT to write code and also guide us with the implementation of the code. Note that you must have the basic knowledge of how html, css and Javascript works. so you can easily apply code and debug. because at the end of the day it is AI. It can give you instruction but the implementation is upon us.
So lets begun with the prompt Open ChatGPT and write the following Prompt
The Prompt :
Act as Senior Web Developer. You are expert in writing Html5 Games. I will give you game title, Description and Extra instructions. With help of this information you have to build code for small browser html games. also You Share instruction so i can copy your code and test. Type yes if you understood your role.
After writing this prompt just press and wait for the response of ChatGPT. After Its positive reply we can define out Title, Description of game and the Extra Instructions and it will write code for use and give step by step instruction of how to use generated code.
Note that i used html game as example you can change details of the prompt as per your need for other programming languages or other project.
Things to change inside the prompt :
- Senior Web Developer [Change with your required Dev Postions]
- HTMl5 games [Change With the required Programming Languages like java, php, Flutter]
Here is the Live Example :
Me : act as senior Web Developer. You are expert in writing Html5 Games. I will give you game title, Description and extra instructions. With help of this information you have to build code for small browser html games. also You Share instruction so i can copy your code and test. Type yes if you understood your role.
AI : Yes, I understand my role. Please provide me with the game title, description, and any extra instructions you have in mind, and I’ll help you with the HTML5 game code. Once it’s ready, I’ll also provide you with instructions on how to test it.
Me: Title : Snack game
AI : Great! Could you please provide me with a description of the “Snack Game” and any extra instructions you have in mind? This will help me create the HTML5 game code for you.
Me : Description : Ui will be in centre. Need Start and restart button. snack game will be shown in the center box above these buttons, box will be 400×400. Extra instructions : Show score above on the game box
AI :
Got it! You’d like a game called “Snack Game” with the following details:
- UI centered on the page.
- Start and Restart buttons.
- Game displayed in a centered box with dimensions 400×400.
- Show the score above the game box.
I’ll now provide you with the HTML, CSS, and JavaScript code for this game. Once you’ve copied the code, you can test it in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snack Game</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#game-container {
text-align: center;
}
#game-box {
width: 400px;
height: 400px;
border: 2px solid black;
margin: 0 auto;
position: relative;
}
#score {
font-size: 20px;
}
</style>
</head>
<body>
<div id="game-container">
<h1>Snack Game</h1>
<button id="start">Start</button>
<button id="restart" style="display:none;">Restart</button>
<div id="game-box">
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="score">Score: 0</div>
</div>
</div>
<script>
// JavaScript code for the game will go here
</script>
</body>
</html>AI :
Great! Now, let's add the JavaScript code to make the Snack Game work. Please replace the comment **`// JavaScript code for the game will go here`** with the following code:
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let score = 0;
let snackX = 10;
let snackY = 10;
let gridSize = 20;
let tileCount = 20;
let appleX = 15;
let appleY = 15;
let xVelocity = 0;
let yVelocity = 0;
let trail = [];
let tail = 5;
function gameLoop() {
snackX += xVelocity;
snackY += yVelocity;
if (snackX < 0) {
snackX = tileCount - 1;
}
if (snackX > tileCount - 1) {
snackX = 0;
}
if (snackY < 0) {
snackY = tileCount - 1;
}
if (snackY > tileCount - 1) {
snackY = 0;
}
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#00f';
for (let i = 0; i < trail.length; i++) {
ctx.fillRect(trail[i].x * gridSize, trail[i].y * gridSize, gridSize - 2, gridSize - 2);
if (trail[i].x === snackX && trail[i].y === snackY) {
tail = 5;
score = 0;
}
}
trail.push({ x: snackX, y: snackY });
while (trail.length > tail) {
trail.shift();
}
if (appleX === snackX && appleY === snackY) {
tail++;
score++;
appleX = Math.floor(Math.random() * tileCount);
appleY = Math.floor(Math.random() * tileCount);
}
ctx.fillStyle = '#f00';
ctx.fillRect(appleX * gridSize, appleY * gridSize, gridSize - 2, gridSize - 2);
document.getElementById('score').innerHTML = 'Score: ' + score;
requestAnimationFrame(gameLoop);
}
document.getElementById('start').addEventListener('click', () => {
document.getElementById('start').style.display = 'none';
document.getElementById('restart').style.display = 'inline-block';
xVelocity = 1;
yVelocity = 0;
gameLoop();
});
document.getElementById('restart').addEventListener('click', () => {
document.getElementById('start').style.display = 'inline-block';
document.getElementById('restart').style.display = 'none';
xVelocity = 0;
yVelocity = 0;
snackX = 10;
snackY = 10;
score = 0;
tail = 5;
trail = [];
gameLoop();
});
document.addEventListener('keydown', (event) => {
switch(event.keyCode) {
case 37: // Left
if (xVelocity !== 1) {
xVelocity = -1;
yVelocity = 0;
}
break;
case 38: // Up
if (yVelocity !== 1) {
xVelocity = 0;
yVelocity = -1;
}
break;
case 39: // Right
if (xVelocity !== -1) {
xVelocity = 1;
yVelocity = 0;
}
break;
case 40: // Down
if (yVelocity !== -1) {
xVelocity = 0;
yVelocity = 1;
}
break;
}
});
</script>This code provides the functionality for the Snack Game. It initializes the canvas, handles game logic, and listens for user input to control the snack. Once you’ve added this code, save the file and open it in a web browser. You should see the Snack Game with the specified UI elements and functionality.
Let me know if you encounter any issues or if you’d like to make any further adjustments!
And that is how we can use ChatGPT to help use code and build apps faster. Copy The prompt and Develop your game with AI.
I hope you like this video. Subscribe for mode programming videos. See you in the next video.
