재미있는 스크립트 하나로 당신의 웹사이트가 더 흥미로워집니다!
클릭 한 번, 복사 한 줄. 이 간단한 Ping Pong 게임 스크립트를 웹사이트에 붙여넣기만 하면, 당신의 페이지는 방문자에게 웃음과 몰입을 선사하는 작은 게임장이 됩니다.
코딩 초보자도 어렵지 않게 적용할 수 있고, 블로그, 포트폴리오, 교육용 사이트 등 어디에나 어울리는 클래식한 미니게임으로 활용해보세요.
반응형 디자인, 마우스 기반 조작, 자동 AI 상대까지!
복잡한 설정 없이 단 한 번의 복사로 웹 레트로 게임의 향수를 되살려 보세요.
Ping Pong 게임 스크립트 복사
아래 버튼을 클릭하면 전체 게임 스크립트가 복사됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ping Pong 게임</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
background-color: black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="pingPongCanvas" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById("pingPongCanvas");
const context = canvas.getContext("2d");
const paddleWidth = 10;
const paddleHeight = 80;
const ballSize = 10;
const player = {
x: 0,
y: canvas.height / 2 - paddleHeight / 2,
speed: 8,
};
const computer = {
x: canvas.width - paddleWidth,
y: canvas.height / 2 - paddleHeight / 2,
speed: 4,
};
const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
speedX: 5,
speedY: 5,
};
function drawPaddle(x, y) {
context.fillStyle = 'white';
context.fillRect(x, y, paddleWidth, paddleHeight);
}
function drawBall() {
context.fillStyle = 'white';
context.fillRect(ball.x, ball.y, ballSize, ballSize);
}
function moveComputerPaddle() {
if (ball.x > canvas.width / 2) {
if (ball.y > computer.y + paddleHeight / 2) {
computer.y += computer.speed;
} else {
computer.y -= computer.speed;
}
}
}
function update() {
context.clearRect(0, 0, canvas.width, canvas.height);
moveComputerPaddle();
ball.x += ball.speedX;
ball.y += ball.speedY;
if (ball.y < 0 || ball.y > canvas.height - ballSize) {
ball.speedY *= -1;
}
if (
ball.x < player.x + paddleWidth &&
ball.y > player.y &&
ball.y < player.y + paddleHeight
) {
ball.speedX *= -1;
}
if (
ball.x + ballSize > computer.x &&
ball.y > computer.y &&
ball.y < computer.y + paddleHeight
) {
ball.speedX *= -1;
}
if (ball.x < 0 || ball.x + ballSize > canvas.width) {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.speedX = 5;
ball.speedY = 5;
}
drawPaddle(player.x, player.y);
drawPaddle(computer.x, computer.y);
drawBall();
}
canvas.addEventListener("mousemove", (e) => {
player.y = e.clientY - canvas.getBoundingClientRect().top - paddleHeight / 2;
});
setInterval(update, 1000 / 60);
</script>
</body>
</html>
