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.
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.
