Play
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880b7d76beb13ecfbb343a0.png)
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880b7626beb13ecfbb3439a.png)
#heartgame
#constrainedmovement
#touchcontrol
#simplicity
#boundaries
Creation History
User prompt
Let the anchor be as long as the box ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Let the anchor be Huge and come from the other side of the box to the other side and only 1 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Add an anchor, sometimes it's blue, sometimes it's orange (When it's blue you have to stop, when it's orange you have to move. Damage:2) ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Delete The Bone outline
User prompt
Let the text be at the top of the screen and be black
User prompt
Add lives (let us have 10 lives and bones hit 1)
User prompt
Let the bones come like an Undertale sans fight and draw a black line around the bones ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Let the bones come and try to attack us, and we will run away ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Speed up character
User prompt
Let the player control
User prompt
Add movement to character
Code edit (1 edits merged)
Please save this source code
User prompt
Heart in a Box
Initial prompt
Create a box and our character (Heart) Let him travel, but not go outside the box
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Bone = Container.expand(function () {
var self = Container.call(this);
var boneGraphics = self.attachAsset('bone', {
anchorX: 0.5,
anchorY: 0.5
});
self.speed = 2;
self.isAttacking = false;
self.lastX = 0;
self.lastY = 0;
self.startAttack = function (targetX, targetY) {
if (self.isAttacking) return;
self.isAttacking = true;
var duration = Math.random() * 1000 + 1500; // 1.5-2.5 seconds
tween(self, {
x: targetX,
y: targetY
}, {
duration: duration,
easing: tween.easeInOut,
onFinish: function onFinish() {
self.isAttacking = false;
}
});
};
self.update = function () {
self.lastX = self.x;
self.lastY = self.y;
};
return self;
});
var BoxBoundary = Container.expand(function () {
var self = Container.call(this);
// Create four walls for the box
var topWall = self.attachAsset('boxBorder', {
anchorX: 0,
anchorY: 0,
width: 1600,
height: 8
});
var bottomWall = self.attachAsset('boxBorder', {
anchorX: 0,
anchorY: 0,
width: 1600,
height: 8
});
var leftWall = self.attachAsset('boxBorder', {
anchorX: 0,
anchorY: 0,
width: 8,
height: 1200
});
var rightWall = self.attachAsset('boxBorder', {
anchorX: 0,
anchorY: 0,
width: 8,
height: 1200
});
// Position walls
topWall.x = 0;
topWall.y = 0;
bottomWall.x = 0;
bottomWall.y = 1200 - 8;
leftWall.x = 0;
leftWall.y = 0;
rightWall.x = 1600 - 8;
rightWall.y = 0;
return self;
});
var Heart = Container.expand(function () {
var self = Container.call(this);
var heartGraphics = self.attachAsset('heart', {
anchorX: 0.5,
anchorY: 0.5
});
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf0f8ff
});
/****
* Game Code
****/
// Box dimensions
var boxX = 224; // Center the 1600px box in 2048px screen
var boxY = 766; // Center the 1200px box in 2732px screen
var boxWidth = 1600;
var boxHeight = 1200;
// Create box boundary
var boundary = game.addChild(new BoxBoundary());
boundary.x = boxX;
boundary.y = boxY;
// Create heart character
var heart = game.addChild(new Heart());
heart.x = boxX + boxWidth / 2; // Center of box
heart.y = boxY + boxHeight / 2; // Center of box
// Dragging variables
var isDragging = false;
var dragOffsetX = 0;
var dragOffsetY = 0;
// Constraint function to keep heart within boundaries
function constrainHeartPosition() {
var heartRadius = 50; // Half of heart width/height
// Left boundary
if (heart.x - heartRadius < boxX + 8) {
heart.x = boxX + 8 + heartRadius;
}
// Right boundary
if (heart.x + heartRadius > boxX + boxWidth - 8) {
heart.x = boxX + boxWidth - 8 - heartRadius;
}
// Top boundary
if (heart.y - heartRadius < boxY + 8) {
heart.y = boxY + 8 + heartRadius;
}
// Bottom boundary
if (heart.y + heartRadius > boxY + boxHeight - 8) {
heart.y = boxY + boxHeight - 8 - heartRadius;
}
}
// Player control variables
var targetX = 0;
var targetY = 0;
var isPlayerControlling = false;
// Touch/mouse down event
game.down = function (x, y, obj) {
isPlayerControlling = true;
targetX = x;
targetY = y;
};
// Touch/mouse move event
game.move = function (x, y, obj) {
if (isPlayerControlling) {
targetX = x;
targetY = y;
}
};
// Touch/mouse up event
game.up = function (x, y, obj) {
isPlayerControlling = false;
};
// Movement variables
var heartSpeed = 8;
var movementDirection = {
x: 1,
y: 0.5
}; // Initial movement direction
var lastDirectionChangeTime = 0;
var directionChangeInterval = 2000; // Change direction every 2 seconds
// Bone enemy system
var bones = [];
var maxBones = 4;
var boneSpawnTimer = 0;
var boneSpawnInterval = 180; // Spawn every 3 seconds at 60fps
// Function to spawn a new bone at random edge position
function spawnBone() {
if (bones.length >= maxBones) return;
var bone = new Bone();
var edge = Math.floor(Math.random() * 4); // 0=top, 1=right, 2=bottom, 3=left
// Position bone at random point on selected edge
switch (edge) {
case 0:
// Top edge
bone.x = boxX + Math.random() * boxWidth;
bone.y = boxY - 50;
break;
case 1:
// Right edge
bone.x = boxX + boxWidth + 50;
bone.y = boxY + Math.random() * boxHeight;
break;
case 2:
// Bottom edge
bone.x = boxX + Math.random() * boxWidth;
bone.y = boxY + boxHeight + 50;
break;
case 3:
// Left edge
bone.x = boxX - 50;
bone.y = boxY + Math.random() * boxHeight;
break;
}
bone.lastX = bone.x;
bone.lastY = bone.y;
bones.push(bone);
game.addChild(bone);
// Start attacking the heart immediately
bone.startAttack(heart.x, heart.y);
}
// Game update loop
game.update = function () {
// Spawn bones periodically
boneSpawnTimer++;
if (boneSpawnTimer >= boneSpawnInterval) {
spawnBone();
boneSpawnTimer = 0;
}
// Update all bones and check for collisions
for (var i = bones.length - 1; i >= 0; i--) {
var bone = bones[i];
// Check if bone hit the heart
if (bone.intersects(heart)) {
// Flash screen red to indicate damage
LK.effects.flashScreen(0xff0000, 500);
// Remove the bone that hit us
bone.destroy();
bones.splice(i, 1);
continue;
}
// Remove bones that are too far from the play area
var distanceFromCenter = Math.sqrt(Math.pow(bone.x - (boxX + boxWidth / 2), 2) + Math.pow(bone.y - (boxY + boxHeight / 2), 2));
if (distanceFromCenter > 2000) {
bone.destroy();
bones.splice(i, 1);
continue;
}
// Retarget bones that aren't currently attacking
if (!bone.isAttacking && Math.random() < 0.01) {
// 1% chance per frame
bone.startAttack(heart.x, heart.y);
}
}
if (isPlayerControlling) {
// Calculate direction toward target
var deltaX = targetX - heart.x;
var deltaY = targetY - heart.y;
var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
// Move toward target if not already there
if (distance > 5) {
// Normalize direction and apply speed
movementDirection.x = deltaX / distance;
movementDirection.y = deltaY / distance;
heart.x += movementDirection.x * heartSpeed;
heart.y += movementDirection.y * heartSpeed;
}
} else {
// Auto movement - change direction periodically when not controlled
if (LK.ticks % 120 === 0) {
// Every 2 seconds at 60fps
movementDirection.x = (Math.random() - 0.5) * 2; // Random x direction between -1 and 1
movementDirection.y = (Math.random() - 0.5) * 2; // Random y direction between -1 and 1
}
// Apply automatic movement
heart.x += movementDirection.x * heartSpeed;
heart.y += movementDirection.y * heartSpeed;
// Bounce off walls by reversing direction
var heartRadius = 50;
if (heart.x - heartRadius <= boxX + 8 || heart.x + heartRadius >= boxX + boxWidth - 8) {
movementDirection.x *= -1; // Reverse horizontal direction
}
if (heart.y - heartRadius <= boxY + 8 || heart.y + heartRadius >= boxY + boxHeight - 8) {
movementDirection.y *= -1; // Reverse vertical direction
}
}
// Ensure heart stays within bounds each frame
constrainHeartPosition();
}; ===================================================================
--- original.js
+++ change.js
@@ -1,7 +1,43 @@
/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+
+/****
* Classes
****/
+var Bone = Container.expand(function () {
+ var self = Container.call(this);
+ var boneGraphics = self.attachAsset('bone', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.speed = 2;
+ self.isAttacking = false;
+ self.lastX = 0;
+ self.lastY = 0;
+ self.startAttack = function (targetX, targetY) {
+ if (self.isAttacking) return;
+ self.isAttacking = true;
+ var duration = Math.random() * 1000 + 1500; // 1.5-2.5 seconds
+ tween(self, {
+ x: targetX,
+ y: targetY
+ }, {
+ duration: duration,
+ easing: tween.easeInOut,
+ onFinish: function onFinish() {
+ self.isAttacking = false;
+ }
+ });
+ };
+ self.update = function () {
+ self.lastX = self.x;
+ self.lastY = self.y;
+ };
+ return self;
+});
var BoxBoundary = Container.expand(function () {
var self = Container.call(this);
// Create four walls for the box
var topWall = self.attachAsset('boxBorder', {
@@ -123,10 +159,81 @@
y: 0.5
}; // Initial movement direction
var lastDirectionChangeTime = 0;
var directionChangeInterval = 2000; // Change direction every 2 seconds
+// Bone enemy system
+var bones = [];
+var maxBones = 4;
+var boneSpawnTimer = 0;
+var boneSpawnInterval = 180; // Spawn every 3 seconds at 60fps
+// Function to spawn a new bone at random edge position
+function spawnBone() {
+ if (bones.length >= maxBones) return;
+ var bone = new Bone();
+ var edge = Math.floor(Math.random() * 4); // 0=top, 1=right, 2=bottom, 3=left
+ // Position bone at random point on selected edge
+ switch (edge) {
+ case 0:
+ // Top edge
+ bone.x = boxX + Math.random() * boxWidth;
+ bone.y = boxY - 50;
+ break;
+ case 1:
+ // Right edge
+ bone.x = boxX + boxWidth + 50;
+ bone.y = boxY + Math.random() * boxHeight;
+ break;
+ case 2:
+ // Bottom edge
+ bone.x = boxX + Math.random() * boxWidth;
+ bone.y = boxY + boxHeight + 50;
+ break;
+ case 3:
+ // Left edge
+ bone.x = boxX - 50;
+ bone.y = boxY + Math.random() * boxHeight;
+ break;
+ }
+ bone.lastX = bone.x;
+ bone.lastY = bone.y;
+ bones.push(bone);
+ game.addChild(bone);
+ // Start attacking the heart immediately
+ bone.startAttack(heart.x, heart.y);
+}
// Game update loop
game.update = function () {
+ // Spawn bones periodically
+ boneSpawnTimer++;
+ if (boneSpawnTimer >= boneSpawnInterval) {
+ spawnBone();
+ boneSpawnTimer = 0;
+ }
+ // Update all bones and check for collisions
+ for (var i = bones.length - 1; i >= 0; i--) {
+ var bone = bones[i];
+ // Check if bone hit the heart
+ if (bone.intersects(heart)) {
+ // Flash screen red to indicate damage
+ LK.effects.flashScreen(0xff0000, 500);
+ // Remove the bone that hit us
+ bone.destroy();
+ bones.splice(i, 1);
+ continue;
+ }
+ // Remove bones that are too far from the play area
+ var distanceFromCenter = Math.sqrt(Math.pow(bone.x - (boxX + boxWidth / 2), 2) + Math.pow(bone.y - (boxY + boxHeight / 2), 2));
+ if (distanceFromCenter > 2000) {
+ bone.destroy();
+ bones.splice(i, 1);
+ continue;
+ }
+ // Retarget bones that aren't currently attacking
+ if (!bone.isAttacking && Math.random() < 0.01) {
+ // 1% chance per frame
+ bone.startAttack(heart.x, heart.y);
+ }
+ }
if (isPlayerControlling) {
// Calculate direction toward target
var deltaX = targetX - heart.x;
var deltaY = targetY - heart.y;
Images
:quality(85)/https:%2F%2Fcdn.frvr.ai/68809fcd6beb13ecfbb342df.png%3F3)
Undertale Heart. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880a04f6beb13ecfbb342f2.png%3F3)
Undertale bone with black outline. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880a1296beb13ecfbb34302.png%3F3)
Undertale asgore spear. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880a79b6beb13ecfbb34324.png%3F3)
Ivy. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880ab676beb13ecfbb34334.png%3F3)
Sans Undertale. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880ab9b6beb13ecfbb3433e.png%3F3)
Asgore Undertale. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880add36beb13ecfbb34364.png%3F3)
Flowey Undertale but with 6 souls (Orange,Green,Yellow,blue,Purple, Light Blue). In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880af856beb13ecfbb3437f.png%3F3)
Flat staring gaster blaster Undertale. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6880dc296beb13ecfbb3440c.png%3F3)
Undertale heart but blue. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6881e4ad957ff79db8c80f0b.png%3F3)
Green Heart Undertale. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6881ecb2957ff79db8c80f32.png%3F3)
Yellow heart Undertale. In-Game asset. 2d. High contrast. No shadows
Used plugins
@upit/tween
