User prompt
make a ui background for the time and number healthbars
User prompt
add an outline for the box healthbars
User prompt
make a 0.3 second colldown for jumping
User prompt
make jumping slower
User prompt
make less gravity
User prompt
make the attack effects the direction figther looking
User prompt
make attack effects visible
User prompt
make If a warrior jumps, he will not take any damage.
User prompt
make the reagular attack deal less damage
User prompt
now move a little bit down
User prompt
now little little bit right
User prompt
now a little bit right
User prompt
little bit more
User prompt
movethe box healthbars a little left
User prompt
movethe box healthbars to a more visible place symetrically
User prompt
move the box healthbars near the number healthbars
User prompt
make the attack effec last longer βͺπ‘ Consider importing and using the following plugins: @upit/tween.v1
User prompt
make the explosion effect slower and last longer βͺπ‘ Consider importing and using the following plugins: @upit/tween.v1
User prompt
Please fix the bug: 'ReferenceError: tween is not defined' in or related to this line: 'tween.to(self.sprite, {' Line Number: 50 βͺπ‘ Consider importing and using the following plugins: @upit/tween.v1
User prompt
make the attack effects apper with explosion effect
User prompt
make the attack effect an asset
User prompt
move the both healthbars a little bit closer to the middle
User prompt
move the enemys health bar to the top right of the screenuΜ
User prompt
move the players healthbar to the top left of the screen
User prompt
the ai enemys healthbar on the right side and the player healthbar is on the left side
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// Arena class: handles the ground and background
var Arena = Container.expand(function () {
var self = Container.call(this);
// Attach background asset
self.bg = self.attachAsset('arena_bg', {
anchorX: 0.5,
anchorY: 1.0,
x: 2048 / 2,
y: 2732
});
// Ground Y for fighters
self.groundY = 2100;
return self;
});
// Attack class: represents a punch/kick or special move
var Attack = Container.expand(function (isSpecial) {
var self = Container.call(this);
self.isSpecial = isSpecial === true;
self.owner = null;
self.damage = self.isSpecial ? 35 : 15;
self.lifetime = self.isSpecial ? 30 : 12;
self.frame = 0;
// Attach asset
self.sprite = self.attachAsset(self.isSpecial ? 'special_attack' : 'attack', {
anchorX: 0.5,
anchorY: 0.5
});
// Explosion effect: scale up and fade in, then shrink to normal
self.sprite.scaleX = self.sprite.scaleY = 0.2;
self.sprite.alpha = 0.2;
// Explosion effect: scale up and fade in, then shrink to normal using tween plugin
tween(self.sprite, {
scaleX: 1.2,
scaleY: 1.2,
alpha: 1
}, {
duration: 300,
onFinish: function onFinish() {
tween(self.sprite, {
scaleX: 1,
scaleY: 1
}, {
duration: 300
});
}
});
// Set owner after creation
self.setOwner = function (owner) {
self.owner = owner;
};
// Update per frame
self.update = function () {
self.frame++;
if (self.frame > self.lifetime) {
self.destroy();
}
};
return self;
});
var Fighter = Container.expand(function () {
var self = Container.call(this);
// Attach fighter asset (placeholder box, can be replaced with unique fighter art)
self.sprite = self.attachAsset('fighter', {
anchorX: 0.5,
anchorY: 1.0
});
// Fighter properties
self.maxHealth = 100;
self.health = 100;
self.isFacingRight = true;
self.isJumping = false;
self.isAttacking = false;
self.isSpecialReady = true;
self.specialCooldown = 180; // 3 seconds at 60fps
self.specialTimer = 0;
self.moveSpeed = 18;
self.jumpPower = -60;
self.gravity = 6;
self.velY = 0;
self.groundY = 2100; // Default ground Y, will be set by Arena
// Health bar
self.healthBar = new Container();
self.healthBarBg = self.healthBar.addChild(LK.getAsset('healthbar_bg', {
anchorX: 0,
anchorY: 0.5
}));
self.healthBarFg = self.healthBar.addChild(LK.getAsset('healthbar_fg', {
anchorX: 0,
anchorY: 0.5
}));
self.healthBar.y = -220;
self.addChild(self.healthBar);
// Update health bar
self.updateHealthBar = function () {
var ratio = Math.max(0, self.health / self.maxHealth);
self.healthBarFg.width = 300 * ratio;
};
// Take damage
self.takeDamage = function (amount) {
self.health = Math.max(0, self.health - amount);
self.updateHealthBar();
};
// Attack
self.attack = function () {
if (self.isAttacking) return;
self.isAttacking = true;
var atk = new Attack(false);
atk.x = self.x + (self.isFacingRight ? 120 : -120);
atk.y = self.y - 180;
atk.setOwner(self);
self.parent.addChild(atk);
attacks.push(atk);
LK.setTimeout(function () {
self.isAttacking = false;
}, 300);
};
// Special move
self.special = function () {
if (!self.isSpecialReady) return;
self.isSpecialReady = false;
self.specialTimer = self.specialCooldown;
var atk = new Attack(true);
atk.x = self.x + (self.isFacingRight ? 180 : -180);
atk.y = self.y - 180;
atk.setOwner(self);
self.parent.addChild(atk);
attacks.push(atk);
};
// Jump
self.jump = function () {
if (self.isJumping) return;
self.isJumping = true;
self.velY = self.jumpPower;
};
// Update per frame
self.update = function () {
// Special cooldown
if (!self.isSpecialReady) {
self.specialTimer--;
if (self.specialTimer <= 0) {
self.isSpecialReady = true;
}
}
// Jump physics
if (self.isJumping) {
self.y += self.velY;
self.velY += self.gravity;
if (self.y >= self.groundY) {
self.y = self.groundY;
self.isJumping = false;
self.velY = 0;
}
}
};
// Flip sprite
self.setFacing = function (right) {
self.isFacingRight = right;
self.sprite.scaleX = right ? 1 : -1;
};
// Initialize health bar
self.updateHealthBar();
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x000000
});
/****
* Game Code
****/
//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
//Note game dimensions are 2048x2732
// --- Arena setup ---
var arena = new Arena();
arena.x = 0;
arena.y = 0;
game.addChild(arena);
// --- Fixed ground platform (visual) ---
var groundHeight = 60;
var groundTileWidth = LK.getAsset('ground', {
anchorX: 0,
anchorY: 0
}).width;
var groundY = arena.groundY - 900; // Move ground up by 900px (move it up a bit)
var groundTiles = [];
var numGroundTiles = Math.ceil(2048 / groundTileWidth); // Only enough to fill the screen
for (var i = 0; i < numGroundTiles; i++) {
var groundTile = LK.getAsset('ground', {
anchorX: 0,
anchorY: 0,
x: i * groundTileWidth,
y: groundY
});
game.addChild(groundTile);
groundTiles.push(groundTile);
}
// No infinite scrolling, ground is fixed and does not move
// --- Fighters ---
var fighter1 = new Fighter();
var fighter2 = new Fighter();
// Place fighters on opposite sides
fighter1.x = 600;
fighter1.y = arena.groundY;
fighter1.setFacing(true);
fighter2.x = 2048 - 600;
fighter2.y = arena.groundY;
fighter2.setFacing(false);
game.addChild(fighter1);
game.addChild(fighter2);
// --- Health bar GUI ---
var healthBar1 = new Text2('100', {
size: 80,
fill: 0xFF4444
});
var healthBar2 = new Text2('100', {
size: 80,
fill: 0x44AAFF
});
healthBar1.anchor.set(0, 0);
healthBar2.anchor.set(1, 0);
// Move player 1 healthbar to top left, player 2 to top right, but offset both closer to center
healthBar1.x = 180; // move right from the very edge
healthBar2.x = -180; // move left from the very edge
LK.gui.topLeft.addChild(healthBar1);
LK.gui.topRight.addChild(healthBar2);
// --- Round and timer ---
var round = 1;
var maxRounds = 3;
var wins1 = 0;
var wins2 = 0;
var roundTime = 60 * 30; // 30 seconds at 60fps
var roundTimer = roundTime;
var timerText = new Text2('30', {
size: 80,
fill: "#fff"
});
timerText.anchor.set(0.5, 0);
LK.gui.top.addChild(timerText);
// --- Touch controls (mobile-friendly) ---
var leftPressed = false,
rightPressed = false,
atkPressed = false,
jumpPressed = false,
spcPressed = false;
// Control buttons (simple rectangles for now)
var btnLeft = LK.getAsset('btn_left', {
anchorX: 0.5,
anchorY: 0.5,
x: 200,
y: 2600
});
var btnRight = LK.getAsset('btn_right', {
anchorX: 0.5,
anchorY: 0.5,
x: 500,
y: 2600
});
var btnAtk = LK.getAsset('btn_atk', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 - 500,
y: 2600
});
var btnJump = LK.getAsset('btn_jump', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 - 200,
y: 2600
});
var btnSpc = LK.getAsset('btn_spc', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 - 350,
y: 2450
});
game.addChild(btnLeft);
game.addChild(btnRight);
game.addChild(btnAtk);
game.addChild(btnJump);
game.addChild(btnSpc);
// Button event helpers
btnLeft.down = function () {
leftPressed = true;
};
btnLeft.up = function () {
leftPressed = false;
};
btnRight.down = function () {
rightPressed = true;
};
btnRight.up = function () {
rightPressed = false;
};
btnAtk.down = function () {
atkPressed = true;
};
btnAtk.up = function () {
atkPressed = false;
};
btnJump.down = function () {
jumpPressed = true;
};
btnJump.up = function () {
jumpPressed = false;
};
btnSpc.down = function () {
spcPressed = true;
};
btnSpc.up = function () {
spcPressed = false;
};
// --- Attacks array ---
var attacks = [];
// --- Game update loop ---
game.update = function () {
// --- Timer ---
if (roundTimer > 0) {
roundTimer--;
timerText.setText(Math.ceil(roundTimer / 60));
}
// --- Ground is fixed, no update needed ---
// --- Player 1 controls (left side) ---
if (leftPressed) {
fighter1.x = Math.max(120, fighter1.x - fighter1.moveSpeed);
fighter1.setFacing(false);
}
if (rightPressed) {
fighter1.x = Math.min(2048 - 120, fighter1.x + fighter1.moveSpeed);
fighter1.setFacing(true);
}
if (jumpPressed) {
fighter1.jump();
}
if (atkPressed) {
fighter1.attack();
}
if (spcPressed) {
fighter1.special();
}
// --- AI for fighter2 (simple: move toward player, attack if close) ---
var dx = fighter1.x - fighter2.x;
if (Math.abs(dx) > 180) {
if (dx < 0) {
fighter2.x -= fighter2.moveSpeed * 0.7;
fighter2.setFacing(false);
} else {
fighter2.x += fighter2.moveSpeed * 0.7;
fighter2.setFacing(true);
}
} else if (!fighter2.isAttacking && Math.random() < 0.04) {
fighter2.attack();
}
if (!fighter2.isJumping && Math.random() < 0.01) {
fighter2.jump();
}
if (fighter2.isSpecialReady && Math.random() < 0.008) {
fighter2.special();
}
// --- Update fighters ---
fighter1.update();
fighter2.update();
// --- Update attacks ---
for (var i = attacks.length - 1; i >= 0; i--) {
var atk = attacks[i];
atk.update();
// Remove if destroyed
if (atk.destroyed) {
attacks.splice(i, 1);
continue;
}
// Set owner if not set
if (!atk.owner) {
atk.setOwner(atk.isSpecial ? atk.x < 2048 / 2 ? fighter1 : fighter2 : fighter1);
}
// Check collision
var target = atk.owner === fighter1 ? fighter2 : fighter1;
if (atk.intersects(target) && !atk.hit) {
target.takeDamage(atk.damage);
atk.hit = true;
atk.destroy();
// Flash on hit
LK.effects.flashObject(target, 0xff0000, 200);
}
}
// --- Health bar updates ---
healthBar1.setText(fighter1.health);
healthBar2.setText(fighter2.health);
// --- Win/lose/round logic ---
var roundOver = false;
var winner = null;
if (fighter1.health <= 0) {
wins2++;
roundOver = true;
winner = 2;
} else if (fighter2.health <= 0) {
wins1++;
roundOver = true;
winner = 1;
} else if (roundTimer <= 0) {
if (fighter1.health > fighter2.health) {
wins1++;
winner = 1;
} else if (fighter2.health > fighter1.health) {
wins2++;
winner = 2;
} else {
// Draw, no one gets a win
}
roundOver = true;
}
if (roundOver) {
if (wins1 >= 2) {
LK.showYouWin();
return;
} else if (wins2 >= 2) {
LK.showGameOver();
return;
}
// Next round
round++;
roundTimer = roundTime;
fighter1.health = fighter1.maxHealth;
fighter2.health = fighter2.maxHealth;
fighter1.updateHealthBar();
fighter2.updateHealthBar();
fighter1.x = 600;
fighter2.x = 2048 - 600;
fighter1.setFacing(true);
fighter2.setFacing(false);
// Remove all attacks
for (var j = attacks.length - 1; j >= 0; j--) {
if (attacks[j].destroy) attacks[j].destroy();
}
attacks = [];
}
}; ===================================================================
--- original.js
+++ change.js
@@ -41,15 +41,15 @@
scaleX: 1.2,
scaleY: 1.2,
alpha: 1
}, {
- duration: 80,
+ duration: 300,
onFinish: function onFinish() {
tween(self.sprite, {
scaleX: 1,
scaleY: 1
}, {
- duration: 80
+ duration: 300
});
}
});
// Set owner after creation