Play
:quality(85)/https://cdn.frvr.ai/65b5cf62b90440188fff0d9f.png)
:quality(85)/https://cdn.frvr.ai/65b59b26be57e7cedfee3d49.png)
#arcade
#brickbreaker
#taptojump
#avoidlava
#casualclicker
Creation History
Code edit (7 edits merged)
Please save this source code
Code edit (9 edits merged)
Please save this source code
User prompt
create a new asset and calls called BrickExplosion
User prompt
make it so newbricks do not spawn over existing brick
Code edit (4 edits merged)
Please save this source code
User prompt
add a timer to BrickSilver that spawns Brick after 0.1 seconds
Code edit (1 edits merged)
Please save this source code
User prompt
clone the BrickSilver class to a new class called BrickGold. Create a new asset for this class. Instead of spawning Brick, this class should spawn BrickSilver.
/****
* Classes
****/
var Explosion = Container.expand(function () {
var self = Container.call(this);
var explosionGraphics = self.attachAsset('explosion', {
anchorX: 0.5,
anchorY: 0.5
});
//explosionGraphics.tint = 0xFF6679;
explosionGraphics.alpha = 0.8;
var angle = Math.random() * Math.PI * 2;
var speed = Math.random() * 5;
self.move = function () {
this.x += Math.cos(angle) * speed;
this.y += Math.sin(angle) * speed;
if (explosionGraphics.alpha > 0) {
explosionGraphics.alpha -= 0.02;
} else {
self.destroy();
}
};
self.createExplosionAt = function (x, y) {
for (var i = 0; i < 30; i++) {
var explosion = new Explosion();
explosion.x = x;
explosion.y = y;
explosions.push(explosion);
game.addChild(explosion);
}
};
});
var Ball = Container.expand(function () {
var self = Container.call(this);
var ballGraphics = self.attachAsset('ball', {
anchorX: 0.5,
anchorY: 0.5
});
var brickPrevious = null;
self.checkWallCollisions = function () {
if (self.x - self.width / 2 < leftWall.x + leftWall.width / 2 || self.x + self.width / 2 > rightWall.x - rightWall.width / 2) {
self.velocityX *= -1; // Invert the horizontal velocity
}
if (self.y - self.height / 2 < topWall.y + topWall.height / 2) {
self.y = topWall.y + topWall.height / 2 + self.height / 2;
self.velocityY *= -1; // Invert the vertical velocity
}
};
self.collisionBrick = function (brick) {
var currentTime = Date.now();
var brickWidth = 120; // Assuming brick width is 120 as initialized in assets
if (this.brickPrevious) {
this.lastCollisionX = this.brickPrevious.x;
}
if (!this.lastCollisionTime || currentTime - this.lastCollisionTime > 200) {
// Bounce the ball
this.velocityY *= -1;
// Set the last collision time and position
this.lastCollisionTime = currentTime;
}
if (brick instanceof BrickSilver) {
brick = brick.hitByBall();
}
self.brickPrevious = brick;
};
self.velocityY = -15;
self.firstBounce = true;
self.clickBounce = function () {
self.velocityY = -15;
if (self.firstBounce) {
self.velocityX = 5; // slight horizontal velocity
self.firstBounce = false;
}
};
self.velocityX = 0;
self.move = function () {
self.x += self.velocityX;
self.y += self.velocityY;
self.velocityY += 0.5; // gravity effect
// Check for ball and bomb collision
for (var i = game.children.length - 1; i >= 0; i--) {
var obj = game.children[i];
if (obj instanceof Bomb && self.intersects(obj)) {
LK.effects.flashScreen(0xff0000, 1000);
LK.showGameOver(scoreDisplay.updateScore(score));
return;
}
}
// Check for collisions with walls and make the ball bounce
self.checkWallCollisions();
};
});
var Bomb = Container.expand(function () {
var self = Container.call(this);
var bombGraphics = self.attachAsset('bomb', {
anchorX: 0.5,
anchorY: 0.5
});
self.timer = LK.setTimeout(function () {
self.explode();
}, 3000);
self.explode = function () {
if (self.parent) {
var explosion = game.addChild(new Explosion());
explosion.createExplosionAt(self.x, self.y);
self.destroy();
}
};
});
var Brick = Container.expand(function () {
var self = Container.call(this);
var brickGraphics = self.attachAsset('brick', {
anchorX: 0.5,
anchorY: 0.5
});
});
var BrickSilver = Container.expand(function () {
var self = Container.call(this);
var brickSilverGraphics = self.attachAsset('brickSilver', {
anchorX: 0.5,
anchorY: 0.5
});
self.hitByBall = function () {
LK.setTimeout(function () {
var newBrick = game.addChild(new Brick());
bricks.push(newBrick);
newBrick.x = self.x;
newBrick.y = self.y;
self.destroy();
}, 50);
return null;
};
});
var BrickGold = Container.expand(function () {
var self = Container.call(this);
var brickGoldGraphics = self.attachAsset('brickGold', {
anchorX: 0.5,
anchorY: 0.5
});
self.hitByBall = function () {
var newBrick = game.addChild(new BrickSilver());
bricks.push(newBrick);
newBrick.x = self.x;
newBrick.y = self.y;
self.destroy();
return newBrick;
};
});
var LavaDrop = Container.expand(function () {
var self = Container.call(this);
var lavaDropGraphics = self.attachAsset('lavaDrop', {
anchorX: 0.5,
anchorY: 0.5
});
self.speedY = 5;
self.move = function () {
self.y += self.speedY;
// Destroy the lava drop if it goes off the bottom of the screen
if (self.y > 2732) {
self.destroy();
}
};
});
var StartButton = Container.expand(function () {
var self = Container.call(this);
var startButtonGraphics = self.attachAsset('startButton', {
anchorX: 0.5,
anchorY: 0.5
});
self.on('down', function () {
game.start();
});
});
var BrickExplosion = Container.expand(function () {
var self = Container.call(this);
var explosionGraphics = self.attachAsset('brickExplosion', {
anchorX: 0.5,
anchorY: 0.5
});
explosionGraphics.alpha = 0.8;
var angle = Math.random() * Math.PI * 2;
var speed = Math.random() * 5;
self.move = function () {
this.x += Math.cos(angle) * speed;
this.y += Math.sin(angle) * speed;
if (explosionGraphics.alpha > 0) {
explosionGraphics.alpha -= 0.025;
} else {
self.destroy();
}
};
self.createExplosionAt = function (x, y) {
for (var i = 0; i < 40; i++) {
var explosion = new BrickExplosion();
explosion.x = x;
explosion.y = y;
explosions.push(explosion);
game.addChild(explosion);
}
};
});
var Lava = Container.expand(function () {
var self = Container.call(this);
var lavaGraphics = self.attachAsset('lava', {
anchorX: 0.5,
anchorY: 0
});
self.y = 2800 - self.height; // position at the bottom of the screen
});
var Wall = Container.expand(function (assetId) {
var self = Container.call(this);
var wallGraphics = self.attachAsset(assetId, {
anchorX: 0.5,
anchorY: 0.5
});
});
var ScoreDisplay = Container.expand(function () {
var self = Container.call(this);
var scoreText = new Text2('Score: 0', {
size: 80,
fill: "#ffffff"
});
scoreText.anchor.set(0, 0.5);
self.addChild(scoreText);
self.updateScore = function (newScore) {
scoreText.setText('Score: ' + newScore.toString());
};
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x000000 // Init game with black background
});
/****
* Game Code
****/
var explosions = [];
game.lastCollisionTime = 0;
game.lastCollisionX = 0;
var gameStarted = false;
var score = 0;
var clicksLeft = 8;
var ball = game.addChild(new Ball());
ball.x = 2048 / 2;
ball.y = 2732 / 2.2;
var lavaTiles = [];
var numberOfLavaTiles = Math.ceil(2048 / 400); // Calculate the number of lava tiles needed to cover the screen width
for (var i = 0; i < numberOfLavaTiles; i++) {
var lava = game.addChild(new Lava());
lava.x = i * 400 * 0.90 + 200; // Position each tile with a 5% overlap
lavaTiles.push(lava);
}
var leftWall = game.addChild(new Wall('leftWall'));
leftWall.x = leftWall.width / 2;
leftWall.y = 2732 / 2;
var rightWall = game.addChild(new Wall('rightWall'));
rightWall.x = 2048 - rightWall.width / 2;
rightWall.y = 2732 / 2;
var topWall = game.addChild(new Wall('topWall'));
topWall.x = 2048 / 2;
topWall.y = topWall.height / 4;
var scoreDisplay = game.addChild(new ScoreDisplay());
scoreDisplay.x = 80; // Position score display 50 pixels from the left
scoreDisplay.y = 80; // Position score display 50 pixels from the top
// Create and display clicks left text
var clicksDisplay = new Text2('Clicks left: ' + clicksLeft.toString(), {
size: 60,
fill: "#ffffff"
});
clicksDisplay.anchor.set(1, 0); // Anchor to the top right
LK.gui.topRight.addChild(clicksDisplay);
var bricks = [];
var brickRowCount = 4;
var brickColumnCount = 5;
var brickPadding = 10;
var brickOffsetTop = 400;
var brickOffsetLeft = (2048 - brickColumnCount * (120 + brickPadding)) / 2;
for (var i = 0; i < brickRowCount; i++) {
for (var j = 0; j < brickColumnCount; j++) {
var brick = game.addChild(new Brick());
brick.x = brickOffsetLeft + j * (120 + brickPadding);
brick.y = brickOffsetTop + i * (103.67 + brickPadding);
bricks.push(brick);
}
}
var startButton = game.addChild(new StartButton());
startButton.x = 2048 / 2;
startButton.y = 2732 / 2 - 150;
// Add instruction text below the start button
var instructionText = new Text2('😎 Click to bounce the ball up. 😎\n😓 Every click bounces the ball, but you have limited number of clicks! 😓\n😋 Breaking a brick gives you 2 more clicks though. 😋\n\n😲 Oh, where are those lava drops falling from??? 😲\n😳 And cute little bombs are going to show up too??? 😳', {
size: 55,
fill: "#ffffff",
align: 'center'
});
instructionText.anchor.set(0.5, 0); // Center anchor horizontally, top anchor vertically
instructionText.x = 2048 / 2;
instructionText.y = startButton.y + startButton.height / 2 + 420; // Position below the start button
game.addChild(instructionText);
game.start = function () {
gameStarted = true;
startButton.destroy();
};
game.on('down', function (obj) {
if (gameStarted && clicksLeft > 0) {
ball.clickBounce();
clicksLeft--;
clicksDisplay.setText('Clicks left: ' + clicksLeft.toString());
}
});
LK.on('tick', function () {
if (gameStarted) {
ball.move();
}
// Check collision with bricks and make the ball bounce
for (var i = bricks.length - 1; i >= 0; i--) {
if (ball.intersects(bricks[i])) {
ball.collisionBrick(bricks[i]);
if (bricks[i] instanceof Brick) {
var brickExplosion = game.addChild(new BrickExplosion());
brickExplosion.createExplosionAt(bricks[i].x, bricks[i].y);
}
bricks[i].destroy();
bricks.splice(i, 1);
score += 100;
scoreDisplay.updateScore(score);
clicksLeft += 2;
clicksDisplay.setText('Clicks left: ' + clicksLeft.toString());
}
}
// Check collision with lava
if (ball.intersects(lava) || ball.y > 2732) {
LK.effects.flashScreen(0xff0000, 1000);
LK.showGameOver();
}
// Spawn bricks and bombs at random locations on the top half of the screen
if (bricks.length === 0 || bricks.length < 5 && LK.ticks % (180 + Math.floor(Math.random() * 121)) === 0) {
if (score >= 2000 && instructionText.parent) {
instructionText.destroy();
}
if (score >= 2000) {
var bomb;
do {
bomb = new Bomb();
bomb.x = 300 + Math.random() * (2048 - 600);
bomb.y = 400 + Math.random() * (2732 / 2 - 200);
} while (Math.abs(bomb.x - ball.x) < 300 && Math.abs(bomb.y - ball.y) < 300);
game.addChild(bomb);
}
var newBrick;
var brickType = score >= 2000 && Math.random() < 0.5 ? BrickSilver : Brick;
var positionValid;
do {
positionValid = true;
newBrick = new brickType();
newBrick.x = 300 + Math.random() * (2048 - 600);
newBrick.y = 400 + Math.random() * (2732 / 2 - 200);
// Check if the new brick overlaps with any existing brick
for (var b = 0; b < bricks.length; b++) {
if (newBrick.intersects(bricks[b])) {
positionValid = false;
break;
}
}
} while (!positionValid || Math.abs(newBrick.x - ball.x) < 300 && Math.abs(newBrick.y - ball.y) < 300);
if (positionValid) {
game.addChild(newBrick);
bricks.push(newBrick);
}
}
});
var lavaDrops = [];
var lastLavaDropTime = 0;
LK.on('tick', function () {
// Spawn lava drops logic
if (score >= 1500 && lavaDrops.length < 4 && LK.ticks - lastLavaDropTime > 240 + Math.floor(Math.random() * 121)) {
var lavaDrop = new LavaDrop();
lavaDrop.x = Math.random() * 2048;
lavaDrop.y = -lavaDrop.height;
game.addChild(lavaDrop);
lavaDrops.push(lavaDrop);
lastLavaDropTime = LK.ticks;
}
// Move and check collision with ball, then remove lava drops
for (var i = lavaDrops.length - 1; i >= 0; i--) {
lavaDrops[i].move();
if (ball.intersects(lavaDrops[i])) {
LK.effects.flashScreen(0xff0000, 1000);
LK.showGameOver();
return;
}
if (!lavaDrops[i].parent) {
lavaDrops.splice(i, 1);
}
}
for (var i = explosions.length - 1; i >= 0; i--) {
explosions[i].move();
}
}); ===================================================================
--- original.js
+++ change.js
@@ -178,20 +178,20 @@
anchorY: 0.5
});
explosionGraphics.alpha = 0.8;
var angle = Math.random() * Math.PI * 2;
- var speed = Math.random() * 5 + 2;
+ var speed = Math.random() * 5;
self.move = function () {
this.x += Math.cos(angle) * speed;
this.y += Math.sin(angle) * speed;
if (explosionGraphics.alpha > 0) {
- explosionGraphics.alpha -= 0.02;
+ explosionGraphics.alpha -= 0.025;
} else {
self.destroy();
}
};
self.createExplosionAt = function (x, y) {
- for (var i = 0; i < 20; i++) {
+ for (var i = 0; i < 40; i++) {
var explosion = new BrickExplosion();
explosion.x = x;
explosion.y = y;
explosions.push(explosion);
@@ -317,10 +317,12 @@
// Check collision with bricks and make the ball bounce
for (var i = bricks.length - 1; i >= 0; i--) {
if (ball.intersects(bricks[i])) {
ball.collisionBrick(bricks[i]);
- var brickExplosion = game.addChild(new BrickExplosion());
- brickExplosion.createExplosionAt(bricks[i].x, bricks[i].y);
+ if (bricks[i] instanceof Brick) {
+ var brickExplosion = game.addChild(new BrickExplosion());
+ brickExplosion.createExplosionAt(bricks[i].x, bricks[i].y);
+ }
bricks[i].destroy();
bricks.splice(i, 1);
score += 100;
scoreDisplay.updateScore(score);
Images
:quality(85)/https://cdn.frvr.ai/65b59cf3b90440188fff0ccb.png%3F3)
a cartoon red brick. bright. shiny. pixel art. no text.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/65b5b541b90440188fff0cf1.png%3F3)
a cartoon bomb. bright. shiny. pixel art. no text. front view. already lit.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/65b5b5f4b90440188fff0cff.png%3F3)
A start button. rectangular. text says "start". pixel art style. red and white.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/65b5b86ab90440188fff0d0a.png%3F3)
a cartoon explosion. pixel art style.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/65b5c24bb90440188fff0d2e.png%3F3)
:quality(85)/https://cdn.frvr.ai/65b5ce0ab90440188fff0d8f.png%3F3)
a blue shiny ball. pixel art style. no shadows.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/65b7b6a8d671c97551796bdb.png%3F3)
a shiny silver brick.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/65b7b8f5d671c97551796bea.png%3F3)
a shiny gold brick.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/65b7d298d671c97551796c4d.png%3F3)
:quality(85)/https://cdn.frvr.ai/65b7d57ad671c97551796ca8.png%3F3)
a cartoon explosion made of red bricks. no shadows.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
