HTML 코드입니다.
<html>
<head>
<script type="text/javascript"
src="http://billmill.org/static/canvastutorial/js/jquery-1.7.1.min.js"></script>
<script src='js/bricks.js'></script>
</head>
<body onload=run()>
<header>
<h1 align="center">벽돌 깨기</h1>
</header>
<nav></nav>
<section>
<article>
<div align="center">
게임 회수 <input type="text" size="3" id="gamecnt"> 블록 갯수 <input
type="text" size="3" id="blockcnt"> x <input type="text"
size="3" id="x"> y <input type="text" size="3" id="y">
</div>
<div align="center">
<canvas id="canvas" width="400" height="400" style="border: solid;"></canvas>
</div>
<div align="center">
<button onclick="restart()">다시 시작</button>
<button onclick="stop();">음악 정지</button>
</div>
</article>
</section>
<footer>
<audio id="audio" src="sound/maps.mp3" preload="auto" loop="loop" autoplay="autoplay"></audio>
</footer>
</body>
</html>
js 코드입니다.
var x = 25;
var y = 250;
var dx = 1.5;
var dy = -4;
var ctx;
var WIDTH=0;
var HEIGHT=0;
var paddlex;
var paddleh = 10;
var paddlew = 150;
var rightDown = false;
var leftDown = false;
var canvasMinX = 0;
var canvasMaxX = 0;
var intervalId = 0;
var bricks;
var NROWS = 2;
var NCOLS = 2;
var BRICKWIDTH;
var BRICKHEIGHT = 15;
var PADDING = 1;
var gamecnt = 0;
var blockcnt = 0;
var blocknm = NROWS*NCOLS;
function init() {
ctx = $('#canvas')[0].getContext("2d");
WIDTH = $("#canvas").width();
HEIGHT = $("#canvas").height();
paddlex = WIDTH / 2;
BRICKWIDTH = (WIDTH / NCOLS) - 1;
canvasMinX = $("#canvas").offset().left;
canvasMaxX = canvasMinX + WIDTH;
intervalId = setInterval(draw, 10);
}
function circle(x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
function rect(x, y, w, h) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
rect(0, 0, WIDTH, HEIGHT);
}
function onKeyDown(evt) {
if (evt.keyCode == 39)
rightDown = true;
else if (evt.keyCode == 37)
leftDown = true;
}
function onKeyUp(evt) {
if (evt.keyCode == 39)
rightDown = false;
else if (evt.keyCode == 37)
leftDown = false;
}
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);
function onMouseMove(evt) {
if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
paddlex = Math.max(evt.pageX - canvasMinX - (paddlew / 2), 0);
paddlex = Math.min(WIDTH - paddlew, paddlex);
}
}
$(document).mousemove(onMouseMove);
function initbricks() {
bricks = new Array(NROWS);
for (i = 0; i < NROWS; i++) {
bricks[i] = new Array(NCOLS);
for (j = 0; j < NCOLS; j++) {
bricks[i][j] = 1;
}
}
}
function drawbricks() {
for (i = 0; i < NROWS; i++) {
ctx.fillStyle = rowcolors[i];
for (j = 0; j < NCOLS; j++) {
if (bricks[i][j] == 1) {
rect((j * (BRICKWIDTH + PADDING)) + PADDING,
(i * (BRICKHEIGHT + PADDING)) + PADDING, BRICKWIDTH,
BRICKHEIGHT);
}
}
}
}
// Library End
var ballr = 10;
var rowcolors = [ "#FF1C0A", "#FFFD0A", "#00A308", "#0008DB", "#EB0093" ];
var paddlecolor = "#FFFFFF";
var ballcolor = "#FFFFFF";
var backcolor = "#000000";
function draw() {
document.all.x.value = x;
document.all.y.value = y;
ctx.fillStyle = backcolor;
clear();
ctx.fillStyle = ballcolor;
circle(x, y, ballr);
if (rightDown)
paddlex += 5;
else if (leftDown)
paddlex -= 5;
ctx.fillStyle = paddlecolor;
rect(paddlex, HEIGHT - paddleh, paddlew, paddleh);
drawbricks();
// want to learn about real collision detection? go read
// http://www.metanetsoftware.com/technique/tutorialA.html
rowheight = BRICKHEIGHT + PADDING;
colwidth = BRICKWIDTH + PADDING;
row = Math.floor(y / rowheight); //내림
col = Math.floor(x / colwidth);
// reverse the ball and mark the brick as broken
if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
dy = -dy;
bricks[row][col] = 0;
blocknm--;
if(blocknm==0){
alert("이겼습니다!~");
restart();
}
blockcnt++;
document.all.blockcnt.value = blockcnt;
}
if (x + dx + ballr > WIDTH || x + dx - ballr < 0)
dx = -dx;
if (y + dy - ballr < 0)
dy = -dy;
else if (y + dy + ballr > HEIGHT - paddleh) {
if (x > paddlex && x < paddlex + paddlew) {
// move the ball differently based on where it hit the paddle
dx = 8 * ((x - (paddlex + paddlew / 2)) / paddlew);
dy = -dy;
} else if (y + dy + ballr > HEIGHT)
clearInterval(intervalId);
}
x += dx;
y += dy;
}
function run() {
gamecnt++;
document.all.gamecnt.value = gamecnt;
init();
initbricks();
}
function restart() {
x = 25;
y = 250;
dx = 1.5;
dy = -4;
canvasMinX = 0;
canvasMaxX = 0;
blockcnt = 0;
blocknm=NROWS*NCOLS;
run();
}
var a= new Boolean;
a=true;
function stop() {
if (a) {
document.getElementById('audio').pause();
a = false;
} else {
document.getElementById('audio').play();
a = true;
}
}
질문 : 게임 시작 후 공이 땅에 닿고 다시하기 버튼 클릭시 제대로 시작 되는데, 땅에 닿지 않고 공중이나, 게임 클리어 후 다시 시작 버튼을 누르면 공의 속도가 매우 빨라지고, 공이 y축 밖으로 나가버립니다.
분명 초기화를 다 시켰는데 저렇게 되는 이유는 뭔가요...