Question

我仍然是javascript的初学者，我正在做一个游戏，关于整个屏幕死白，而画笔变得越来越小，直到完全消失。

我想知道，有没有一种简单的方法来判断整个画布是否已经画过，所以我可以放一个获胜的画面？我正在使用processing.js库，这是我的代码，如果有任何用处：

background(255,0,0);
           var eight = 100;
           var draw = function(){
               strokeWeight(eight);
               point(mouseX,mouseY);
               eight -= 0.2;
               if(eight<0){
                   noStroke();
               }

Answer 1

这是一种确定用户是否对每个像素都打白的一种适度有效的方法

创建一个数组，其中每个画布像素由数组元素表示。
```
var pixels=new Array(canvas.width*canvas.height);
```
最初用全零填充数组。
创建一个变量，该变量保存到目前为止唯一出现的唯一像素数。
```
var whited=0;
```
当用户经过一个像素时，查看该像素是否已被白化。如果它没有被白化，则将其数组值更改为1并增加白色变量。
```
var n = mouseY * canvas.width + mouseX

if(pixels[n]=0){
    pixels[n]=1;
    whited++;
}
```
如果白色的值等于画布上的像素数，您就会获胜。
```
if(whited==pixels.length){
    alert('You have won!');
}
```

一个想法：您可以考虑制作网格，而不是让用户找到每个（微小的）遗漏像素，这样用户就可以更轻松地找到1个（更大）错过的网格单元而不是在白色的海洋中找到一个错过的像素。

Answer 2

您可以浏览所有像素并检查它们是否不是白色

for (var i=0;i<imgData.data.length;i+=4)
{
if(imgData.data[i]==0&&imgData.data[i+1]==0&&imgData.data[i+2]==0&&imgData.data[i]+3==0){alert("white pixel")}
}

http://www.w3schools.com/tags/canvas_getimagedata.asp

Answer 3

由于您正在使用Processing，只需遍历像素：

void setup() {
  ...
}

void draw() {
  ...
}

void yourCheckFunction() {
  loadPixels();
  boolean allWhite = true;
  for(int c: pixels) {
    if(brightness(c) < 255) {
      // we found a not-white pixel!
      allWhite = false;
      break;
    }
  }

  if (allWhite) {
    // the paint surface is entirely white.
  } else {
    // there are non-white patches left
  }
}

有很多方法可以对此进行优化（例如将表面切割成具有自己的管理真/假值的不同区域，这样您就可以先检查它们在之前的运行中是否全白，如果是，则不要我们需要重新检查它们，但这涵盖了基础知识：

假设画布全是白色像素
尝试通过查找非白色像素来使该假设无效
立即停止检查是否
如果没有，你的循环将“自然地”结束

或者，您可以跟踪用户动作绘制的像素数。一旦该像素数等于width*height，所有像素必须为白色（参见markE的答案）

查看整个画布是否已用一种颜色绘制的方法。 Javascript + processing.js

3 个答案: