Javascript onclick在赢得'；不要与现有的冲突_Javascript_Html_Canvas

Javascript onclick在赢得'；不要与现有的冲突

javascript html canvas

Javascript onclick在赢得'；不要与现有的冲突,javascript,html,canvas,Javascript,Html,Canvas,我对这一点非常着迷，到目前为止我所做的是创建了一个函数，该函数创建了随机大小的矩形，它出现在画布的随机位置。我需要做的是在创建新矩形时使用JS draw Rectangle，它不会与现有矩形冲突 <!DOCTYPE html> <html> <head> <title>rectangles sucks</title> </head> <body> <button id="buttonxD">pres

我对这一点非常着迷，到目前为止我所做的是创建了一个函数，该函数创建了随机大小的矩形，它出现在画布的随机位置。我需要做的是在创建新矩形时使用JS draw Rectangle，它不会与现有矩形冲突

<!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>


矩形很烂
按我！
var body=document.getElementsByTagName（“body”）[0]；
var canvas=document.createElement（“canvas”）；
高度=500；
画布宽度=500；
var context=canvas.getContext（“2d”）；
body.appendChild（画布）；
函数create（）{
//不透明
上下文：globalAlpha=0.7；
var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
context.fillStyle=颜色；
//每个矩形的大小为（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'）；

我看到这个函数是用来检查碰撞检测的

  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))
    );
}

函数集合（a，b）{
回来(
（（a.y+a.height）<（b.y））||
（a.y>（b.y+b.height））||
（（a.x+a.width）（b.x+b.width））
);
}

但是我没有把它整合到我的代码中。。。

任何关于我应该用现有代码做什么的想法，都会有帮助，谢谢

您需要一种方法来保持现有矩形的坐标。因此，如果新矩形没有与其中一个发生冲突，则可以对照该列表进行检查


矩形很烂
按我！
var body=document.getElementsByTagName（“body”）[0]；
var canvas=document.createElement（“canvas”）；
高度=500；
画布宽度=500；
var context=canvas.getContext（“2d”）；
body.appendChild（画布）；
var rects=[]；
函数create（）{
//不透明
context.globalAlpha=0.7；
var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
context.fillStyle=颜色；
//每个矩形的大小为（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：宽度，
h:高度
}
var-ok=true；
rects.forEach（函数（项）{
if（isCollide（rect，item））{
控制台日志（“碰撞”）；
ok=假；
}否则{
控制台日志（“无碰撞”）；
}
})
如果（确定）{
fillRect（coordx，coordy，width，height）；
推挤（rect）；
}否则{
log（'rect drop'）；
}
console.log（rects）；
}
函数isCollide（a，b）{
回来(
（（a.y+a.h）<（b.y））||
（a.y>（b.y+b.h））||
（（a.x+a.w）（b.x+b.w））
);
}
document.getElementById（'buttonxD'）。addEventListener（'click'，create'）；

您需要一种方法使坐标与现有矩形保持一致。因此，如果新矩形没有与其中一个发生冲突，则可以对照该列表进行检查


矩形很烂
按我！
var body=document.getElementsByTagName（“body”）[0]；
var canvas=document.createElement（“canvas”）；
高度=500；
画布宽度=500；
var context=canvas.getContext（“2d”）；
body.appendChild（画布）；
var rects=[]；
函数create（）{
//不透明
context.globalAlpha=0.7；
var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
context.fillStyle=颜色；
//每个矩形的大小为（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：宽度，
h:高度
}
var-ok=true；
rects.forEach（函数（项）{
if（isCollide（rect，item））{
控制台日志（“碰撞”）；
ok=假；
}否则{
控制台日志（“无碰撞”）；
}
})
如果（确定）{
fillRect（coordx，coordy，width，height）；
推挤（rect）；
}否则{
log（'rect drop'）；
}
console.log（rects）；
}
函数isCollide（a，b）{
回来(
（（a.y+a.h）<（b.y））||
（a.y>（b.y+b.h））||
（（a.x+a.w）（b.x+b.w））
);
}
document.getElementById（'buttonxD'）。addEventListener（'click'，create'）；