JavaScript

23 Δεκεμβρίου 2017

Έχω φτιάξει το παρακάτω παιχνίδι

Site: https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

ο κώδικας μου

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Gamedev Canvas Workshop - lesson 10: finishing up</title>
	<link href="page.css" rel="stylesheet" type="text/css">
	<script src="lib.js" type="text/javascript"></script>
</head>
<body>
	<canvas height="320" id="myCanvas" width="480"></canvas>
</body>
</html>

var
	canvas,
	ctx,
	ballRadius = 10,
	x = canvas.width / 2,
	y = canvas.height - 30,
	dx = 2,
	dy = -2,
	paddleHeight = 10,
	paddleWidth = 75,
	paddleX,
	rightPressed = false,
	leftPressed = false,
	brickRowCount = 5,
	brickColumnCount = 3,
	brickWidth = 75,
	brickHeight = 20,
	brickPadding = 10,
	brickOffsetTop = 30,
	brickOffsetLeft = 30,
	score = 0,
	lives = 3,
	bricks = [];
	
for (c = 0; c < brickColumnCount; c++) {
	bricks[c] = [];
	for (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 (c = 0; c < brickColumnCount; c++) {
		for (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 (c = 0; c < brickColumnCount; c++) {
		for (r = 0; r < brickRowCount; r++) {
			if (bricks[c][r].status == 1) {
				var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
				var brickY = (c * (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 drawLives() {
	ctx.font = "16px Arial";
	ctx.fillStyle = "#0095DD";
	ctx.fillText("Lives: " + lives, canvas.width - 65, 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("GAME OVER");
				document.location.reload();
			} else {
				x = canvas.width / 2;
				y = canvas.height - 30;
				dx = 3;
				dy = -3;
				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);
}

window.addEventListener('load', function() {
	canvas = document.getElementById("myCanvas");
	ctx = canvas.getContext("2d");
	paddleX = (canvas.width - paddleWidth) / 2,
	draw();
}, false);

Μου έχει ζητηθεί στην HTML να αφήσω τον ελάχιστο κώδικα που απαιτείται για την ροή του παιχνιδιού, να δημιουργήσωεξωτερικά τις συναρτήσεις

draw

bricks

collisionDetection

drawBall

drawPaddle

drawBricks

drawScore

drawLives

θα παίρνουν σαν παράμετρο εισόδου όλα τα απαραίτητα στοιχεία και ο κώδικας που δεν περιλαμβάνεται στις παραπάνω συναρτήσεις θα μείνει σε ένα js και θα καλείται στο body

έχω προσπαθήσει πολλά έκανα και έρευνα αλλά οταν τα μεταφέρω στο body δεν μου δουλεύει τίποτα μήπως θα μπορούσε να βοηθήσει κάποιος ?

rafinos · 23 Δεκεμβρίου 2017

Θέλεις να μας δείξεις τον τρόπο με τον οποίο το μεταφέρεις στο body;

23 Δεκεμβρίου 2017

το js που καλείτε στο head

function drawBall(canvas,ctx) {
	ctx.beginPath();
	ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
}

function drawPaddle(canvas,ctx,paddleWidth, paddleHeight) {
	ctx.beginPath();
	ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
}

function drawBricks(canvas,ctx,bricks) {
	for (c = 0; c < brickColumnCount; c++) {
		for (r = 0; r < brickRowCount; r++) {
			if (bricks[c][r].status == 1) {
				var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
				var brickY = (c * (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(canvas,ctx,score) {
	ctx.font = "16px Arial";
	ctx.fillStyle = "#0095DD";
	ctx.fillText("Score: " + score, 8, 20);
}

function drawLives(canvas,ctx,lives) {
	ctx.font = "16px Arial";
	ctx.fillStyle = "#0095DD";
	ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
}

function draw(canvas,ctx,ballRadius,paddleX,paddleWidth) {
	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("GAME OVER");
				document.location.reload();
			} else {
				x = canvas.width / 2;
				y = canvas.height - 30;
				dx = 3;
				dy = -3;
				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);
}

το js που καλείτε στο body

var
	canvas,
	ctx,
	ballRadius = 10,
	x = canvas.width / 2,
	y = canvas.height - 30,
	dx = 2,
	dy = -2,
	paddleHeight = 10,
	paddleWidth = 75,
	paddleX,
	rightPressed = false,
	leftPressed = false,
	brickRowCount = 5,
	brickColumnCount = 3,
	brickWidth = 75,
	brickHeight = 20,
	brickPadding = 10,
	brickOffsetTop = 30,
	brickOffsetLeft = 30,
	score = 0,
	lives = 3,
	bricks = [];
	
for (c = 0; c < brickColumnCount; c++) {
	bricks[c] = [];
	for (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 (c = 0; c < brickColumnCount; c++) {
		for (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();
					}
				}
			}
		}
	}
}

window.addEventListener('load', function() {
	canvas = document.getElementById("myCanvas");
	ctx = canvas.getContext("2d");
	paddleX = (canvas.width - paddleWidth) / 2,
	draw();
}, false);

Σύνδεση

JavaScript

Προτεινόμενες αναρτήσεις

Επισκέπτης

rafinos

Επισκέπτης

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση