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 = 10;
self.acceleration = 0.25;
self.friction = 0.95;
self.driftFriction = 0.92;
self.turnSpeed = 0.08;
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 standard friction (no drift)
self.speed *= self.friction;
// Apply direct steering based on button input
if (steerDirection !== 0 && Math.abs(self.speed) > 0.1) {
// Direct turning without drift
self.angle += steerDirection * self.turnSpeed * 1.5; // Increased turn rate for better control
}
// Update velocity based on angle (direct movement)
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;
// Always set drift to false
self.isDrifting = false;
self.driftTime = 0;
self.driftAngle = 0;
};
return self;
});
var Track = Container.expand(function () {
var self = Container.call(this);
// Create track walls array
self.walls = [];
// Create outer track walls
var wallThickness = 100;
var trackWidth = 1800;
var trackHeight = 2400;
var innerWidth = 1200;
var innerHeight = 1800;
// Outer walls - top
var topWall = self.addChild(LK.getAsset('wall', {
width: trackWidth,
height: wallThickness,
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: -trackHeight / 2 + wallThickness / 2
}));
self.walls.push(topWall);
// Outer walls - bottom
var bottomWall = self.addChild(LK.getAsset('wall', {
width: trackWidth,
height: wallThickness,
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: trackHeight / 2 - wallThickness / 2
}));
self.walls.push(bottomWall);
// Outer walls - left
var leftWall = self.addChild(LK.getAsset('wall', {
width: wallThickness,
height: trackHeight,
anchorX: 0.5,
anchorY: 0.5,
x: -trackWidth / 2 + wallThickness / 2,
y: 0
}));
self.walls.push(leftWall);
// Outer walls - right
var rightWall = self.addChild(LK.getAsset('wall', {
width: wallThickness,
height: trackHeight,
anchorX: 0.5,
anchorY: 0.5,
x: trackWidth / 2 - wallThickness / 2,
y: 0
}));
self.walls.push(rightWall);
// Inner walls - top
var innerTopWall = self.addChild(LK.getAsset('wall', {
width: innerWidth,
height: wallThickness,
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: -innerHeight / 2 + wallThickness / 2
}));
self.walls.push(innerTopWall);
// Inner walls - bottom
var innerBottomWall = self.addChild(LK.getAsset('wall', {
width: innerWidth,
height: wallThickness,
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: innerHeight / 2 - wallThickness / 2
}));
self.walls.push(innerBottomWall);
// Inner walls - left
var innerLeftWall = self.addChild(LK.getAsset('wall', {
width: wallThickness,
height: innerHeight,
anchorX: 0.5,
anchorY: 0.5,
x: -innerWidth / 2 + wallThickness / 2,
y: 0
}));
self.walls.push(innerLeftWall);
// Inner walls - right
var innerRightWall = self.addChild(LK.getAsset('wall', {
width: wallThickness,
height: innerHeight,
anchorX: 0.5,
anchorY: 0.5,
x: innerWidth / 2 - wallThickness / 2,
y: 0
}));
self.walls.push(innerRightWall);
// Add corner barriers to create turns
// Top-left corner barrier
var cornerTL = self.addChild(LK.getAsset('wall', {
width: 300,
height: 300,
anchorX: 0.5,
anchorY: 0.5,
x: -500,
y: -800
}));
self.walls.push(cornerTL);
// Top-right corner barrier
var cornerTR = self.addChild(LK.getAsset('wall', {
width: 300,
height: 300,
anchorX: 0.5,
anchorY: 0.5,
x: 500,
y: -800
}));
self.walls.push(cornerTR);
// Bottom-left corner barrier
var cornerBL = self.addChild(LK.getAsset('wall', {
width: 300,
height: 300,
anchorX: 0.5,
anchorY: 0.5,
x: -500,
y: 800
}));
self.walls.push(cornerBL);
// Bottom-right corner barrier
var cornerBR = self.addChild(LK.getAsset('wall', {
width: 300,
height: 300,
anchorX: 0.5,
anchorY: 0.5,
x: 500,
y: 800
}));
self.walls.push(cornerBR);
// Track surface
var trackSurface = self.addChild(LK.getAsset('track', {
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: 0
}));
self.checkCollision = function (carObj) {
// Check collision with all walls
for (var i = 0; i < self.walls.length; i++) {
if (carObj.intersects(self.walls[i])) {
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() {
// No drift scoring - hide drift text
if (driftText.alpha > 0) {
driftText.alpha = 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++;
// Award points for completing a lap
score += 1000;
scoreText.setText('Score: ' + score);
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)) {
// Crash effect
LK.getSound('crash').play();
LK.effects.flashObject(car, 0xff0000, 500);
// Bounce car back
car.speed *= -0.5;
car.x += car.velocity.x * -5;
car.y += car.velocity.y * -5;
}
// No drift multiplier - keep at x1
multiplierText.setText('x1');
// 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
@@ -59,44 +59,151 @@
return self;
});
var Track = Container.expand(function () {
var self = Container.call(this);
- // Outer track boundary
- var outer = self.attachAsset('track', {
+ // Create track walls array
+ self.walls = [];
+ // Create outer track walls
+ var wallThickness = 100;
+ var trackWidth = 1800;
+ var trackHeight = 2400;
+ var innerWidth = 1200;
+ var innerHeight = 1800;
+ // Outer walls - top
+ var topWall = self.addChild(LK.getAsset('wall', {
+ width: trackWidth,
+ height: wallThickness,
anchorX: 0.5,
anchorY: 0.5,
x: 0,
+ y: -trackHeight / 2 + wallThickness / 2
+ }));
+ self.walls.push(topWall);
+ // Outer walls - bottom
+ var bottomWall = self.addChild(LK.getAsset('wall', {
+ width: trackWidth,
+ height: wallThickness,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: trackHeight / 2 - wallThickness / 2
+ }));
+ self.walls.push(bottomWall);
+ // Outer walls - left
+ var leftWall = self.addChild(LK.getAsset('wall', {
+ width: wallThickness,
+ height: trackHeight,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: -trackWidth / 2 + wallThickness / 2,
y: 0
- });
- // Inner track boundary (creates the road)
- var inner = self.attachAsset('trackInner', {
+ }));
+ self.walls.push(leftWall);
+ // Outer walls - right
+ var rightWall = self.addChild(LK.getAsset('wall', {
+ width: wallThickness,
+ height: trackHeight,
anchorX: 0.5,
anchorY: 0.5,
+ x: trackWidth / 2 - wallThickness / 2,
+ y: 0
+ }));
+ self.walls.push(rightWall);
+ // Inner walls - top
+ var innerTopWall = self.addChild(LK.getAsset('wall', {
+ width: innerWidth,
+ height: wallThickness,
+ anchorX: 0.5,
+ anchorY: 0.5,
x: 0,
+ y: -innerHeight / 2 + wallThickness / 2
+ }));
+ self.walls.push(innerTopWall);
+ // Inner walls - bottom
+ var innerBottomWall = self.addChild(LK.getAsset('wall', {
+ width: innerWidth,
+ height: wallThickness,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: innerHeight / 2 - wallThickness / 2
+ }));
+ self.walls.push(innerBottomWall);
+ // Inner walls - left
+ var innerLeftWall = self.addChild(LK.getAsset('wall', {
+ width: wallThickness,
+ height: innerHeight,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: -innerWidth / 2 + wallThickness / 2,
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;
+ }));
+ self.walls.push(innerLeftWall);
+ // Inner walls - right
+ var innerRightWall = self.addChild(LK.getAsset('wall', {
+ width: wallThickness,
+ height: innerHeight,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: innerWidth / 2 - wallThickness / 2,
+ y: 0
+ }));
+ self.walls.push(innerRightWall);
+ // Add corner barriers to create turns
+ // Top-left corner barrier
+ var cornerTL = self.addChild(LK.getAsset('wall', {
+ width: 300,
+ height: 300,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: -500,
+ y: -800
+ }));
+ self.walls.push(cornerTL);
+ // Top-right corner barrier
+ var cornerTR = self.addChild(LK.getAsset('wall', {
+ width: 300,
+ height: 300,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 500,
+ y: -800
+ }));
+ self.walls.push(cornerTR);
+ // Bottom-left corner barrier
+ var cornerBL = self.addChild(LK.getAsset('wall', {
+ width: 300,
+ height: 300,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: -500,
+ y: 800
+ }));
+ self.walls.push(cornerBL);
+ // Bottom-right corner barrier
+ var cornerBR = self.addChild(LK.getAsset('wall', {
+ width: 300,
+ height: 300,
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 500,
+ y: 800
+ }));
+ self.walls.push(cornerBR);
+ // Track surface
+ var trackSurface = self.addChild(LK.getAsset('track', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: 0
+ }));
+ self.checkCollision = function (carObj) {
+ // Check collision with all walls
+ for (var i = 0; i < self.walls.length; i++) {
+ if (carObj.intersects(self.walls[i])) {
+ 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;
});
@@ -330,9 +437,9 @@
}
// Main game update
game.update = function () {
// Check track collision
- if (track.checkCollision(car.x - 1024, car.y - 1366)) {
+ if (track.checkCollision(car)) {
// Crash effect
LK.getSound('crash').play();
LK.effects.flashObject(car, 0xff0000, 500);
// Bounce car back
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
