Question

我正在尝试使沙子从鼠标上掉下来（出于测试目的，我将沙子的x和y更改为画布的中心）。我的其中一项功能有问题。 drawSand（）无法运行-我相信是因为无法事先初始化sandObj []，但我不确定。我试图通过将数组限制为200个元素来对其进行初始化，但这似乎无济于事。我添加了一些布尔值来测试该函数是否正在完成，而draw是唯一一个不存在的函数（除了drawPaintTool之外，它不是故意启用的）。任何帮助/批评都将有所帮助！

"use strict";

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballX = 0;
var ballY = 0;
var ballRadius = 20;
var sandObj = [];
var sandActive = false;
var sandAmount = 10;
var sandX = 10;
var sandY = 0;
var testDrawPaintToolFunction = false;
var testPaintToolFunction = false;
var testDrawSandFunction = false;
var testMoveSandFunction = false;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  sandAmountDisplay();
  paintTool();
  moveSand();
  drawSand();
}

function drawPaintTool() {
  ctx.beginPath();
  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "white";
  ctx.fill();
  ctx.closePath();

  testDrawPaintToolFunction = true;
}

function paintTool() {
  if (sandActive == true) {
    sandAmount++;

  }
  testPaintToolFunction = true;
}

function drawSand() {
  for (var i = 0; i < sandAmount; i++) {
    sandObj = {
      x: canvas.width / 2,
      y: canvas.height / 2
    };
    ctx.beginPath();
    ctx.rect(sandObj[i].x, sandObj[i].y, 5, 5);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();
  }
  testDrawSandFunction = true;
}

function moveSand() {
  testMoveSandFunction = true;
}

function sandAmountDisplay() {
  ctx.font = "16px Arial";
  ctx.fillStyle = "black";
  ctx.fillText("Sand Amount: " + sandAmount, 8, 20);
  ctx.fillText("Sand Active: " + sandActive, 8, 40);
  ctx.fillText("drawPaintTool: " + testDrawPaintToolFunction, 8, 60);
  ctx.fillText("PaintTool: " + testPaintToolFunction, 8, 80);
  ctx.fillText("drawSand: " + testDrawSandFunction, 8, 100);
  ctx.fillText("moveSand: " + testMoveSandFunction, 8, 120);
}


document.addEventListener("mousemove", mouseMoveHandler, false);
document.addEventListener("mousedown", mouseDownHandler);
document.addEventListener("mouseup", mouseUpHandler);

function mouseMoveHandler(e) {
  var relativeX = e.clientX - canvas.offsetLeft + ballRadius / 2;
  var relativeY = e.clientY - canvas.offsetTop + ballRadius / 2;
  if (relativeX > 0 && relativeX < canvas.width) {
    ballX = relativeX - ballRadius / 2;
  }
  if (relativeY > 0 && relativeY < canvas.height) {
    ballY = relativeY - ballRadius / 2;
  }
}

function mouseDownHandler() {
  sandActive = true;

}

function mouseUpHandler() {
  sandActive = false;
}



setInterval(draw, 10);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Gamedev Canvas Workshop</title>
  <style>
    * {
      padding: 0;
      margin: 15;
    }
    
    canvas {
      background: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>

  <canvas id="myCanvas" width="480" height="320"></canvas>

  <script src="sand.js">
  </script>

</body>

</html>

所以只提供一些帮助，因为如果我注释代码，则很可能不得不写一个更大的段落才能发布此内容，我将解释drawSand函数。因此，for循环用于在每次调用时重新绘制所有沙子-但是，我不得不在此处设置x和y，因为我想不出一种初始化可以连续产生沙子的东西的方法。老实说我迷路了。

编辑：而且sandAmount也在不断变化，这很可能是类似这样的问题。按住鼠标时，sandAmount上升-这就是paintTool的作用。

Answer 1

此功能内：

function drawSand() {
  for (var i = 0; i < sandAmount; i++) {
    sandObj = {
      x: canvas.width / 2,
      y: canvas.height / 2
    };
    ctx.beginPath();
    ctx.rect(sandObj[i].x, sandObj[i].y, 5, 5);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();
  }
  testDrawSandFunction = true;
}

...您正在为sandObj分配一个新的对象值，该值以前是一个数组。您正在以sandObj[i]...向下的数组形式访问它，所以我想这对您来说是一个错误。也许您打算这样做：

sandObj[i] = {
  x: canvas.width / 2,
  y: canvas.height / 2
};

...而不是：

sandObj = {
  x: canvas.width / 2,
  y: canvas.height / 2
};

初始化可能无限的数组吗？

1 个答案: