Att skapa ett enkelt spel kan verka skrämmande, men med ChatGPT och lite JavaScript kan du snabbt och enkelt komma igång. I denna artikel går vi igenom hur du kan skapa ett klassiskt Pong-spel på bara fem minuter. Följ dessa steg, så har du snart ett spel du kan visa upp på din egen sida.
Allt du behöver göra är att skriva in följande i ChatGPT:
”Gör ett spel i javascript som t.ex. PONG”
Steg 1: Förberedelse
Innan vi börjar behöver du:
- En textredigerare (t.ex. Visual Studio Code, Sublime Text eller Notepad++).
- Grundläggande kunskaper i HTML, CSS och JavaScript.
- En WordPress-sida där du kan lägga upp spelet.
Steg 2: Skapa HTML-strukturen
Vi börjar med att skapa en enkel HTML-fil som innehåller vårt spel. Skapa en ny fil och namnge den index.html. Klistra in följande kod i filen:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong-spel</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #000;
color: #fff;
}
canvas {
border: 1px solid #fff;
}
</style>
</head>
<body>
<canvas id="pongCanvas" width="800" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>Steg 3: Skapa spelets logik med JavaScript
Nästa steg är att skapa en JavaScript-fil som innehåller spelets logik. Skapa en ny fil och namnge den script.js. Klistra in följande kod i filen:
const canvas = document.getElementById('pongCanvas');
const context = canvas.getContext('2d');
const paddleWidth = 10;
const paddleHeight = 100;
const ballSize = 10;
let playerY = (canvas.height - paddleHeight) / 2;
let aiY = (canvas.height - paddleHeight) / 2;
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 5;
let ballSpeedY = 2;
function drawRect(x, y, width, height, color) {
context.fillStyle = color;
context.fillRect(x, y, width, height);
}
function drawCircle(x, y, radius, color) {
context.fillStyle = color;
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
function draw() {
// Clear canvas
drawRect(0, 0, canvas.width, canvas.height, 'black');
// Draw paddles
drawRect(0, playerY, paddleWidth, paddleHeight, 'white');
drawRect(canvas.width - paddleWidth, aiY, paddleWidth, paddleHeight, 'white');
// Draw ball
drawCircle(ballX, ballY, ballSize, 'white');
}
function move() {
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballY + ballSize > canvas.height || ballY - ballSize < 0) {
ballSpeedY = -ballSpeedY;
}
if (ballX + ballSize > canvas.width) {
if (ballY > aiY && ballY < aiY + paddleHeight) {
ballSpeedX = -ballSpeedX;
} else {
resetBall();
}
}
if (ballX - ballSize < 0) {
if (ballY > playerY && ballY < playerY + paddleHeight) {
ballSpeedX = -ballSpeedX;
} else {
resetBall();
}
}
aiY += (ballY - (aiY + paddleHeight / 2)) * 0.1;
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
}
canvas.addEventListener('mousemove', event => {
const rect = canvas.getBoundingClientRect();
const root = document.documentElement;
playerY = event.clientY - rect.top - root.scrollTop - paddleHeight / 2;
});
function game() {
move();
draw();
}
setInterval(game, 1000 / 60);Resultat
Slutsats
Grattis! Du har nu skapat och lagt upp ett Pong-spel. På bara fem minuter har du gått från idé till verklighet med hjälp av ChatGPT och enkel JavaScript. Nu kan du stolt visa upp ditt spel för vänner och besökare på din sida. Lycka till med ditt framtida kodande!
