![](/img/trans.png)
[英]Dynamically Change a traingles size in p5.js Javascript Framework
[英]Flagging cells in grid (Minesweeper in plain JavaScript + p5.js framework)
我一直在嘗試制作一個 function 在右鍵單擊時標記單元格。 我已經有右鍵單擊和所有的東西。 唯一的問題是所有顯示的單元格都會在點擊時被標記。 如果您對 p5.js 有任何疑問,請訪問此處的參考資料。
我現在有這個:
草圖.js
var grid;
var cols;
var rows;
var w = 40;
var totalBoom = 10;
function make2DArray(cols, rows) {
var arr = new Array(cols);
for (var i = 0; i < arr.length; i++) {
arr[i] = new Array(rows);
}
return arr;
}
function setup() {
createCanvas(400, 400);
cols = floor(width / w);
rows = floor(height / w);
grid = make2DArray(cols, rows);
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
grid[i][j] = new cell(i, j, w);
}
}
var spots = [];
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
spots.push([i, j]);
}
}
for (var n = 0; n < totalBoom; n++) {
var index = floor(random(spots.length));
var choice = spots[index];
var i = choice[0];
var j = choice[1];
spots.splice(index, 1);
grid[i][j].boom = true;
}
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
grid[i][j].adjacentCells();
}
}
}
function gameOver() {
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
grid[i][j].revealed = true;
}
}
}
function win() {
if (boom.checked = true) {
}
}
function mousePressed() {
if (mouseButton == LEFT) {
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
if (grid[i][j].hasBoom(mouseX, mouseY)) {
grid[i][j].showBoom();
if (grid[i][j].boom) {
gameOver();
}
}
else if (mouseButton == RIGHT) {
console.log("RIGHTCLICK");
}
}
}
}
}
function draw() {
background(200);
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
grid[i][j].show();
}
}
}
細胞.js
function cell(i, j, w) {
this.i = i;
this.j = j;
this.x = i * w;
this.y = j * w;
this.w = w;
this.neighborCount = 0;
this.boom = false;
this.revealed = false;
this.checked = false;
}
cell.prototype.show = function () {
stroke(0);
noFill();
rect(this.x, this.y, this.w, this.w);
if (this.revealed) {
if (this.boom) {
fill(floor(random(10, 200)), 0, 0);
ellipse(this.x + w * 0.5, this.y + w * 0.5, this.w * 0.5);
} else {
fill(125);
stroke(12);
rect(this.x, this.y, this.w, this.w);
if (this.neighborCount > 0) {
textAlign(CENTER);
textSize(this.w * 0.5);
fill(0);
text(this.neighborCount, this.x + this.w * 0.5, this.y + this.w * 0.75);
}
}
}
}
cell.prototype.adjacentCells = function () {
if (this.boom) {
this.neighborCount = -1;
return;
}
var total = 0;
for (var xoff = -1; xoff <= 1; xoff++) {
for (var yoff = -1; yoff <= 1; yoff++) {
var i = this.i + xoff;
var j = this.j + yoff;
if (i > -1 && i < cols && j > -1 && j < rows) {
var neighbor = grid[i][j];
if (neighbor.boom) {
total++;
}
}
}
}
this.neighborCount = total;
}
cell.prototype.hasBoom = function (x, y) {
return x > this.x && x < this.x + this.w && y > this.y && y < this.y + this.w;
}
cell.prototype.showBoom = function () {
this.revealed = true;
if (this.neighborCount == 0) {
this.floodFill();
}
}
cell.prototype.floodFill = function () {
for (var xoff = -1; xoff <= 1; xoff++) {
for (var yoff = -1; yoff <= 1; yoff++) {
var i = this.i + xoff;
var j = this.j + yoff;
if (i > -1 && i < cols && j > -1 && j < rows) {
var neighbor = grid[i][j];
if (!neighbor.boom && !neighbor.revealed) {
neighbor.showBoom();
}
}
}
}
}
如果您想查看代碼是如何運行的,請單擊此處
順便說一句,不要使用 class 構造函數或任何這些惡作劇代碼東西,它們讓我感到困惑;-;
通過您的代碼后,我發現您在 mouseevent 方法中有一個嵌套循環,用於檢測當前單擊的單元格,並且需要基於RIGHT | LEFT
的不同操作的正確索引。 RIGHT | LEFT
單擊。
您正在檢查RIGHT
擊條件內的LEFT
,它永遠不會是真的。 所以,這是一個修改后的代碼。
function mousePressed() {
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
/*
* on every mouse event, we go through each cell.
* If the click is RIGHT we will mark it check and get out of the loop.
*/
if(mouseButton == RIGHT) {
grid[i][j].checked = true;
return;
}
if (grid[i][j].hasBoom(mouseX, mouseY)) {
grid[i][j].showBoom();
if (grid[i][j].boom) {
gameOver();
}
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.