HTML5 마스터Q&A는 HTML CSS JavaScript 개발자들의 질문과 답변을 위한 커뮤니티 사이트입니다.

HTML5 벽돌깨기 게임 질문이요. 흠....ㅠㅠ

0 추천

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축 밖으로 나가버립니다.
분명 초기화를 다 시켰는데 저렇게 되는 이유는 뭔가요...
깐꼬 (120 포인트) 님이 2014년 11월 15일 질문

1개의 답변

0 추천
음 원본소스를 봐야알겠지만 크롬브라우져 설치하셔서 매 프레임화면에 디버깅걸거나 모든 전역 변수 찍어보면서 노가다로 확인해보시는 수밖에 없겟는데요. . .  개인적으로 진지하게 하실것이라면 원본 제작자 의도대로 따라가지 마시고 힌트만 얻으시고 처음부터 구현해 보시는게 더 좋을듯 싶은데요 ㅋ
익명사용자 님이 2015년 1월 24일 답변
...