Hi! I am trying to create a grid like a checkerboard. When players click a button, a ball shoots out of the character. My goal is that when a ball strikes a cell, it changes the color of the cell to match the ball, then rebounds off like a hockey puck. Balls only last a few bounces before expiring.
However, if a ball strikes a cell that’s already the same color, it continues moving in the same direction. I can’t understand how to code this interaction.
The goal is that after a few shots, the grid cells will match the color of the ball and can travel ffurther and eventually strike the enemy base.
The goal is that it should be sort of like minesweeper or breakout, and can continue over ‘safe’ terrain, but basically the ball just keeps bouncing back and forth!
Here’s what I have so far:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 }, // No gravity in this example
},
},
};
var game = new Phaser.Game(config);
function preload() {
// Load your ball and grid cell images here
this.load.image('ball', 'ball.png');
this.load.image('tile', 'cell.png');
}
var grid;
var ball;
function create() {
const tileSize = 75; // Set the size of each tile
const rows = 8; // Number of rows
const cols = 10; // Number of columns
const tileColor = 0x77FFFF; // Initial tile color
// this.physics.createCheckerboard()
// Create a group to hold the tiles
const tilesGroup = this.add.group();
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
const x = j * tileSize;
const y = i * tileSize;
const tile = this.physics.add.sprite(x, y, 'tile');
tile.onCollide=true;
tile.setTint(tileColor);
tilesGroup.add(tile);
tile.setImmovable(true); // Make the tiles immovable
}
}
const ball = this.physics.add.sprite(50, 50, 'ball');
ball
.setScale(0.1)
.setBounce(1)
.setVelocity(400, 200);
// .setCollideWorldBounds(true);
ball.onCollide=true;
// tilesGroup.onCollide=true;
this.physics.world.setBounds(0, 0, 800, 600); // Set world bounds
this.physics.add.collider(ball, tilesGroup, onCollision); // Add collision with tiles
}
// function createGrid(group, rows, cols) {
// for (var row = 0; row < rows; row++) {
// for (var col = 0; col < cols; col++) {
// var cell = group.create(col * 16, row * 16, 'gridCell');
// cell.onCollide=true;
// cell.setScale=0.3;
// tile.hasBeenHit = false;
// cell.setAlpha(0.5); // Set initial alpha to make the cells semi-transparent
// }
// }
// }
function onCollision(ball, tile) {
if (!tile.hasBeenHit) {
console.log("tile has not been hit");
tile.setTint(0x0000FF);
tile.onCollide=false;
tile.hasBeenHit = true; // Mark the tile as hit
// Make the ball bounce off only if it's the first hit
ball.setVelocityX(-ball.body.velocity.x); // Reverse the ball's X velocity
ball.setVelocityY(-ball.body.velocity.y); // Reverse the ball's Y velocity
}
console.log("ball hit tile");
return true;
}
function changeTileColor(ball, tile) {
if (tile.Hit == true){
console.log("already hit, skipping");
return false;
}
tile.setTint(0xFFFFFF); // Change tile color to blue
tile.Hit = true;
console.log("set color");
return true;
}
function toggleCellColor(ball, cell) {
// Function to be called when the ball collides with a grid cell
console.log("ball hit cell");
if(cell.Hit === true){
return true;
}
// Change the tint color of the cell
if (cell.tintTopLeft === 0xFFFFFF) {
cell.setTint(0xFF0000); // Change the cell color to red
} else {
cell.clearTint(); // Reset the cell color
}
cell.Hit = true;
}
function toggleCellColor2(ball, cell) {
// Function to be called when the ball collides with a grid cell
console.log("222 ball hit cell");
// Change the tint color of the cell
if (cell.tintTopLeft === 0xFFFFFF) {
cell.setTint(0xFF0000); // Change the cell color to red
} else {
cell.clearTint(); // Reset the cell color
}
}
console.log("game loaded");