我希望球撞到墙上时颜色变为红色。如何添加该代码？

Question

My Problem uploaded in codepen Click To see Click to see

Click To Preview Preview

Answer 1

look here. You have to add contex.fillStyle = "here put color you want"; into the if sections;D You can look at this on my pen https://codepen.io/dzm11/pen/PoBwOrp

    window.onload = function () {
  //کنواهای بدنه را دریافت میکند
  var canvas = document.getElementById("Canvas");
  var contex = canvas.getContext("2d");
  //ساخت چند متغیر-این برای پوزیشن ایکس و وای است
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  //ساخت بیشتر از 2 متغیر-برای سرعته-اگر میخواهید حرکت را سریع ببینید-مقادیر را افزایش میدهد
  var dx = 2;
  var dy = -2;

  draw();

  function draw() {
    //تازه سازی کنواها
    contex.clearRect(0, 0, canvas.width, canvas.height);
    contex.beginPath();
    //اینجا با استفاده از آرک توپ زرد خودمان را ایجاد میکنیم
    contex.arc(x, y, 10, 0, Math.PI * 2);
    // contex.fillStyle="yellow";
    contex.fill();

    //دیوار
    if (x + dx > 480) {
      dx = -dx;
      contex.fillStyle = "red";
    }
    if (x + dx < 0) {
      dx = -dx;
      contex.fillStyle = "yellow";
    }
    if (y + dy > 320) {
      dy = -dy;
      contex.fillStyle = "blue";
    }
    if (y + dy < 0) {
      dy = -dy;
      contex.fillStyle = "black";
    }
    x += dx;
    y += dy;
  }
  setInterval(draw, 10);
};