canvas 中是否有一个 Javascript 函数可以随机定位一个正方形，使得特定点 (x,y) 位于其中？

Question

这是一个游戏。我正在使用画布绘制一个正方形，我希望该正方形在画布上随机放置，但仍包含玩家开始的点 (x,y)。我在手动编码时遇到困难。

Answer 1

使用函数在范围之间随机化数字，就像我的

random_int

。然后我们需要将正方形的左上角放在

playerX - squareSize

和

playerX

之间，对于

Y

也是如此。

function random_int(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function drawPlayer(ctx, x, y) {
  ctx.beginPath();
  ctx.fillStyle = "green"
  ctx.arc(x, y, 5, 0, 2 * Math.PI);
  ctx.fill();
}

function drawSquare(ctx, x, y, size) {
  ctx.strokeStyle = "black"
  ctx.strokeRect(x, y, size, size);
}

function draw() {
  var canvas = document.querySelector("#canvas");
  var ctx = canvas.getContext("2d")

  var cx = canvas.width
  var cy = canvas.height
  ctx.clearRect(0, 0, cx, cy)
  var edge = Math.min(cx, cy)
  var px = random_int(0, cx)
  var py = random_int(0, cy)
  var size = random_int(20, edge)
  var x1 = px - size
  var x2 = px
  var xc = random_int(Math.max(px - size, 0), Math.min(px, cx - size))
  var y1 = py - size
  var y2 = py
  var yc = random_int(Math.max(py - size, 0), Math.min(py, cy - size))

  drawPlayer(ctx, px, py)
  drawSquare(ctx, xc, yc, size)

}

draw()

body {
  background: #333;
}

#canvas {
  border: 1px solid red;
  margin-right: 20px;
}

<canvas id="canvas" width="400" height="150"></canvas>
<button onclick="draw()">again</button>