|
В canvas объект выходит за границы
Всем привет, нашел гайд по созданию игры, а там дополнительные упражнения на которых нет ответа.
В общем paddle при управлении мышкой с левого края выходит на половину за границы, с правой стороны все в порядке. Подскажите, как пофиксить проблему, пожалуйста.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Canvas Workshop</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>
let canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
x = canvas.width/2,
y = canvas.height-30,
dx = 2,
dy = -2,
ballRadius = 10,
color = 'red',
paddleHeight = 15,
paddleWidth = 90,
paddleX = (canvas.width - paddleWidth)/2,
rightPressed = false,
leftPressed = false,
brickRowCount = 3,
brickColumnCount = 5,
brickWidth = 75,
brickHeight = 20,
brickPadding = 10,
brickOffetTop = 30,
brickOffsetLeft = 30,
score = 0;
let bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (let 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 mouseMoveHandler(e) {
let relativeX = e.clientX - canvas.offsetLeft;
if (relativeX > 0 && relativeX < canvas.width - paddleWidth/2) {
paddleX = relativeX - paddleWidth/2;
}
}
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 collisionDetection() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
let 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 += 5;
if (score == (brickRowCount*brickColumnCount) * 5) {
alert(`YOU WIN, CONGRATULATIONS!\nYour scores:${score}`);
document.location.reload();
}
// color = randColor();
}
}
}
}
}
function drawScore() {
ctx.font = '16px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Score: ' + score, 8, 20);
}
function randColor() {
let rgb = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
return rgb;
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.closePath();
}
function drawBricks() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status == 1) {
let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
let brickY = (r * (brickHeight + brickPadding)) + brickOffetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = 'brown';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.closePath();
}
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();
drawScore();
collisionDetection();
drawBricks();
drawBall();
x += dx;
y += dy;
if (y + dy < ballRadius) {
dy = -dy;
// color = randColor();
} else if (y + dy > canvas.height - ballRadius) {
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
} else {
alert('GAME OVER');
document.location.reload();
clearInterval(interval);
}
}
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
// color = randColor();
}
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 3;
} else if (leftPressed && paddleX > 0) {
paddleX -= 3;
}
}
let interval = setInterval(draw, 10);
</script>
</body>
</html>
Последний раз редактировалось The Boy, 11.10.2022 в 23:16.
|
