我正在制作这个“弹出球”游戏，但我在如何找到与我们玩的颜色相同的相邻球方面遇到了困难。谁能帮我吗？
我的 JavaScript 代码:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = 800;
var height = 700;
var COLS = 24;
var ROWS = 6;
var balls = [];
var ballsCL = [
{color:'rgb(255,0,0)', label:"r"},
{color:'rgb(0,255,0)', label:"g"},
{color:'rgb(0,0,255)', label:"b"},
{color:'rgb(255,255,0)', label:"y"},
{color:'rgb(255,0,255)', label: "cr"},
{color:'rgb(0,255,255)', label: "lb"}
];
var count = 0;
var Ball = function(x, y, w) {
this.x = x;
this.y = y;
this.label = ballsCL[w].label;
this.color = ballsCL[w].color;
this.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, 15, 0, 2 * Math.PI, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.stroke();
}
}
// ------------------------------------------------------------------------------- //
var Player = function() {
this.x = width/2;
this.y = height-15/2;
this.color = 'rgb(0,0,0)';
this.angle = 0;
this.draw = function() {
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.angle);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-70);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,-70);
ctx.lineTo(-10,-60);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,-70);
ctx.lineTo(10,-60);
ctx.stroke();
ctx.restore();
}
}
var player = new Player();
// ------------------------------------------------------------------------------- //
var NewBall = function(x, y, w) {
this.iniX = x;
this.iniY = y;
this.x = x;
this.y = y;
this.color = ballsCL[w].color;
this.label = ballsCL[w].label;
this.angle = 0;
this.v = 5;
this.slide = false;
this.w = w;
this.d = 0;
this.sticked = false;
this.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, 15, 0, 2 * Math.PI, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.stroke();
}
this.move = function() {
if(this.slide == true) {
this.x -= Math.sin(this.angle) * this.v;
this.y -= Math.cos(this.angle) * this.v;
}
}
this.stick = function() {
if(this.slide) {
for(var i=0; i<balls.length; i++) {
this.d = Math.round(Math.sqrt((this.y - balls[i].y)*(this.y - balls[i].y)+(this.x - balls[i].x)*(this.x - balls[i].x)));
if(this.d <= 25) {
this.v = 0;
this.y = balls[i].y+30;
if(this.x <= balls[i].x && this.x >= 30) {
this.x = balls[i].x-30/2;
}
if(this.x >= balls[i].x) {
this.x = balls[i].x+30/2;
}
this.slide = false;
this.sticked = true;
}
}
}
}
this.toArray = function() {
if(this.sticked) {
balls.push(new Ball(this.x, this.y, this.w));
this.sticked = false;
newBall = new NewBall(player.x, player.y, Math.floor(Math.random() * 6) + 0);
}
}
this.edges = function() {
if(this.x <= 37/2 || this.x >= width-37/2) {
this.angle = - this.angle;
}
}
}
var newBall = new NewBall(player.x, player.y, Math.floor(Math.random() * 6) + 0);
// ------------------------------------------------------------------------------- //
function pushBalls() {
for(var i=0; i<ROWS; i++) {
for(var j=0; j<COLS; j++) {
if(i % 2) {
balls.push(new Ball(25+j*32+30/2, 30+i*30, Math.floor(Math.random() * 6) + 0));
}
else {
balls.push(new Ball(25+j*32, 30+i*30, Math.floor(Math.random() * 6) + 0));
}
}
}
}
pushBalls();
// ------------------------------------------------------------------------------- //
function addRow() {
count++;
if(count % 1000 === 0) {
for(var i=0; i<balls.length; i++) {
balls[i].y = balls[i].y+30;
}
if(balls[0].x === 25) {
for(var i=23; i>=0; i--) {
balls.unshift(new Ball(25+i*32+30/2, 30, Math.floor(Math.random() * 6) + 0));
}
}
else if(balls[0].x === 40){
for(var i=23; i>=0; i--) {
balls.unshift(new Ball(25+i*32, 30, Math.floor(Math.random() * 6) + 0));
}
}
}
}
function init(){
requestAnimationFrame(draw);
canvas.addEventListener("mouseup", mouseUp);
canvas.addEventListener("mousemove", mouseOver);
}
function mouseUp(e) {
if(newBall.x == player.x && newBall.y == player.y) {
mouseX = e.clientX - (canvas.offsetLeft - window.pageXOffset);
mouseY = e.clientY - (canvas.offsetTop - window.pageYOffset);
newBall.angle = Math.atan2(newBall.x-mouseX, newBall.y-mouseY);
newBall.slide = true;
}
}
function mouseOver(e) {
mouseX = e.clientX - (canvas.offsetLeft - window.pageXOffset);
mouseY = e.clientY - (canvas.offsetTop - window.pageYOffset);
player.angle = -Math.atan2(player.x-mouseX, player.y-mouseY);
}
function draw() {
ctx.clearRect(0,0,800,700);
for(var i=0; i<balls.length; i++) {
balls[i].draw();
}
player.draw();
newBall.draw();
newBall.move();
newBall.edges();
newBall.stick();
newBall.toArray();
addRow();
requestAnimationFrame(draw);
}
init();
和 fiddle : https://jsfiddle.net/eskimopest/ojb4cyqa/1/
最佳答案
给每个球对象一个行和列属性，然后检查该球行和列周围的相邻球。如果球移动，请调整它们的行和列。
例如，用这些行、列检查这些相邻的球:
[row-1,col], [row+1,col], [row,col-1], [row,col+1].
如果需要，您还可以检查对 Angular 邻居:
[row-1,col-1], [row-1,col+1], [row+1,col-1], [row+1,col+1]
关于javascript - 找到具有相同颜色的相邻 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36059158/