게임 오버 기능을 구현하는 방법으로 지금까지 만든 게임은
게임 오버 조건이 없어서 끝이 없습니다
캔버스의 아래 방향에 닿으면 게임 끝나는 것을 조건으로 구현해보겠습니다
게임 오버 기능 구현
게임이 끝날 수 있게 아래 방향에 했던 충돌 처리 로직을 조금 바꿔서
게임 오버 기능을 구현합니다
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
dy = -dy;
}위, 왼쪽, 오른쪽은 그대로 두고 아래 방향의 조건만 수정합니다
if(y + dy < ballRadius) {
dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
alert("GAME OVER");
document.location.reload();
}y + dy > canvas.height-ballRadius 조건을 else if문의 조건으로 분리합니다
아래 방향에 공이 닿으면 "Game Over" 경고 창이 나오고 페이지를 새로고침(reload) 합니다
게임 오버가 정상적으로 출력됩니다
하지만 패들로 공을 막았는데도 공이 패들을 무시하고 바닥에 닿습니다
패들에 닿으면 공이 방향을 바꾸게 수정합니다
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();
}
}공이 닿았을 때 패들의 닿았는지 확인하는 조건으로 바뀌었습니다
정확히는 공의 좌표가 패들의 너비 좌표 안에 있는지 확인하는 방식입니다
패들의 좌표 안에 공의 좌표가 위치하면 패들에 닿은 것이므로 방향이 바뀌고
아닌 경우 바닥에 닿았으므로 게임오버가 됩니다
패들에 공이 닿으면 게임오버가 안 되고 공의 방향이 바뀌는 것을 확인했습니다
게임오버 경고창 버그
더보기
게임 오버가 되면 경고창이 계속 나오는 버그로 setInterval을 초기화해야 합니다
var game = setInterval(draw, 10);더보기
위와 같이 setInterval을 game 변수에 담고 게임오버가 있는 부분에 clearInterval() 함수를 사용합니다
변수로 만든 setInterval을 clearInterval()에 넣어서 초기화시킵니다
clearInterval(game);
alert('GAME OVER');
document.location.reload();요약
코드 전체
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>벽돌깨기</title>
<style>
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
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 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 draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
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 {
clearInterval(game);
alert('GAME OVER');
document.location.reload();
}
}
if(rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
}
var game = setInterval(draw, 10);
</script>
</body>
</html>'HTML' 카테고리의 다른 글
| [벽돌깨기]html 캔버스로 게임 만들기 - 7(벽돌 충돌감지) (0) | 2020.10.26 |
|---|---|
| [벽돌깨기]html 캔버스로 게임 만들기 - 6(벽돌 만들기) (0) | 2020.10.23 |
| [벽돌깨기]html 캔버스로 게임 만들기 - 4(패들과 키보드 조작) (0) | 2020.10.16 |
| [벽돌깨기]html 캔버스로 게임 만들기 - 3(충돌감지) (0) | 2020.10.12 |
| [벽돌깨기]html 캔버스로 게임 만들기 - 2(공 움직이기) (0) | 2020.10.09 |
