Как запустить setInterval после clearInterval JavaScript

186
09 мая 2018, 03:34

Подскажите, как бы начать заново игру после того, как ракетка промахивается по мячу.

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() не подходит

Answer 1

Вместо clearInterval лучше сбросить игру к начальному положению:

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) { 
        // конец игры 
        pressedSpace = false; 
        ballX = canvas.width/2; 
        ballY = (canvas.height-ballRadius)/2; 
        ballDX = 3; 
        ballDY = -3; 
      } 
    } 
  } 
}, 10);
<canvas id="d1" width="400" height="300" ></canvas>

READ ALSO
Babel не компилирует проект с ES6

Babel не компилирует проект с ES6

У меня вебпак не собирает проект, написанный с фичами ES6 и реактомКонфиг вебпака такой:

184
Конфликт webpack и react-scripts

Конфликт webpack и react-scripts

У меня, похоже, конфликтуют react-scripts и webpackИмеется небольшой проект с такими конфигами:

232
Обработчик события окончание анимации. JS и CSS

Обработчик события окончание анимации. JS и CSS

Нужно сделать анимациюЧтобы элемент передвигался в одно место, затем в другое, потом в третье и т

186