Подскажите, как бы начать заново игру после того, как ракетка промахивается по мячу.
var canvas = document.getElementById("d1");
var ctx = canvas.getContext("2d");
var pressedSpace = false;
// размеры ракетки
var playerWidth = 100;
var playerHeight = 7;
// расположение ракетки
var playerX = (canvas.width - playerWidth) / 2;;
var playerY = canvas.height - 15;
// мячик размеры и положение
var ballRadius = 5;
var ballX = canvas.width / 2;
var ballY = (canvas.height - ballRadius) / 2;
var ballDX = 3;
var ballDY = -3;
document.addEventListener("keydown", KeyDown, false);
document.addEventListener("mousemove", MouseMove, false);
// движение мышки
function MouseMove(e) {
var relativeX = e.clientX - canvas.offsetLeft;
if (relativeX > 0 && relativeX < canvas.width) {
playerX = relativeX - playerWidth / 2;
}
}
// нажатие пробела
function KeyDown(e) {
if (e.keyCode == 32) {
pressedSpace = true;
}
}
// рисуем мячик
function drawBall() {
ctx.beginPath();
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
}
// рисуем ракетку
function drawPlayer() {
ctx.beginPath();
ctx.rect(playerX, playerY, playerWidth, playerHeight);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
}
var loop = setInterval(function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPlayer();
// нажимаем пробел
if (pressedSpace) {
// полетел мячик
ballX += ballDX;
ballY += ballDY;
// проверка на столкновение боковых стенок
if (ballX > canvas.width - ballRadius || ballX < ballRadius) {
ballDX = -ballDX;
}
// проверка на столкновение с верхней стенкой
else if (ballY < ballRadius) {
ballDY = -ballDY;
}
// проверка на столкновение с нижней стенкой
else if (ballY > playerY - ballRadius) {
// если мячик коснулся ракетки
if (ballX > playerX && ballX < playerX + playerWidth) {
ballDY = -ballDY;
}
// если мячик не коснулся ракетки
else if (ballY > playerY - ballRadius) {
clearInterval(loop);
// конец игры
}
}
}
}, 10);
#d1 {
border: 1px solid black;
}
<canvas id="d1" width="400" height="300"></canvas>
P.S. чтобы запустить мячик нужно нажать пробел) P.S.S. вариант document.location.reload() не подходит