Her er hva vi gjorde.
Som no-code entusiaster og nysgjerrig på nye teknologi, ønsket vi å se om de var mulig å lage et dataspill kun ved bruk av informasjon fra Chat-GPT. Etter å ha lekt litt med model GPT-3.5 var det tydelig at kode var et av områdene den store språkmodellen til Open-AI dekket veldig bra. Men selv om den var til veldig god hjelp, krevde den en del forkunnskap for å lykkes. Hva nå med GPT-4? Kan vi ved kun å bruke GPT-4 få laget et spill uten noen form for forhåndskunnskap? Vi prøvde. Spillet ligger under, og oppskriften for hvordan vi gjorde det litt lenger nede. Ikke verdens råeste spill, men likevel 🤯.
Slik gjorde vi det.
Vi begynte å stille et enkelt “prompt”.
Basert på svaret fra GPT-4 spurte vi om hvilke program vi kunne bruke?
Valget falt på nr 3 replit.com, da det virket enkelt og intuitivt.
Nå hadde vi et verktøy til å lage et spill med. Nå måtte vi bare vite hva som kreves for å lage et dataspill. Hvor enkelt er det mulig å lage det?
Prompt: “Er det mulig å lage et spill med få linjer kode?”
GPT-4 kom med svaret øyeblikkelig, og faktisk også med ferdig kode til et spill. Vi valgte å ta det et steg videre, og ba om et spill som skulle være på 150 linjer kode, eller mindre.
ㅤ
Prompt:
Prompt: “Gi meg en superdetaljert beskrivelse av et spill som kan bli kodet med 150 linjer eller mindre som html/CSS/javascrip fil”
ㅤ
Svar fra GPT-4:
Tittel: "Shape Escape"
Beskrivelse:
Shape Escape er et enkelt, men utfordrende spill der spilleren må navigere en liten trekant gjennom en serie av gap i vegger som kommer mot den. Spillet er enkel i design, men kan bli vanskelig å mestre ettersom vegger kommer raskere og i forskjellige formasjoner.
Spillets struktur og funksjoner:
- Spillområdet:
- En 2D spillområde med en fast bredde og høyde, representert som en HTML5 Canvas.
- Bakgrunnsfarge som kontrasterer med spillfigurene for enkel visning.
- Spillerobjektet:
- En liten trekant som kontrolleres av spilleren.
- Kan bevege seg opp og ned innenfor spillområdet.
- Kan ikke bevege seg utenfor spillområdets grenser.
- Vegger og gap:
- Vegger genereres kontinuerlig på høyre side av skjermen og beveger seg mot venstre.
- Hver vegg har et gap som spilleren må navigere gjennom.
- Gapets størrelse og plassering varierer for hver vegg.
- Veggenes hastighet øker gradvis over tid for økt vanskelighetsgrad.
- Kollisjonsdeteksjon:
- Hvis spillerobjektet kolliderer med en vegg, slutter spillet.
- Poengsystem:
- Spilleren får poeng for hver vegg de passerer.
- Poengsummen vises på skjermen.
Spillet kan implementeres med en HTML/CSS/JavaScript-fil ved å bruke følgende teknikker og funksjoner:
- HTML: Bruk en enkel HTML-struktur med en canvas for spillområdet og en tekstområde for poengsummen.
- CSS: Bruk grunnleggende stil for å posisjonere canvas og poengsum på skjermen.
- JavaScript:
- Bruk "requestAnimationFrame" for å opprette en spillsløyfe.
- Tegn spillfigurene og vegger på canvas med "fillRect" og "beginPath"/"lineTo"/"fill" for trekanten.
- Bruk "addEventListener" for å lytte til tastaturet og flytte spillerobjektet opp eller ned.
- Generer vegger og gap med tilfeldige verdier ved hjelp av JavaScripts "Math.random".
- Implementer kollisjonsdeteksjon ved å sammenligne posisjonene til spillerobjektet og veggene.
- Oppdater poengsummen når spilleren passerer en vegg.
- Avslutt spillet ved kollisjon og tilby en mulighet for å starte på nytt.
ㅤ
Dette så bra ut. La oss få koden til dette spillet.
ㅤ
Prompt: “Kan du gi meg koden til dette slik at jeg kan lime det rett inn i Replit?”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shape Escape</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const player = {
x: 50,
y: canvas.height / 2,
size: 10,
speed: 4,
score: 0
};
const walls = [];
const wallWidth = 10;
const gapSize = 60;
const wallInterval = 100;
let wallSpeed = 2;
function createWalls() {
const yPos = Math.floor(Math.random() * (canvas.height - gapSize));
walls.push({ x: canvas.width, y: yPos, cleared: false });
}
function drawPlayer() {
ctx.beginPath();
ctx.moveTo(player.x, player.y);
ctx.lineTo(player.x + player.size, player.y - player.size / 2);
ctx.lineTo(player.x + player.size, player.y + player.size / 2);
ctx.closePath();
ctx.fillStyle = '#000';
ctx.fill();
}
function drawWalls() {
walls.forEach((wall) => {
ctx.fillStyle = '#000';
ctx.fillRect(wall.x, wall.y, wallWidth, -canvas.height);
ctx.fillRect(wall.x, wall.y + gapSize, wallWidth, canvas.height - gapSize);
});
}
function updatePlayer() {
if (player.y > 0 && player.y < canvas.height) {
player.y += player.speed;
} else {
player.y = Math.max(0, Math.min(canvas.height, player.y));
}
}
function updateWalls() {
walls.forEach((wall) => {
wall.x -= wallSpeed;
if (wall.x + wallWidth < player.x && !wall.cleared) {
player.score += 1;
wall.cleared = true;
}
});
if (walls[0] && walls[0].x < -wallWidth) {
walls.shift();
}
}
function detectCollision() {
const wall = walls.find((w) => w.x < player.x + player.size && w.x + wallWidth > player.x);
if (wall) {
const gapTop = wall.y;
const gapBottom = wall.y + gapSize;
if (player.y - player.size / 2 < gapTop || player.y + player.size / 2 > gapBottom) {
return true;
}
}
return false;
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
ㅤ
Her stoppet Chat-GPT og vi måtte be den fortsette og hjelpe oss. Vi la inn nytt prompt: “fortsett”
Her var resten av koden som kom ut:
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const player = {
x: 50,
y: canvas.height / 2,
size: 10,
speed: 4,
score: 0
};
const walls = [];
const wallWidth = 10;
const gapSize = 60;
const wallInterval = 100;
let wallSpeed = 2;
let wallTimer = 0;
let gameRunning = true;
document.addEventListener('keydown', (e) => {
if (e.code === 'ArrowUp') {
player.speed = -4;
} else if (e.code === 'ArrowDown') {
player.speed = 4;
}
});
document.addEventListener('keyup', (e) => {
if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {
player.speed = 0;
}
});
function createWalls() {
const yPos = Math.floor(Math.random() * (canvas.height - gapSize));
walls.push({ x: canvas.width, y: yPos, cleared: false });
}
function drawPlayer() {
ctx.beginPath();
ctx.moveTo(player.x, player.y);
ctx.lineTo(player.x + player.size, player.y - player.size / 2);
ctx.lineTo(player.x + player.size, player.y + player.size / 2);
ctx.closePath();
ctx.fillStyle = '#000';
ctx.fill();
}
function drawWalls() {
walls.forEach((wall) => {
ctx.fillStyle = '#000';
ctx.fillRect(wall.x, wall.y, wallWidth, -canvas.height);
ctx.fillRect(wall.x, wall.y + gapSize, wallWidth, canvas.height - gapSize);
});
}
function updatePlayer() {
if (player.y > 0 && player.y < canvas.height) {
player.y += player.speed;
} else {
player.y = Math.max(0, Math.min(canvas.height, player.y));
}
}
function updateWalls() {
walls.forEach((wall) =>
Nå måtte vi bare få brukt koden som Chat-GPT hadde gitt oss.
Vi åpnet nå replit.com i browseren
Vi trykket nå på knappen “+ create repl”,
Valgte så HTML, CSS, Javascript. Vi fikk da opp replit sin editor og kunne nå begynne å lime inn koden.
Nå limte vi inn koden merket med html fra Chat-GPT inn i feltet for html i Repl.
Så limte vi inn resten av koden fra Chat-GPT der det står script.js, inn i tilsvarende felt i Repl.
Nå var det bare å teste om koden fungerte ved å trykke på den grønne knappen med “RUN”.
Simsalabim🤯
Koden virket, og det var mulig å styre den lille trekantete figuren med piltastene mellom de ulike veggene. New Paragraph
ㅤ
Dette er selvsagt ikke det meste imponerende spillet, men det som er interessant med eksperimentet er at dette ikke var mulig å gjøre uten forkunnskap med modell 3.5 i Chat-GPT. Men med den nye GPT-4 modellen ga den oss all koden og informasjonen vi trengte kun ved å spørre ganske banale spørsmål.
Vi har nå testet mange nye muligheter med Chat-GPT 4 modellen, og denne modellen i kombinasjon med no-code verktøy gir fantastiske muligheter.
Vi i Oschlo er et produktstudio som hjelper selskaper med utvikling av digitale produkter. Vår ambisjon er å demokratisere utviklingen av digitale tjenester ved bruk av no-code og ai. Vi ønsker at våre kunder skal være aktivt med i utviklingsprosessen og bli i stand til å videreutvikle sine egne produkter selv. Ta kontakt om dere trenger bistand til å komme i gang.
