onclick在画布上创建随机矩形，不会与现有的矩形冲突

我超级坚持这一点，到目前为止我所做的是创建随机大小的直角坐标的函数，它出现在画布的随机位置。我需要做的是使用JS绘制矩形，每当我创建一个新的，它不能与现有的冲突。onclick在画布上创建随机矩形，不会与现有的矩形冲突

<!DOCTYPE html> 
<html> 
<head> 
<title>rectangles sucks</title> 
</head> 
<body> 

<button id="buttonxD">press me!</button> 
<script> 
    var body = document.getElementsByTagName("body")[0]; 
    var canvas = document.createElement("canvas"); 
    canvas.height = 500; 
    canvas.width = 500; 
    var context = canvas.getContext("2d"); 
    body.appendChild(canvas); 
function create() { 
    // Opacity 
     context.globalAlpha=0.7; 
     var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 
     context.fillStyle = color; 

     //Each rectangle's size is (20 ~ 100, 20 ~ 100)  
     context.fillRect(Math.random()*canvas.width, Math.random()*canvas.width, Math.random()*80+20, Math.random()*80+20); 

} 
    document.getElementById('buttonxD').addEventListener('click', create); 
</script> 

</body> 
</html>

我看到这个功能用来检查碰撞检测

function isCollide(a, b) { 
    return !(
     ((a.y + a.height) < (b.y)) || 
     (a.y > (b.y + b.height)) || 
     ((a.x + a.width) < b.x) || 
     (a.x > (b.x + b.width)) 
    ); 
}

但我没有将它集成到我的代码... 任何想法，我应该用我现有的代码做什么不同的，任何事情都会有帮助，谢谢

来源

2017-04-15 Tautvydas Būda

您需要一种方法来保留现有矩形的坐标。所以你可以检查这个列表，如果你的新矩形不与其中的一个碰撞。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>rectangles sucks</title> 
 
</head> 
 

 
<body> 
 

 
    <button id="buttonxD">press me!</button> 
 
    <script> 
 
     var body = document.getElementsByTagName("body")[0]; 
 
     var canvas = document.createElement("canvas"); 
 
     canvas.height = 500; 
 
     canvas.width = 500; 
 
     var context = canvas.getContext("2d"); 
 
     body.appendChild(canvas); 
 

 
     var rects = []; 
 

 
     function create() { 
 
      // Opacity 
 
      context.globalAlpha = 0.7; 
 
      var color = '#' + Math.round(0xffffff * Math.random()).toString(16); 
 
      context.fillStyle = color; 
 

 
      //Each rectangle's size is (20 ~ 100, 20 ~ 100) 
 
      var coordx = Math.random() * canvas.width; 
 
      var coordy = Math.random() * canvas.width; 
 
      var width = Math.random() * 80 + 20; 
 
      var height = Math.random() * 80 + 20; 
 

 
      var rect = { 
 
       x: coordx, 
 
       y: coordy, 
 
       w: width, 
 
       h: height 
 
      } 
 

 
      var ok = true; 
 
      rects.forEach(function (item) { 
 
       if (isCollide(rect, item)) { 
 
        console.log("collide"); 
 
        ok = false; 
 
       } else { 
 
        console.log("no collision"); 
 
       } 
 
      }) 
 

 
      if (ok) { 
 
       context.fillRect(coordx, coordy, width, height); 
 
       rects.push(rect); 
 
      } else { 
 
       console.log('rect dropped'); 
 
      } 
 

 
      console.log(rects); 
 

 
     } 
 

 
     function isCollide(a, b) { 
 
      return !(
 
       ((a.y + a.h) < (b.y)) || 
 
       (a.y > (b.y + b.h)) || 
 
       ((a.x + a.w) < b.x) || 
 
       (a.x > (b.x + b.w)) 
 
      ); 
 
     } 
 
     document.getElementById('buttonxD').addEventListener('click', create); 
 
    </script> 
 

 
</body> 
 

 
</html>

这只能创建一个矩形，如果没有发生碰撞。

来源

2017-04-15 10:41:05

onclick在画布上创建随机矩形，不会与现有的矩形冲突

回答

相关问题