Как предотвратить столкновение шарика с границей окна Canvas

Question

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Mayatnik</title>
<h1 style = 'text-align: center'> Голосовое управление </h1>
<div class = "button">
<button onclick="speech()">Слушать</button>
</div>
<head>
<style>

        #canvas
        {
          display: block;
          margin: 0 auto;
          padding: 0;
        }
        .button{
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
        }
</style>
</head>
<div id="center">
<canvas id=canvas width="350" height="350" style="background:#000066"></canvas>
</div>
<script type = "text/javascript">

var recognizer = new webkitSpeechRecognition();
recognizer.interimResults = true;
recognizer.lang = "ru-Ru";
recognizer.onresult = function(event){
var result = event.results[event.resultIndex];

   if (result.isFinal && result[0].transcript =="влево")
    {
        let timerId = setInterval(function(){

    draw();

    if(x > 0)
    {
        x=x-2;
    }
    else clearTimeout(timerId);
            }, 20);
}
if (result.isFinal && result[0].transcript =="вверх")
    {
        let timerId = setInterval(function(){

    draw();

    if(y > 0)
    {
        y=y-2;
    }
    else clearTimeout(timerId);
        }, 20);
}
if (result.isFinal && result[0].transcript =="вниз")
    {
        let timerId = setInterval(function(){

    draw();

    if(y < 350)
    {
        y=y+2;
    }
    else clearTimeout(timerId);
        }, 20);
}
if (result.isFinal && result[0].transcript =="направо")
    {
        let timerId = setInterval(function(){

    draw();

    if(x < 350)
    {
        x=x+2;
    }
    else clearTimeout(timerId);
        }, 20);
}
  else
  {
    console.log('Промежуточный результат:', result[0].transcript);
  }
  };

  function speech (){
  recognizer.start();
  }
  </script>

 <script type = "text/javascript">

 var canvas = document.getElementById("canvas");
 var context = canvas.getContext("2d");

 var x = 175;
 var y = 175;

 requestAnimationFrame(draw);
 function draw() {

 var size = Math.min(canvas.width, canvas.height);
 var rBall = size * 0.03;

context.clearRect(0, 0, canvas.width, canvas.height);
drawBg(context, canvas.width, canvas.height);
drawBase(context, canvas.width);

drawBall(context, x, y, rBall);

requestAnimationFrame(draw);
} 

function drawBg(context, w, h) {
context.fillStyle = "rgba(255,255,255,0.51)"
context.fillRect(0, 0, w, h);
context.fillStyle = "yellow";
}

function drawBase(context, w) {
context.save();
context.moveTo(0, 2);
context.lineTo(w, 2);
context.restore();
}
function drawBall(context, x, y, rBall) {
context.save();
context.beginPath();
context.arc(x, y, rBall, 0, Math.PI * 2);
context.fill();
context.restore();
}
</script>
</html>

БЛОГ НА HUSL

Как предотвратить столкновение шарика с границей окна Canvas

Ответы (0 шт):