Play
:quality(85)/https://cdn.frvr.ai/680be5da5b989742acfc06dc.png)
:quality(85)/https://cdn.frvr.ai/680be6865b989742acfc06fe.png)
#Demon
#Hell
#Survive
#Mystery
#Fun
Creation History
User prompt
And then when you go to hell it'll make a hole in the ground if you clicked the yellow square
User prompt
And after you click the yellow square the text touch me disappears
User prompt
Now add the word touch me next to it
User prompt
Once you click the yellow square it dissappear
User prompt
Now add a yellow square somewhere you can tap
User prompt
And when you go to hell you have a 5 second forcefield which won't let you die at all ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
When you touch demons or lava you die
User prompt
Even more
User prompt
After the animation when ur in hell make the whole screen red
User prompt
Thank you that helped
User prompt
IT DIDNT WORK MAKE THE WHOLE SCREEN COVERED
User prompt
By the way the whole screen isn't covered with the red ground and trees and lava
User prompt
When you get teleported to hell I noticed that the whole screen needs to be red with more of those trees
User prompt
Change the description and the name of the game
User prompt
After you click your kid the screening turn white and you'll be teleported to hell being able to control the character you picked
User prompt
When you click on a kid it'll show a church and then suddenly they all get teleported to hell
User prompt
When you click on any of those kids it'll show a quick video of them going to church and then getting teleported to hell ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Make them pixel and more realistic
User prompt
Now add random kids that are supposed to be the characters and put them on the square
User prompt
Make them a bit spaced out and even and a little smaller
User prompt
Make them 11x bigger
User prompt
And when you click play there's 6 squares
User prompt
Please fix the bug: 'tween.to is not a function' in or related to this line: 'tween.to(bloodSplatter, 2000, {' Line Number: 52 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Now add the word PLAY On the button with a creepy font and blood on it
User prompt
Make it bigger
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Kid = Container.expand(function () {
var self = Container.call(this);
// Create pixel art kid using multiple boxes
var skinColors = [0xFFD3B6, 0xFFAEC0, 0xA2C5AC, 0xCCABD8, 0xB6CFB6, 0xF2C1B6];
var hairColors = [0x553311, 0x221100, 0x775533, 0x000000, 0xAA7722, 0x442200];
var skinTone = skinColors[Math.floor(Math.random() * skinColors.length)];
var hairColor = hairColors[Math.floor(Math.random() * hairColors.length)];
// Create pixel body - this is our base
var body = new Container();
self.addChild(body);
// Create body elements (pixelated style)
var bodyParts = [
// Torso
{
width: 40,
height: 60,
x: 0,
y: -80,
color: skinTone
},
// Legs
{
width: 16,
height: 50,
x: -12,
y: -20,
color: Math.random() > 0.5 ? 0x3355AA : 0x993333
}, {
width: 16,
height: 50,
x: 12,
y: -20,
color: Math.random() > 0.5 ? 0x3355AA : 0x993333
},
// Arms
{
width: 12,
height: 40,
x: -26,
y: -90,
color: skinTone
}, {
width: 12,
height: 40,
x: 26,
y: -90,
color: skinTone
},
// Head (base)
{
width: 44,
height: 44,
x: 0,
y: -130,
color: skinTone
}];
// Add all body parts
for (var i = 0; i < bodyParts.length; i++) {
var part = bodyParts[i];
var box = LK.getAsset('kid', {
width: part.width,
height: part.height,
anchorX: 0.5,
anchorY: 0.5,
x: part.x,
y: part.y
});
box.tint = part.color;
body.addChild(box);
}
// Add pixel face features
var faceFeatures = [
// Eyes
{
width: 8,
height: 8,
x: -10,
y: -135,
color: 0x000000
}, {
width: 8,
height: 8,
x: 10,
y: -135,
color: 0x000000
},
// Mouth
{
width: 20,
height: 6,
x: 0,
y: -120,
color: Math.random() > 0.5 ? 0xCC3333 : 0x000000
}];
for (var i = 0; i < faceFeatures.length; i++) {
var feature = faceFeatures[i];
var box = LK.getAsset('kid', {
width: feature.width,
height: feature.height,
anchorX: 0.5,
anchorY: 0.5,
x: feature.x,
y: feature.y
});
box.tint = feature.color;
body.addChild(box);
}
// Hair style (random selection between a few pixel art styles)
var hairStyle = Math.floor(Math.random() * 3);
var hairBlocks;
if (hairStyle === 0) {
// Short hair
hairBlocks = [{
width: 44,
height: 12,
x: 0,
y: -152,
color: hairColor
}, {
width: 12,
height: 8,
x: -20,
y: -140,
color: hairColor
}, {
width: 12,
height: 8,
x: 20,
y: -140,
color: hairColor
}];
} else if (hairStyle === 1) {
// Long hair
hairBlocks = [{
width: 44,
height: 12,
x: 0,
y: -152,
color: hairColor
}, {
width: 52,
height: 8,
x: 0,
y: -144,
color: hairColor
}, {
width: 12,
height: 30,
x: -24,
y: -128,
color: hairColor
}, {
width: 12,
height: 30,
x: 24,
y: -128,
color: hairColor
}];
} else {
// Spikey hair
hairBlocks = [{
width: 8,
height: 16,
x: -18,
y: -156,
color: hairColor
}, {
width: 8,
height: 20,
x: -6,
y: -160,
color: hairColor
}, {
width: 8,
height: 24,
x: 6,
y: -164,
color: hairColor
}, {
width: 8,
height: 18,
x: 18,
y: -158,
color: hairColor
}, {
width: 44,
height: 12,
x: 0,
y: -148,
color: hairColor
}];
}
for (var i = 0; i < hairBlocks.length; i++) {
var block = hairBlocks[i];
var box = LK.getAsset('kid', {
width: block.width,
height: block.height,
anchorX: 0.5,
anchorY: 0.5,
x: block.x,
y: block.y
});
box.tint = block.color;
body.addChild(box);
}
// Add accessories (randomly)
if (Math.random() > 0.6) {
var accessoryColor = Math.random() * 0xFFFFFF;
var accessory = LK.getAsset('kid', {
width: 24,
height: 8,
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: -148
});
accessory.tint = accessoryColor; // random glasses or hat
body.addChild(accessory);
}
// Pixel bounce animation
self.bounceOffset = Math.random() * Math.PI * 2;
self.update = function () {
var bounce = Math.sin(LK.ticks / (20 + Math.random() * 10) + self.bounceOffset) * 3;
body.y = bounce;
// Small random pixel movements to simulate "pixelated" animation
if (LK.ticks % 15 === 0) {
// Occasionally move 1px in random direction
body.x = (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 2);
}
};
return self;
});
var Square = Container.expand(function () {
var self = Container.call(this);
// Create pixel platform using multiple blocks
var platformContainer = new Container();
self.addChild(platformContainer);
// Choose a base color for the platform
var baseColors = [0x886655, 0x778899, 0x669944, 0x665577, 0x775544];
var baseColor = baseColors[Math.floor(Math.random() * baseColors.length)];
// Create main platform block (slightly wider than tall for standing)
var mainWidth = 300;
var mainHeight = 80;
var mainBlock = LK.getAsset('white_button', {
width: mainWidth,
height: mainHeight,
anchorX: 0.5,
anchorY: 0.5
});
mainBlock.tint = baseColor;
platformContainer.addChild(mainBlock);
// Add pixelated details to make it look like a platform
var pixelDetails = [
// Top edge highlights
{
width: mainWidth,
height: 10,
x: 0,
y: -mainHeight / 2 + 5,
color: lightenColor(baseColor, 30)
},
// Bottom edge shadows
{
width: mainWidth,
height: 10,
x: 0,
y: mainHeight / 2 - 5,
color: darkenColor(baseColor, 30)
},
// Random pixel details
{
width: 20,
height: 20,
x: -mainWidth / 3,
y: -10,
color: darkenColor(baseColor, 15)
}, {
width: 30,
height: 15,
x: mainWidth / 4,
y: 5,
color: lightenColor(baseColor, 15)
}];
// Add all pixel details
for (var i = 0; i < pixelDetails.length; i++) {
var detail = pixelDetails[i];
var box = LK.getAsset('white_button', {
width: detail.width,
height: detail.height,
anchorX: 0.5,
anchorY: 0.5,
x: detail.x,
y: detail.y
});
box.tint = detail.color;
platformContainer.addChild(box);
}
// Helper function to lighten a color
function lightenColor(color, percent) {
var r = color >> 16 & 0xFF;
var g = color >> 8 & 0xFF;
var b = color & 0xFF;
r = Math.min(255, r + percent);
g = Math.min(255, g + percent);
b = Math.min(255, b + percent);
return r << 16 | g << 8 | b;
}
// Helper function to darken a color
function darkenColor(color, percent) {
var r = color >> 16 & 0xFF;
var g = color >> 8 & 0xFF;
var b = color & 0xFF;
r = Math.max(0, r - percent);
g = Math.max(0, g - percent);
b = Math.max(0, b - percent);
return r << 16 | g << 8 | b;
}
// Add kid character to the square
var kid = new Kid();
kid.y = -mainHeight / 2 - 100; // Position kid on top of square
self.addChild(kid);
// Add pixel shadow
var shadow = LK.getAsset('white_button', {
width: mainWidth + 20,
height: 15,
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: mainHeight / 2 + 10
});
shadow.tint = 0x000000;
shadow.alpha = 0.3;
platformContainer.addChild(shadow);
// Add slight floating animation to the platform
self.yOffset = Math.random() * Math.PI * 2;
self.update = function () {
platformContainer.y = Math.sin(LK.ticks / 100 + self.yOffset) * 5;
// Occasionally add pixel jitter for pixel effect
if (LK.ticks % 30 === 0) {
platformContainer.y += Math.random() > 0.5 ? 1 : -1;
}
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x000000
});
/****
* Game Code
****/
//Create a pixel-style button container
var button = new Container();
button.x = 2048 / 2;
button.y = 2732 / 2;
// Create main button background with pixelated appearance
var buttonBase = LK.getAsset('white_button', {
width: 600,
height: 200,
anchorX: 0.5,
anchorY: 0.5
});
buttonBase.tint = 0x332222; // Dark reddish background
button.addChild(buttonBase);
// Add pixel border
var pixelBorderWidth = 15;
var pixelBorder = [
// Top edge
{
width: 600,
height: pixelBorderWidth,
x: 0,
y: -200 / 2 + pixelBorderWidth / 2,
color: 0x552222
},
// Bottom edge
{
width: 600,
height: pixelBorderWidth,
x: 0,
y: 200 / 2 - pixelBorderWidth / 2,
color: 0x220000
},
// Left edge
{
width: pixelBorderWidth,
height: 200,
x: -600 / 2 + pixelBorderWidth / 2,
y: 0,
color: 0x441111
},
// Right edge
{
width: pixelBorderWidth,
height: 200,
x: 600 / 2 - pixelBorderWidth / 2,
y: 0,
color: 0x220000
}];
for (var i = 0; i < pixelBorder.length; i++) {
var border = pixelBorder[i];
var borderPiece = LK.getAsset('white_button', {
width: border.width,
height: border.height,
anchorX: 0.5,
anchorY: 0.5,
x: border.x,
y: border.y
});
borderPiece.tint = border.color;
button.addChild(borderPiece);
}
// Add pixelated blood splatter (using multiple smaller rectangles)
var bloodSplatterContainer = new Container();
button.addChild(bloodSplatterContainer);
var bloodPixels = [{
width: 120,
height: 50,
x: -200,
y: -50,
color: 0x990000,
alpha: 0.8
}, {
width: 80,
height: 30,
x: -150,
y: 20,
color: 0xAA0000,
alpha: 0.7
}, {
width: 150,
height: 40,
x: -80,
y: -40,
color: 0x880000,
alpha: 0.9
}, {
width: 90,
height: 60,
x: 50,
y: 10,
color: 0xCC0000,
alpha: 0.8
}, {
width: 130,
height: 45,
x: 180,
y: -15,
color: 0xAA0000,
alpha: 0.7
}, {
width: 50,
height: 90,
x: 100,
y: -60,
color: 0x990000,
alpha: 0.6
}, {
width: 70,
height: 25,
x: -220,
y: 30,
color: 0xAA0000,
alpha: 0.5
}];
for (var i = 0; i < bloodPixels.length; i++) {
var blood = bloodPixels[i];
var bloodPiece = LK.getAsset('blood_splatter', {
width: blood.width,
height: blood.height,
anchorX: 0.5,
anchorY: 0.5,
x: blood.x,
y: blood.y
});
bloodPiece.tint = blood.color;
bloodPiece.alpha = blood.alpha;
bloodSplatterContainer.addChild(bloodPiece);
}
// Keep reference to bloodSplatterContainer for animation
var bloodSplatter = bloodSplatterContainer;
// Create pixel-style "PLAY" text
var playText = new Text2('PLAY', {
size: 120,
fill: 0xFF0000,
font: "Chiller,Creepster,'Times New Roman'"
});
playText.anchor.set(0.5, 0.5);
button.addChild(playText);
// Add slight rotation to the text for creepier effect
playText.rotation = -0.05;
// Animate the blood dripping effect
function animateBlood() {
tween(bloodSplatter, {
alpha: 0.6,
y: bloodSplatter.y + 10
}, {
duration: 2000,
onFinish: function onComplete() {
tween(bloodSplatter, {
alpha: 0.8,
y: bloodSplatter.y - 10
}, {
duration: 2000,
onFinish: animateBlood
});
}
});
}
animateBlood();
//Add button to the game
game.addChild(button);
// Array to store squares
var squares = [];
//Handle button press
button.interactive = true;
button.down = function (x, y, obj) {
console.log("Button pressed");
//Flash the button on press
LK.effects.flashObject(button, 0xCCCCCC, 300);
// Clear existing squares
for (var i = 0; i < squares.length; i++) {
if (squares[i].parent) {
squares[i].parent.removeChild(squares[i]);
}
}
squares = [];
// Create 6 new squares with spacing to fit the kids
var centerX = 2048 / 2;
var centerY = 2732 / 2;
var horizontalOffset = 400;
var verticalOffset = 450;
// Position squares in a more evenly spaced 2x3 grid pattern
var positions = [{
x: centerX - horizontalOffset,
y: centerY - verticalOffset
}, {
x: centerX,
y: centerY - verticalOffset
}, {
x: centerX + horizontalOffset,
y: centerY - verticalOffset
}, {
x: centerX - horizontalOffset,
y: centerY + verticalOffset
}, {
x: centerX,
y: centerY + verticalOffset
}, {
x: centerX + horizontalOffset,
y: centerY + verticalOffset
}];
// Create and add each square with kid
for (var i = 0; i < 6; i++) {
var square = new Square();
square.x = positions[i].x;
square.y = positions[i].y;
squares.push(square);
game.addChild(square);
}
// Add bloody pulse effect when pressed
tween(playText, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 150,
onFinish: function onComplete() {
tween(playText, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 150
});
}
});
};
// Update function for game to call update on all elements
game.update = function () {
// Update all squares and their kids
for (var i = 0; i < squares.length; i++) {
// Call square's update method if available
if (squares[i].update) {
squares[i].update();
}
// Make sure the kid's update method is called
if (squares[i].children) {
for (var j = 0; j < squares[i].children.length; j++) {
if (squares[i].children[j].update) {
squares[i].children[j].update();
}
}
}
}
};
; ===================================================================
--- original.js
+++ change.js
@@ -7,59 +7,348 @@
* Classes
****/
var Kid = Container.expand(function () {
var self = Container.call(this);
- // Create kid shape
- var kidGraphics = self.attachAsset('kid', {
- anchorX: 0.5,
- anchorY: 1.0,
- scaleX: 1.5,
- scaleY: 1.5
- });
- // Randomize kid color for variety
- var kidColors = [0xFFD3B6, 0xFFAEC0, 0xA2C5AC, 0xCCABD8, 0xB6CFB6, 0xF2C1B6];
- kidGraphics.tint = kidColors[Math.floor(Math.random() * kidColors.length)];
- // Add random hair
- var hairHeight = Math.random() * 30 + 20;
- var hairGraphics = self.attachAsset('kid', {
- anchorX: 0.5,
- anchorY: 1.0,
- width: 100,
- height: hairHeight,
- y: -200
- });
- hairGraphics.tint = Math.random() * 0x888888;
- // Add randomly sized head
- var headGraphics = self.attachAsset('kid', {
- anchorX: 0.5,
- anchorY: 0.5,
- shape: 'ellipse',
- width: 80,
- height: 90,
- y: -160
- });
- headGraphics.tint = kidColors[Math.floor(Math.random() * kidColors.length)];
- // Random animation
+ // Create pixel art kid using multiple boxes
+ var skinColors = [0xFFD3B6, 0xFFAEC0, 0xA2C5AC, 0xCCABD8, 0xB6CFB6, 0xF2C1B6];
+ var hairColors = [0x553311, 0x221100, 0x775533, 0x000000, 0xAA7722, 0x442200];
+ var skinTone = skinColors[Math.floor(Math.random() * skinColors.length)];
+ var hairColor = hairColors[Math.floor(Math.random() * hairColors.length)];
+ // Create pixel body - this is our base
+ var body = new Container();
+ self.addChild(body);
+ // Create body elements (pixelated style)
+ var bodyParts = [
+ // Torso
+ {
+ width: 40,
+ height: 60,
+ x: 0,
+ y: -80,
+ color: skinTone
+ },
+ // Legs
+ {
+ width: 16,
+ height: 50,
+ x: -12,
+ y: -20,
+ color: Math.random() > 0.5 ? 0x3355AA : 0x993333
+ }, {
+ width: 16,
+ height: 50,
+ x: 12,
+ y: -20,
+ color: Math.random() > 0.5 ? 0x3355AA : 0x993333
+ },
+ // Arms
+ {
+ width: 12,
+ height: 40,
+ x: -26,
+ y: -90,
+ color: skinTone
+ }, {
+ width: 12,
+ height: 40,
+ x: 26,
+ y: -90,
+ color: skinTone
+ },
+ // Head (base)
+ {
+ width: 44,
+ height: 44,
+ x: 0,
+ y: -130,
+ color: skinTone
+ }];
+ // Add all body parts
+ for (var i = 0; i < bodyParts.length; i++) {
+ var part = bodyParts[i];
+ var box = LK.getAsset('kid', {
+ width: part.width,
+ height: part.height,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: part.x,
+ y: part.y
+ });
+ box.tint = part.color;
+ body.addChild(box);
+ }
+ // Add pixel face features
+ var faceFeatures = [
+ // Eyes
+ {
+ width: 8,
+ height: 8,
+ x: -10,
+ y: -135,
+ color: 0x000000
+ }, {
+ width: 8,
+ height: 8,
+ x: 10,
+ y: -135,
+ color: 0x000000
+ },
+ // Mouth
+ {
+ width: 20,
+ height: 6,
+ x: 0,
+ y: -120,
+ color: Math.random() > 0.5 ? 0xCC3333 : 0x000000
+ }];
+ for (var i = 0; i < faceFeatures.length; i++) {
+ var feature = faceFeatures[i];
+ var box = LK.getAsset('kid', {
+ width: feature.width,
+ height: feature.height,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: feature.x,
+ y: feature.y
+ });
+ box.tint = feature.color;
+ body.addChild(box);
+ }
+ // Hair style (random selection between a few pixel art styles)
+ var hairStyle = Math.floor(Math.random() * 3);
+ var hairBlocks;
+ if (hairStyle === 0) {
+ // Short hair
+ hairBlocks = [{
+ width: 44,
+ height: 12,
+ x: 0,
+ y: -152,
+ color: hairColor
+ }, {
+ width: 12,
+ height: 8,
+ x: -20,
+ y: -140,
+ color: hairColor
+ }, {
+ width: 12,
+ height: 8,
+ x: 20,
+ y: -140,
+ color: hairColor
+ }];
+ } else if (hairStyle === 1) {
+ // Long hair
+ hairBlocks = [{
+ width: 44,
+ height: 12,
+ x: 0,
+ y: -152,
+ color: hairColor
+ }, {
+ width: 52,
+ height: 8,
+ x: 0,
+ y: -144,
+ color: hairColor
+ }, {
+ width: 12,
+ height: 30,
+ x: -24,
+ y: -128,
+ color: hairColor
+ }, {
+ width: 12,
+ height: 30,
+ x: 24,
+ y: -128,
+ color: hairColor
+ }];
+ } else {
+ // Spikey hair
+ hairBlocks = [{
+ width: 8,
+ height: 16,
+ x: -18,
+ y: -156,
+ color: hairColor
+ }, {
+ width: 8,
+ height: 20,
+ x: -6,
+ y: -160,
+ color: hairColor
+ }, {
+ width: 8,
+ height: 24,
+ x: 6,
+ y: -164,
+ color: hairColor
+ }, {
+ width: 8,
+ height: 18,
+ x: 18,
+ y: -158,
+ color: hairColor
+ }, {
+ width: 44,
+ height: 12,
+ x: 0,
+ y: -148,
+ color: hairColor
+ }];
+ }
+ for (var i = 0; i < hairBlocks.length; i++) {
+ var block = hairBlocks[i];
+ var box = LK.getAsset('kid', {
+ width: block.width,
+ height: block.height,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: block.x,
+ y: block.y
+ });
+ box.tint = block.color;
+ body.addChild(box);
+ }
+ // Add accessories (randomly)
+ if (Math.random() > 0.6) {
+ var accessoryColor = Math.random() * 0xFFFFFF;
+ var accessory = LK.getAsset('kid', {
+ width: 24,
+ height: 8,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: -148
+ });
+ accessory.tint = accessoryColor; // random glasses or hat
+ body.addChild(accessory);
+ }
+ // Pixel bounce animation
+ self.bounceOffset = Math.random() * Math.PI * 2;
self.update = function () {
- self.rotation = Math.sin(LK.ticks / 30 + Math.random() * 5) * 0.05;
+ var bounce = Math.sin(LK.ticks / (20 + Math.random() * 10) + self.bounceOffset) * 3;
+ body.y = bounce;
+ // Small random pixel movements to simulate "pixelated" animation
+ if (LK.ticks % 15 === 0) {
+ // Occasionally move 1px in random direction
+ body.x = (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 2);
+ }
};
return self;
});
var Square = Container.expand(function () {
var self = Container.call(this);
- // Create square shape
- var squareGraphics = self.attachAsset('white_button', {
+ // Create pixel platform using multiple blocks
+ var platformContainer = new Container();
+ self.addChild(platformContainer);
+ // Choose a base color for the platform
+ var baseColors = [0x886655, 0x778899, 0x669944, 0x665577, 0x775544];
+ var baseColor = baseColors[Math.floor(Math.random() * baseColors.length)];
+ // Create main platform block (slightly wider than tall for standing)
+ var mainWidth = 300;
+ var mainHeight = 80;
+ var mainBlock = LK.getAsset('white_button', {
+ width: mainWidth,
+ height: mainHeight,
anchorX: 0.5,
- anchorY: 0.5,
- scaleX: 4.0,
- scaleY: 4.0
+ anchorY: 0.5
});
- // Randomize color
- squareGraphics.tint = Math.random() * 0xFFFFFF;
+ mainBlock.tint = baseColor;
+ platformContainer.addChild(mainBlock);
+ // Add pixelated details to make it look like a platform
+ var pixelDetails = [
+ // Top edge highlights
+ {
+ width: mainWidth,
+ height: 10,
+ x: 0,
+ y: -mainHeight / 2 + 5,
+ color: lightenColor(baseColor, 30)
+ },
+ // Bottom edge shadows
+ {
+ width: mainWidth,
+ height: 10,
+ x: 0,
+ y: mainHeight / 2 - 5,
+ color: darkenColor(baseColor, 30)
+ },
+ // Random pixel details
+ {
+ width: 20,
+ height: 20,
+ x: -mainWidth / 3,
+ y: -10,
+ color: darkenColor(baseColor, 15)
+ }, {
+ width: 30,
+ height: 15,
+ x: mainWidth / 4,
+ y: 5,
+ color: lightenColor(baseColor, 15)
+ }];
+ // Add all pixel details
+ for (var i = 0; i < pixelDetails.length; i++) {
+ var detail = pixelDetails[i];
+ var box = LK.getAsset('white_button', {
+ width: detail.width,
+ height: detail.height,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: detail.x,
+ y: detail.y
+ });
+ box.tint = detail.color;
+ platformContainer.addChild(box);
+ }
+ // Helper function to lighten a color
+ function lightenColor(color, percent) {
+ var r = color >> 16 & 0xFF;
+ var g = color >> 8 & 0xFF;
+ var b = color & 0xFF;
+ r = Math.min(255, r + percent);
+ g = Math.min(255, g + percent);
+ b = Math.min(255, b + percent);
+ return r << 16 | g << 8 | b;
+ }
+ // Helper function to darken a color
+ function darkenColor(color, percent) {
+ var r = color >> 16 & 0xFF;
+ var g = color >> 8 & 0xFF;
+ var b = color & 0xFF;
+ r = Math.max(0, r - percent);
+ g = Math.max(0, g - percent);
+ b = Math.max(0, b - percent);
+ return r << 16 | g << 8 | b;
+ }
// Add kid character to the square
var kid = new Kid();
- kid.y = -squareGraphics.height / 4; // Position kid on top of square
+ kid.y = -mainHeight / 2 - 100; // Position kid on top of square
self.addChild(kid);
+ // Add pixel shadow
+ var shadow = LK.getAsset('white_button', {
+ width: mainWidth + 20,
+ height: 15,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: mainHeight / 2 + 10
+ });
+ shadow.tint = 0x000000;
+ shadow.alpha = 0.3;
+ platformContainer.addChild(shadow);
+ // Add slight floating animation to the platform
+ self.yOffset = Math.random() * Math.PI * 2;
+ self.update = function () {
+ platformContainer.y = Math.sin(LK.ticks / 100 + self.yOffset) * 5;
+ // Occasionally add pixel jitter for pixel effect
+ if (LK.ticks % 30 === 0) {
+ platformContainer.y += Math.random() > 0.5 ? 1 : -1;
+ }
+ };
return self;
});
/****
@@ -71,30 +360,142 @@
/****
* Game Code
****/
-//Create a white button for the game
-var button = LK.getAsset('white_button', {
+//Create a pixel-style button container
+var button = new Container();
+button.x = 2048 / 2;
+button.y = 2732 / 2;
+// Create main button background with pixelated appearance
+var buttonBase = LK.getAsset('white_button', {
width: 600,
height: 200,
anchorX: 0.5,
- anchorY: 0.5,
- x: 2048 / 2,
- y: 2732 / 2
+ anchorY: 0.5
});
-// Add blood splatter on the button
-var bloodSplatter = LK.getAsset('blood_splatter', {
- anchorX: 0.5,
- anchorY: 0.5,
+buttonBase.tint = 0x332222; // Dark reddish background
+button.addChild(buttonBase);
+// Add pixel border
+var pixelBorderWidth = 15;
+var pixelBorder = [
+// Top edge
+{
+ width: 600,
+ height: pixelBorderWidth,
x: 0,
+ y: -200 / 2 + pixelBorderWidth / 2,
+ color: 0x552222
+},
+// Bottom edge
+{
+ width: 600,
+ height: pixelBorderWidth,
+ x: 0,
+ y: 200 / 2 - pixelBorderWidth / 2,
+ color: 0x220000
+},
+// Left edge
+{
+ width: pixelBorderWidth,
+ height: 200,
+ x: -600 / 2 + pixelBorderWidth / 2,
y: 0,
+ color: 0x441111
+},
+// Right edge
+{
+ width: pixelBorderWidth,
+ height: 200,
+ x: 600 / 2 - pixelBorderWidth / 2,
+ y: 0,
+ color: 0x220000
+}];
+for (var i = 0; i < pixelBorder.length; i++) {
+ var border = pixelBorder[i];
+ var borderPiece = LK.getAsset('white_button', {
+ width: border.width,
+ height: border.height,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: border.x,
+ y: border.y
+ });
+ borderPiece.tint = border.color;
+ button.addChild(borderPiece);
+}
+// Add pixelated blood splatter (using multiple smaller rectangles)
+var bloodSplatterContainer = new Container();
+button.addChild(bloodSplatterContainer);
+var bloodPixels = [{
+ width: 120,
+ height: 50,
+ x: -200,
+ y: -50,
+ color: 0x990000,
alpha: 0.8
-});
-button.addChild(bloodSplatter);
-// Create "PLAY" text with creepy font
+}, {
+ width: 80,
+ height: 30,
+ x: -150,
+ y: 20,
+ color: 0xAA0000,
+ alpha: 0.7
+}, {
+ width: 150,
+ height: 40,
+ x: -80,
+ y: -40,
+ color: 0x880000,
+ alpha: 0.9
+}, {
+ width: 90,
+ height: 60,
+ x: 50,
+ y: 10,
+ color: 0xCC0000,
+ alpha: 0.8
+}, {
+ width: 130,
+ height: 45,
+ x: 180,
+ y: -15,
+ color: 0xAA0000,
+ alpha: 0.7
+}, {
+ width: 50,
+ height: 90,
+ x: 100,
+ y: -60,
+ color: 0x990000,
+ alpha: 0.6
+}, {
+ width: 70,
+ height: 25,
+ x: -220,
+ y: 30,
+ color: 0xAA0000,
+ alpha: 0.5
+}];
+for (var i = 0; i < bloodPixels.length; i++) {
+ var blood = bloodPixels[i];
+ var bloodPiece = LK.getAsset('blood_splatter', {
+ width: blood.width,
+ height: blood.height,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: blood.x,
+ y: blood.y
+ });
+ bloodPiece.tint = blood.color;
+ bloodPiece.alpha = blood.alpha;
+ bloodSplatterContainer.addChild(bloodPiece);
+}
+// Keep reference to bloodSplatterContainer for animation
+var bloodSplatter = bloodSplatterContainer;
+// Create pixel-style "PLAY" text
var playText = new Text2('PLAY', {
size: 120,
- fill: 0x990000,
+ fill: 0xFF0000,
font: "Chiller,Creepster,'Times New Roman'"
});
playText.anchor.set(0.5, 0.5);
button.addChild(playText);
@@ -184,12 +585,16 @@
});
}
});
};
-// Update function for game to call update on all kids
+// Update function for game to call update on all elements
game.update = function () {
- // Update all squares/kids
+ // Update all squares and their kids
for (var i = 0; i < squares.length; i++) {
+ // Call square's update method if available
+ if (squares[i].update) {
+ squares[i].update();
+ }
// Make sure the kid's update method is called
if (squares[i].children) {
for (var j = 0; j < squares[i].children.length; j++) {
if (squares[i].children[j].update) {
Used plugins
@upit/tween
