벽돌깨기 게임 만들기

Chat GPT 물어봅시다.

by 기술자놈 2023. 4. 2. 20:10

SMALL

안녕하세요.

#기술자놈 입니다.

오늘은 벽돌깨기를 #ChatGPT 를 이용해서 만들어 봣습니다.

일단 메모장에서 기본 확장자TXT 를 HTML로 변경만하면

실행이 되는 파일로 만드는 겁니다.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>블록 깨기</title>

<style>

canvas {

border: 1px solid black;

}

</style>

</head>

<body>

<canvas id="gameCanvas" width="480" height="320"></canvas>

<script>

var canvas = document.getElementById("gameCanvas");

var ctx = canvas.getContext("2d");

var ballRadius = 10;

var x = canvas.width/2;

var y = canvas.height-30;

var dx = 2;

var dy = -2;

var paddleHeight = 10;

var paddleWidth = 75;

var paddleX = (canvas.width-paddleWidth)/2;

var rightPressed = false;

var leftPressed = false;

var brickRowCount = 3;

var brickColumnCount = 5;

var brickWidth = 75;

var brickHeight = 20;

var brickPadding = 10;

var brickOffsetTop = 30;

var brickOffsetLeft = 30;

var score = 0;

var bricks = [];

for(var c=0; c<brickColumnCount; c++) {

bricks[c] = [];

for(var r=0; r<brickRowCount; r++) {

bricks[c][r] = { x: 0, y: 0, status: 1 };

}

}

document.addEventListener("keydown", keyDownHandler, false);

document.addEventListener("keyup", keyUpHandler, false);

document.addEventListener("mousemove", mouseMoveHandler, false);

function keyDownHandler(e) {

if(e.keyCode == 39) {

rightPressed = true;

}

else if(e.keyCode == 37) {

leftPressed = true;

}

}

function keyUpHandler(e) {

if(e.keyCode == 39) {

rightPressed = false;

}

else if(e.keyCode == 37) {

leftPressed = false;

}

}

function mouseMoveHandler(e) {

var relativeX = e.clientX - canvas.offsetLeft;

if(relativeX > 0 && relativeX < canvas.width) {

paddleX = relativeX - paddleWidth/2;

}

}

function collisionDetection() {

for(var c=0; c<brickColumnCount; c++) {

for(var r=0; r<brickRowCount; r++) {

var 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;

score++;

if(score == brickRowCount*brickColumnCount) {

alert("YOU WIN, CONGRATS!");

document.location.reload();

}

}

}

}

}

}

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(var c=0; c<brickColumnCount; c++) {

for(var r=0; r<brickRowCount; r++) {

if(bricks[c][r].status == 1) {

var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;

var 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 drawScore() {

ctx.font = "16px Arial";

ctx.fillStyle = "#0095DD";

ctx.fillText("Score: "+score, 8, 20);

}

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBricks();

drawBall();

drawPaddle();

drawScore();

collisionDetection();

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {

dx = -dx;

}

if(y + dy < ballRadius) {

dy = -dy;

}

else if(y + dy > canvas.height-ballRadius) {

if(x > paddleX && x < paddleX + paddleWidth) {

dy = -dy;

}

else {

alert("GAME OVER");

document.location.reload();

clearInterval(interval); // Needed for Chrome to end game

}

}

if(rightPressed && paddleX < canvas.width-paddleWidth) {

paddleX += 7;

}

else if(leftPressed && paddleX > 0) {

paddleX -= 7;

}

x += dx;

y += dy;

}

var interval = setInterval(draw, 10);

</script>

</body>

</html>

완성된 게임입니다.

뭔가 좀 아쉬움이 생겨 추가로 업그레이드 했습니다.

난이도를 조절하고 시작 버튼을 넣었습니다.

<!DOCTYPE html>

<html>

<head>

<title>벽돌깨기 게임</title>

<style>

canvas {

border:1px solid #000000;

}

</style>

</head>

<body>

<div>

<label for="difficulty">난이도 선택:</label>

<select id="difficulty">

<option value="easy">어려움</option>

<option value="medium">보통</option>

<option value="hard">쉬움</option>

</select>

<button id="start">시작</button>

</div>

<script>

var canvas = document.createElement("canvas");

canvas.width = 480;

canvas.height = 320;

document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");

var ballRadius = 10;

var x = canvas.width/2;

var y = canvas.height-30;

var dx = 2;

var dy = -2;

var paddleHeight = 10;

var paddleWidth = 75;

var paddleX = (canvas.width-paddleWidth)/2;

var rightPressed = false;

var leftPressed = false;

var brickRowCount = 3;

var brickColumnCount = 5;

var brickWidth = 75;

var brickHeight = 20;

var brickPadding = 10;

var brickOffsetTop = 30;

var brickOffsetLeft = 30;

var bricks = [];

for(var c=0; c<brickColumnCount; c++) {

bricks[c] = [];

for(var r=0; r<brickRowCount; r++) {

bricks[c][r] = { x: 0, y: 0, status: 1 };

}

}

var score = 0;

var lives = 3;

function drawBricks() {

for(var c=0; c<brickColumnCount; c++) {

for(var r=0; r<brickRowCount; r++) {

if(bricks[c][r].status == 1) {

var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;

var 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 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 collisionDetection() {

for(var c=0; c<brickColumnCount; c++) {

for(var r=0; r<brickRowCount; r++) {

var 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;

score++;

if(score == brickRowCount*brickColumnCount) {

alert("축하합니다! 모든 벽돌을 깼습니다!");

document.location.reload();

}

}

}

}

}

}

document.addEventListener("keydown", keyDownHandler, false);

document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {

if(e.keyCode == 39) {

rightPressed = true;

}

else if(e.keyCode == 37) {

leftPressed = true;

}

}

function keyUpHandler(e) {

if(e.keyCode == 39) {

rightPressed = false;

}

else if(e.keyCode == 37) {

leftPressed = false;

}

}

function drawScore() {

ctx.font = "16px Arial";

ctx.fillStyle = "#0095DD";

ctx.fillText("점수: "+score, 8, 20);

}

function drawLives() {

ctx.font = "16px Arial";

ctx.fillStyle = "#0095DD";

ctx.fillText("남은 생명: "+lives, canvas.width-95, 20);

}

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBricks();

drawBall();

drawPaddle();

drawScore();

drawLives();

collisionDetection();

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {

dx = -dx;

}

if(y + dy < ballRadius) {

dy = -dy;

}

else if(y + dy > canvas.height-ballRadius) {

if(x > paddleX && x < paddleX + paddleWidth) {

dy = -dy;

}

else {

lives--;

if(!lives) {

alert("게임 오버! 다시 시작하려면 확인을 누르세요.");

document.location.reload();

}

else {

x = canvas.width/2;

y = canvas.height-30;

dx = 2;

dy = -2;

paddleX = (canvas.width-paddleWidth)/2;

}

}

}

if(rightPressed && paddleX < canvas.width-paddleWidth) {

paddleX += 7;

}

else if(leftPressed && paddleX > 0) {

paddleX -= 7;

}

x += dx;

y += dy;

requestAnimationFrame(draw);

}

document.getElementById("start").addEventListener("click", function() {

draw();

});

</script>

</body>

</html>

다들 심심할때 취미로 코딩을 #ChatGPT 와 함께 해봐요.

#벽돌깨기게임
#게임개발
#HTML5
#Canvas
#자바스크립트
#애니메이션
#게임그래픽
#게임물리엔진
#게임디자인
#게임코딩
#게임프로그래밍
#게임모션그래픽
#게임미디어아트
#모바일게임
#브라우저게임
#키보드조작
#마우스조작
#게임레벨디자인
#게임배경음악
#게임소리효과
#게임유저인터페이스
#게임캐릭터디자인
#게임인공지능
#게임서버
#게임발표회

LIST

'Chat GPT 물어봅시다.' 카테고리의 다른 글

당첨율 높은 로또 번호 생성기 추가 제작!! (0)	2023.04.02
복불복 게임 제작 (0)	2023.04.02
당첨율 높은 로또 번호 생성기 (0)	2023.04.02
Chat GPT 로또 당첨 번호의 통계를 알려줘!! (0)	2023.04.02
블로그 포스팅 잘하는 방법 (0)	2023.04.02