Play
:quality(85)/https:%2F%2Fcdn.frvr.ai/686e58671e75ea188b495a67.png)
:quality(85)/https:%2F%2Fcdn.frvr.ai/686e58631e75ea188b495a65.png)
#DriftRacing
#TopDownRacer
#DriftingGame
#ArcadeRacing
#SkillBased
Creation History
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");
/****
* Classes
****/
var Car = Container.expand(function () {
var self = Container.call(this);
var carGraphics = self.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5
});
self.velocity = {
x: 0,
y: 0
};
self.angle = 0;
self.speed = 0;
self.maxSpeed = 8;
self.acceleration = 0.15;
self.friction = 0.98;
self.driftFriction = 0.92;
self.turnSpeed = 0.06;
self.isDrifting = false;
self.driftTime = 0;
self.driftAngle = 0;
self.update = function () {
// Apply acceleration/braking based on button input
if (isAccelerating) {
self.speed += self.acceleration;
self.speed = Math.min(self.speed, self.maxSpeed);
} else if (isBraking) {
self.speed -= 0.3;
self.speed = Math.max(self.speed, -2);
}
// Apply friction based on drift state
if (self.isDrifting) {
self.speed *= self.driftFriction;
} else {
self.speed *= self.friction;
}
// Apply steering based on button input
if (steerDirection !== 0 && Math.abs(self.speed) > 0.5) {
self.angle += steerDirection * self.turnSpeed * (self.speed / self.maxSpeed);
// Detect drifting based on turn rate and speed
self.isDrifting = Math.abs(self.speed) > 3 && Math.abs(steerDirection) > 0;
self.driftAngle = Math.abs(steerDirection) * 0.5;
} else {
self.isDrifting = false;
self.driftAngle = 0;
}
// Update velocity based on angle
self.velocity.x = Math.cos(self.angle) * self.speed;
self.velocity.y = Math.sin(self.angle) * self.speed;
// Update position
self.x += self.velocity.x;
self.y += self.velocity.y;
// Update rotation to match angle
self.rotation = self.angle;
// Track drift time
if (self.isDrifting) {
self.driftTime++;
} else {
self.driftTime = 0;
}
};
return self;
});
var Track = Container.expand(function () {
var self = Container.call(this);
// Outer track boundary
var outer = self.attachAsset('track', {
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: 0
});
// Inner track boundary (creates the road)
var inner = self.attachAsset('trackInner', {
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: 0
});
// Store boundaries for collision detection
self.outerBounds = {
left: -outer.width / 2,
right: outer.width / 2,
top: -outer.height / 2,
bottom: outer.height / 2
};
self.innerBounds = {
left: -inner.width / 2,
right: inner.width / 2,
top: -inner.height / 2,
bottom: inner.height / 2
};
self.checkCollision = function (x, y) {
// Check if car is outside outer bounds
if (x < self.outerBounds.left || x > self.outerBounds.right || y < self.outerBounds.top || y > self.outerBounds.bottom) {
return true;
}
// Check if car is inside inner bounds (off track)
if (x > self.innerBounds.left && x < self.innerBounds.right && y > self.innerBounds.top && y < self.innerBounds.bottom) {
return true;
}
return false;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x222222
});
/****
* Game Code
****/
// Game variables
var car;
var track;
var score = 0;
var multiplier = 1;
var driftScore = 0;
var bestDrift = 0;
var laps = 0;
var maxLaps = 3;
var checkpointPassed = false;
var lastDriftSound = 0;
// UI Elements
var scoreText = new Text2('Score: 0', {
size: 80,
fill: 0xFFFFFF
});
scoreText.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreText);
var multiplierText = new Text2('x1', {
size: 60,
fill: 0xFFFF00
});
multiplierText.anchor.set(0.5, 0);
multiplierText.y = 90;
LK.gui.top.addChild(multiplierText);
var driftText = new Text2('', {
size: 100,
fill: 0x00FF00
});
driftText.anchor.set(0.5, 0.5);
LK.gui.center.addChild(driftText);
var lapText = new Text2('Lap 1/3', {
size: 70,
fill: 0xFFFFFF
});
lapText.anchor.set(1, 0);
LK.gui.topRight.addChild(lapText);
// Create track
track = game.addChild(new Track());
track.x = 1024;
track.y = 1366;
// Create car
car = game.addChild(new Car());
car.x = 1024;
car.y = 2200;
car.angle = -Math.PI / 2;
// Create checkpoint
var checkpoint = game.addChild(LK.getAsset('checkpoint', {
anchorX: 0.5,
anchorY: 0.5,
x: 1024,
y: 2200,
alpha: 0.5
}));
// Create control buttons container
var controlsContainer = new Container();
LK.gui.bottom.addChild(controlsContainer);
controlsContainer.y = -300;
// Gas button
var gasButton = controlsContainer.addChild(LK.getAsset('button', {
width: 200,
height: 200,
color: 0x00ff00,
shape: 'ellipse',
anchorX: 0.5,
anchorY: 0.5,
x: 300,
y: 0
}));
// Brake button
var brakeButton = controlsContainer.addChild(LK.getAsset('button', {
width: 200,
height: 200,
color: 0xff0000,
shape: 'ellipse',
anchorX: 0.5,
anchorY: 0.5,
x: -300,
y: 0
}));
// Left steer button
var leftButton = controlsContainer.addChild(LK.getAsset('button', {
width: 150,
height: 150,
color: 0x0088ff,
shape: 'box',
anchorX: 0.5,
anchorY: 0.5,
x: -450,
y: -150
}));
// Right steer button
var rightButton = controlsContainer.addChild(LK.getAsset('button', {
width: 150,
height: 150,
color: 0x0088ff,
shape: 'box',
anchorX: 0.5,
anchorY: 0.5,
x: 450,
y: -150
}));
// Add button labels
var gasText = new Text2('GAS', {
size: 50,
fill: 0xffffff
});
gasText.anchor.set(0.5, 0.5);
gasButton.addChild(gasText);
var brakeText = new Text2('BRAKE', {
size: 40,
fill: 0xffffff
});
brakeText.anchor.set(0.5, 0.5);
brakeButton.addChild(brakeText);
var leftText = new Text2('←', {
size: 80,
fill: 0xffffff
});
leftText.anchor.set(0.5, 0.5);
leftButton.addChild(leftText);
var rightText = new Text2('→', {
size: 80,
fill: 0xffffff
});
rightText.anchor.set(0.5, 0.5);
rightButton.addChild(rightText);
// Control variables
var isAccelerating = false;
var isBraking = false;
var steerDirection = 0; // -1 for left, 0 for neutral, 1 for right
// Button controls
gasButton.down = function () {
isAccelerating = true;
gasButton.alpha = 0.7;
};
gasButton.up = function () {
isAccelerating = false;
gasButton.alpha = 1;
};
brakeButton.down = function () {
isBraking = true;
brakeButton.alpha = 0.7;
};
brakeButton.up = function () {
isBraking = false;
brakeButton.alpha = 1;
};
leftButton.down = function () {
steerDirection = -1;
leftButton.alpha = 0.7;
};
leftButton.up = function () {
if (steerDirection === -1) steerDirection = 0;
leftButton.alpha = 1;
};
rightButton.down = function () {
steerDirection = 1;
rightButton.alpha = 0.7;
};
rightButton.up = function () {
if (steerDirection === 1) steerDirection = 0;
rightButton.alpha = 1;
};
// Global up to handle button releases when finger moves off button
game.up = function () {
isAccelerating = false;
isBraking = false;
steerDirection = 0;
gasButton.alpha = 1;
brakeButton.alpha = 1;
leftButton.alpha = 1;
rightButton.alpha = 1;
};
// Update drifting score display
function updateDriftDisplay() {
if (car.isDrifting && car.driftTime > 10) {
driftScore = Math.floor(car.driftTime * car.driftAngle * 10 * multiplier);
driftText.setText(driftScore + '');
driftText.alpha = 1;
// Play drift sound periodically
if (LK.ticks - lastDriftSound > 30) {
LK.getSound('drift').play();
lastDriftSound = LK.ticks;
}
} else if (driftText.alpha > 0) {
// Fade out drift text
driftText.alpha -= 0.02;
if (driftText.alpha <= 0 && driftScore > 0) {
// Add drift score to total
score += driftScore;
scoreText.setText('Score: ' + score);
// Update best drift
if (driftScore > bestDrift) {
bestDrift = driftScore;
}
driftScore = 0;
}
}
}
// Check checkpoint crossing
function checkCheckpoint() {
var carY = car.y;
var checkY = checkpoint.y;
// Check if car crosses checkpoint line
if (Math.abs(carY - checkY) < 50 && car.x > 900 && car.x < 1148) {
if (!checkpointPassed) {
checkpointPassed = true;
laps++;
lapText.setText('Lap ' + Math.min(laps, maxLaps) + '/' + maxLaps);
// Flash checkpoint
tween(checkpoint, {
alpha: 1
}, {
duration: 200,
onFinish: function onFinish() {
tween(checkpoint, {
alpha: 0.5
}, {
duration: 200
});
}
});
// Check win condition
if (laps >= maxLaps) {
LK.setScore(score);
LK.showYouWin();
}
}
} else if (Math.abs(carY - checkY) > 100) {
checkpointPassed = false;
}
}
// Main game update
game.update = function () {
// Check track collision
if (track.checkCollision(car.x - 1024, car.y - 1366)) {
// Crash effect
LK.getSound('crash').play();
LK.effects.flashObject(car, 0xff0000, 500);
// Reset multiplier
multiplier = 1;
multiplierText.setText('x' + multiplier);
// Bounce car back
car.speed *= -0.5;
car.x += car.velocity.x * -5;
car.y += car.velocity.y * -5;
// End drift
car.isDrifting = false;
}
// Update multiplier based on continuous drifting
if (car.isDrifting && car.driftTime > 60) {
var newMultiplier = Math.min(Math.floor(car.driftTime / 60) + 1, 5);
if (newMultiplier > multiplier) {
multiplier = newMultiplier;
multiplierText.setText('x' + multiplier);
tween(multiplierText, {
scaleX: 1.5,
scaleY: 1.5
}, {
duration: 200,
onFinish: function onFinish() {
tween(multiplierText, {
scaleX: 1,
scaleY: 1
}, {
duration: 200
});
}
});
}
}
// Update displays
updateDriftDisplay();
checkCheckpoint();
// Keep car on screen
car.x = Math.max(100, Math.min(1948, car.x));
car.y = Math.max(100, Math.min(2632, car.y));
};
// Start background music
LK.playMusic('race'); ===================================================================
--- original.js
+++ change.js
@@ -27,17 +27,32 @@
self.isDrifting = false;
self.driftTime = 0;
self.driftAngle = 0;
self.update = function () {
- // Auto acceleration
- self.speed += self.acceleration;
- self.speed = Math.min(self.speed, self.maxSpeed);
+ // Apply acceleration/braking based on button input
+ if (isAccelerating) {
+ self.speed += self.acceleration;
+ self.speed = Math.min(self.speed, self.maxSpeed);
+ } else if (isBraking) {
+ self.speed -= 0.3;
+ self.speed = Math.max(self.speed, -2);
+ }
// Apply friction based on drift state
if (self.isDrifting) {
self.speed *= self.driftFriction;
} else {
self.speed *= self.friction;
}
+ // Apply steering based on button input
+ if (steerDirection !== 0 && Math.abs(self.speed) > 0.5) {
+ self.angle += steerDirection * self.turnSpeed * (self.speed / self.maxSpeed);
+ // Detect drifting based on turn rate and speed
+ self.isDrifting = Math.abs(self.speed) > 3 && Math.abs(steerDirection) > 0;
+ self.driftAngle = Math.abs(steerDirection) * 0.5;
+ } else {
+ self.isDrifting = false;
+ self.driftAngle = 0;
+ }
// Update velocity based on angle
self.velocity.x = Math.cos(self.angle) * self.speed;
self.velocity.y = Math.sin(self.angle) * self.speed;
// Update position
@@ -51,23 +66,8 @@
} else {
self.driftTime = 0;
}
};
- self.steer = function (targetX, targetY) {
- var dx = targetX - self.x;
- var dy = targetY - self.y;
- var targetAngle = Math.atan2(dy, dx);
- // Calculate angle difference
- var angleDiff = targetAngle - self.angle;
- while (angleDiff > Math.PI) angleDiff -= Math.PI * 2;
- while (angleDiff < -Math.PI) angleDiff += Math.PI * 2;
- // Apply steering with drift physics
- var steerAmount = Math.sign(angleDiff) * self.turnSpeed;
- self.angle += steerAmount;
- // Detect drifting based on angle difference
- self.driftAngle = Math.abs(angleDiff);
- self.isDrifting = self.driftAngle > 0.3 && self.speed > 2;
- };
return self;
});
var Track = Container.expand(function () {
var self = Container.call(this);
@@ -175,26 +175,128 @@
x: 1024,
y: 2200,
alpha: 0.5
}));
-// Touch controls
-var isDragging = false;
-var targetX = car.x;
-var targetY = car.y;
-game.down = function (x, y, obj) {
- isDragging = true;
- targetX = x;
- targetY = y;
+// Create control buttons container
+var controlsContainer = new Container();
+LK.gui.bottom.addChild(controlsContainer);
+controlsContainer.y = -300;
+// Gas button
+var gasButton = controlsContainer.addChild(LK.getAsset('button', {
+ width: 200,
+ height: 200,
+ color: 0x00ff00,
+ shape: 'ellipse',
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 300,
+ y: 0
+}));
+// Brake button
+var brakeButton = controlsContainer.addChild(LK.getAsset('button', {
+ width: 200,
+ height: 200,
+ color: 0xff0000,
+ shape: 'ellipse',
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: -300,
+ y: 0
+}));
+// Left steer button
+var leftButton = controlsContainer.addChild(LK.getAsset('button', {
+ width: 150,
+ height: 150,
+ color: 0x0088ff,
+ shape: 'box',
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: -450,
+ y: -150
+}));
+// Right steer button
+var rightButton = controlsContainer.addChild(LK.getAsset('button', {
+ width: 150,
+ height: 150,
+ color: 0x0088ff,
+ shape: 'box',
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 450,
+ y: -150
+}));
+// Add button labels
+var gasText = new Text2('GAS', {
+ size: 50,
+ fill: 0xffffff
+});
+gasText.anchor.set(0.5, 0.5);
+gasButton.addChild(gasText);
+var brakeText = new Text2('BRAKE', {
+ size: 40,
+ fill: 0xffffff
+});
+brakeText.anchor.set(0.5, 0.5);
+brakeButton.addChild(brakeText);
+var leftText = new Text2('←', {
+ size: 80,
+ fill: 0xffffff
+});
+leftText.anchor.set(0.5, 0.5);
+leftButton.addChild(leftText);
+var rightText = new Text2('→', {
+ size: 80,
+ fill: 0xffffff
+});
+rightText.anchor.set(0.5, 0.5);
+rightButton.addChild(rightText);
+// Control variables
+var isAccelerating = false;
+var isBraking = false;
+var steerDirection = 0; // -1 for left, 0 for neutral, 1 for right
+// Button controls
+gasButton.down = function () {
+ isAccelerating = true;
+ gasButton.alpha = 0.7;
};
-game.move = function (x, y, obj) {
- if (isDragging) {
- targetX = x;
- targetY = y;
- }
+gasButton.up = function () {
+ isAccelerating = false;
+ gasButton.alpha = 1;
};
-game.up = function (x, y, obj) {
- isDragging = false;
+brakeButton.down = function () {
+ isBraking = true;
+ brakeButton.alpha = 0.7;
};
+brakeButton.up = function () {
+ isBraking = false;
+ brakeButton.alpha = 1;
+};
+leftButton.down = function () {
+ steerDirection = -1;
+ leftButton.alpha = 0.7;
+};
+leftButton.up = function () {
+ if (steerDirection === -1) steerDirection = 0;
+ leftButton.alpha = 1;
+};
+rightButton.down = function () {
+ steerDirection = 1;
+ rightButton.alpha = 0.7;
+};
+rightButton.up = function () {
+ if (steerDirection === 1) steerDirection = 0;
+ rightButton.alpha = 1;
+};
+// Global up to handle button releases when finger moves off button
+game.up = function () {
+ isAccelerating = false;
+ isBraking = false;
+ steerDirection = 0;
+ gasButton.alpha = 1;
+ brakeButton.alpha = 1;
+ leftButton.alpha = 1;
+ rightButton.alpha = 1;
+};
// Update drifting score display
function updateDriftDisplay() {
if (car.isDrifting && car.driftTime > 10) {
driftScore = Math.floor(car.driftTime * car.driftAngle * 10 * multiplier);
@@ -254,12 +356,8 @@
}
}
// Main game update
game.update = function () {
- // Steer car towards target
- if (isDragging) {
- car.steer(targetX, targetY);
- }
// Check track collision
if (track.checkCollision(car.x - 1024, car.y - 1366)) {
// Crash effect
LK.getSound('crash').play();
Showing 1 to 8 of 8
Images
:quality(85)/https:%2F%2Fcdn.frvr.ai/686e59c81e75ea188b495a82.png%3F3)
Car seen from above. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/686e5e131e75ea188b495a93.png%3F3)
Cyrcle. No background. Transparent background. Blank background. No shadows. 2d. In-Game asset. flat
:quality(85)/https:%2F%2Fcdn.frvr.ai/686e63e51e75ea188b495b4a.png%3F3)
Button . No background. Transparent background. Blank background. No shadows. 2d. In-Game asset. flat
:quality(85)/https:%2F%2Fcdn.frvr.ai/686e64541e75ea188b495b5e.png%3F3)
WAY. In-Game asset. 2d. High contrast. No shadows
Used plugins
@upit/tween@upit/storage
