<소스코드>
HTML 코드 (index.html)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>벽돌 깨기 게임</title>
<style>
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script src="game.js"></script>
</body>
</html>
Public code references from 41 repositories
JavaScript 코드 (game.js)
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const ballRadius = 10;
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;
const paddleHeight = 10;
const paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;
let rightPressed = false;
let leftPressed = false;
const brickRowCount = 3;
const brickColumnCount = 5;
const brickWidth = 75;
const brickHeight = 20;
const brickPadding = 10;
const brickOffsetTop = 30;
const brickOffsetLeft = 30;
let bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (let r = 0; r < brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0, status: 1 };
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
} else if (e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
} else if (e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function collisionDetection() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
let b = bricks[c][r];
if (b.status == 1) {
if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
dy = -dy;
b.status = 0;
}
}
}
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status == 1) {
let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
let brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
collisionDetection();
if (x + dx > canvas.width - ballRadius || x - ballRadius < 0) {
dx = -dx;
}
if (y + dy < ballRadius) {
dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
} else {
document.location.reload();
}
}
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
requestAnimationFrame(draw);
}
draw();
Public code references from 41 repositories
설명
HTML: canvas 요소를 사용하여 게임 화면을 만듭니다.
CSS: canvas의 배경색을 설정하고 중앙에 배치합니다.
JavaScript: 게임의 논리를 구현합니다.
공, 패들, 벽돌을 그리고 움직입니다.
충돌 감지를 통해 벽돌을 깨고 공이 화면을 벗어나지 않도록 합니다.
키보드 이벤트를 처리하여 패들을 움직입니다.
이 코드를 사용하여 브라우저에서 벽돌 깨기 게임을 실행할 수 있습니다. 더 복잡한 기능을 추가하여 게임을 확장할 수도 있습니다.
https://play.google.com/store/apps/details?id=com.mobirix.swipebrick2&hl=ko&pli=1
벽돌깨기 퀘스트 - Google Play 앱
중독성 넘치는 색다른 두뇌 휴식 게임 다양한 스테이지에 지금 도전하세요!
play.google.com
'IT(정보통신)' 카테고리의 다른 글
| 코딩없는 게임 개발 (1) | 2024.12.26 |
|---|---|
| 저작권 등록 방법 (4) | 2024.12.02 |
| 네이버 스마트스토어 개설 방법 (2) | 2024.12.02 |
| 마이크로소프트 Office 2021 LTSC 무료 다운로드 및 정품 인증 방법 (4) | 2024.01.21 |
| Window 10 정품인증 받는법 (3) | 2024.01.21 |