:quality(85)/https://cdn.frvr.ai/6801356837595a8da670de40.png)
:quality(85)/https://cdn.upit.com/p419e9sv106psogvowpaywkz.png)
:quality(85)/https://cdn.frvr.ai/6801356737595a8da670de3f.png)
Creation History
User prompt
Remove the square on top if the car asset
User prompt
Dont speed up that much after 500
User prompt
Add sounds and bg music
User prompt
Speed down a little bit after 800
User prompt
The lines go fastes after 500 points
User prompt
Make the point counter to be just round numbers without decimals
User prompt
Make the instructions in 3 lines
User prompt
Dont let the buildings into the road
User prompt
Add the background music and sounds
User prompt
Remove the yellow squares fron the road show them just on the sides
User prompt
Remove the buldings from the road only show them on the sides
User prompt
Add effects
User prompt
Make the side gray to be white
User prompt
Remove the city windows from the main road and make the sides of the road white instead of gray
User prompt
Make the gray sides of the road to be neon
User prompt
Add trees and stores and decoration on the side of the road
User prompt
Make the instructions text white, purple stroke, centered and the paragraph aligned to the center
User prompt
Make the instructions text bolder with a stroke in Two lines and color purple and white stroke
User prompt
A red effect is shown if you tap when there is a line and you lose points
User prompt
When you tap you get a green or red effect underneath that reflects if you are winning or losing, please add effects ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Make the points counter from 1 to 1000 and if you reach 1000 you win the level
User prompt
Car Needs to be in front of the lines
User prompt
Make the car in front of the lines, lines cross beneath him
User prompt
If you tap when there is line you lose points and you win points if you tap when there is no line crossing the car
User prompt
Lines only came from the center of the screen
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");
/****
* Classes
****/
var Building = Container.expand(function () {
var self = Container.call(this);
var buildingGraphics = self.attachAsset('building', {
anchorX: 0.5,
anchorY: 0
});
// Randomize building properties
var shade = Math.floor(Math.random() * 40) + 40;
buildingGraphics.tint = shade << 16 | shade << 8 | shade;
buildingGraphics.height = Math.random() * 600 + 400;
buildingGraphics.width = Math.random() * 100 + 100;
// Add windows to buildings for a city look
var windowCount = Math.floor(buildingGraphics.height / 80);
var windowsPerRow = Math.floor(buildingGraphics.width / 40);
for (var i = 0; i < windowCount; i++) {
for (var j = 0; j < windowsPerRow; j++) {
var windowLight = self.addChild(new Container());
var windowAsset = windowLight.attachAsset('building', {
anchorX: 0.5,
anchorY: 0.5,
width: 20,
height: 30,
tint: 0xFFFF99
});
windowLight.x = j * 40 - buildingGraphics.width / 2 + 25;
windowLight.y = i * 80 + 50;
// Randomly light windows
windowLight.alpha = Math.random() > 0.3 ? 0.8 : 0;
}
}
self.speed = 10; // Default speed
self.update = function () {
self.y += self.speed;
// Reset building when it goes off screen
if (self.y > 2732 + buildingGraphics.height) {
self.y = -buildingGraphics.height;
self.x = Math.random() * 2048;
var shade = Math.floor(Math.random() * 40) + 40;
buildingGraphics.tint = shade << 16 | shade << 8 | shade;
buildingGraphics.height = Math.random() * 600 + 400;
buildingGraphics.width = Math.random() * 100 + 100;
// Recreate windows when building resets
self.removeChildren(1); // Keep only the main building graphic
var windowCount = Math.floor(buildingGraphics.height / 80);
var windowsPerRow = Math.floor(buildingGraphics.width / 40);
for (var i = 0; i < windowCount; i++) {
for (var j = 0; j < windowsPerRow; j++) {
var windowLight = self.addChild(new Container());
var windowAsset = windowLight.attachAsset('building', {
anchorX: 0.5,
anchorY: 0.5,
width: 20,
height: 30,
tint: 0xFFFF99
});
windowLight.x = j * 40 - buildingGraphics.width / 2 + 25;
windowLight.y = i * 80 + 50;
// Randomly light windows
windowLight.alpha = Math.random() > 0.3 ? 0.8 : 0;
}
}
}
};
return self;
});
var Car = Container.expand(function () {
var self = Container.call(this);
// Create car body
var carGraphics = self.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x3366CC // Blue car color
});
// Add car windows
var carWindshield = self.addChild(new Container());
var windshieldAsset = carWindshield.attachAsset('building', {
anchorX: 0.5,
anchorY: 0.5,
width: 140,
height: 80,
tint: 0xCCEEFF
});
carWindshield.y = -80;
// Add headlights
var leftHeadlight = self.addChild(new Container());
var leftHeadlightAsset = leftHeadlight.attachAsset('scoreEffect', {
anchorX: 0.5,
anchorY: 0.5,
width: 40,
height: 40,
tint: 0xFFFFAA
});
leftHeadlight.x = -60;
leftHeadlight.y = -140;
var rightHeadlight = self.addChild(new Container());
var rightHeadlightAsset = rightHeadlight.attachAsset('scoreEffect', {
anchorX: 0.5,
anchorY: 0.5,
width: 40,
height: 40,
tint: 0xFFFFAA
});
rightHeadlight.x = 60;
rightHeadlight.y = -140;
self.jumping = false;
self.jumpHeight = 100;
self.originalY = 0;
self.lastY = 0; // Track last Y position for intersection detection
self.jump = function () {
if (self.jumping) {
return;
}
self.jumping = true;
self.originalY = self.y;
// Jump animation using tween
tween(self, {
y: self.y - self.jumpHeight
}, {
duration: 300,
easing: tween.easeOut,
onFinish: function onFinish() {
// Fall back down
tween(self, {
y: self.originalY
}, {
duration: 300,
easing: tween.easeIn,
onFinish: function onFinish() {
self.jumping = false;
}
});
}
});
// Play jump sound
LK.getSound('jump').play();
};
self.down = function () {
self.jump();
};
self.update = function () {
self.lastY = self.y;
// Create headlight glow effect
if (LK.ticks % 5 === 0) {
leftHeadlightAsset.alpha = 0.7 + Math.random() * 0.3;
rightHeadlightAsset.alpha = 0.7 + Math.random() * 0.3;
}
};
return self;
});
var Line = Container.expand(function () {
var self = Container.call(this);
// Create road line marking
var lineGraphics = self.attachAsset('line', {
anchorX: 0.5,
anchorY: 0.5
});
// Make line vertical
lineGraphics.rotation = Math.PI / 2; // Rotate 90 degrees
// Road lines have fixed width to better match car size
lineGraphics.width = 400; // Line length (now vertical)
lineGraphics.height = 60; // Line thickness (more visible)
self.lastY = 0; // Track last Y position for intersection detection
self.speed = 15; // Default speed
self.active = true; // Whether the line is active for scoring
self.scored = false; // Whether this line has been scored already
// Add visual effect to make lines more prominent
var glowEffect = self.addChild(new Container());
var glowAsset = glowEffect.attachAsset('line', {
anchorX: 0.5,
anchorY: 0.5,
width: lineGraphics.width + 20,
height: lineGraphics.height + 20,
tint: 0xFFFF00,
alpha: 0.3
});
glowAsset.rotation = Math.PI / 2;
self.update = function () {
self.lastY = self.y; // Store last position for collision detection
self.y += self.speed;
// Pulse glow effect
if (LK.ticks % 10 === 0) {
glowAsset.alpha = 0.2 + Math.random() * 0.2;
}
// Remove when off screen
if (self.y > 2732 + lineGraphics.width / 2) {
self.active = false;
}
};
return self;
});
var ScoreEffect = Container.expand(function () {
var self = Container.call(this);
var effectGraphics = self.attachAsset('scoreEffect', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.8
});
self.show = function (x, y, isPositive) {
self.x = x;
self.y = y;
if (!isPositive) {
effectGraphics.tint = 0xFF0000;
} else {
effectGraphics.tint = 0x00FF00;
}
// Animation for the effect
tween(self, {
alpha: 0,
y: y - 100
}, {
duration: 800,
easing: tween.easeOut,
onFinish: function onFinish() {
self.alpha = 1;
self.visible = false;
}
});
self.visible = true;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x87CEEB
});
/****
* Game Code
****/
// Game variables
var car;
var lines = [];
var buildings = [];
var score = 0;
var scoreText;
var speedMultiplier = 1;
var lineSpawnRate = 60; // Frames between line spawns
var difficulty = 1;
var isGameActive = true;
var scoreEffects = [];
var effectIndex = 0;
var lastJumpScore = 0;
// Create a sky background
game.setBackgroundColor(0x87CEEB); // Light blue sky
// Initialize the road
var road = game.addChild(LK.getAsset('road', {
anchorX: 0.5,
anchorY: 0.5,
x: 2048 / 2,
y: 2732 / 2,
width: 1200,
// Make the road narrower than the full width
tint: 0x444444 // Darker gray for asphalt
}));
// Add road edges/sidewalks
var leftSidewalk = game.addChild(LK.getAsset('building', {
anchorX: 0,
anchorY: 0.5,
width: (2048 - road.width) / 2,
height: 2732,
x: 0,
y: 2732 / 2,
tint: 0x999999 // Light gray for sidewalk
}));
var rightSidewalk = game.addChild(LK.getAsset('building', {
anchorX: 1,
anchorY: 0.5,
width: (2048 - road.width) / 2,
height: 2732,
x: 2048,
y: 2732 / 2,
tint: 0x999999 // Light gray for sidewalk
}));
// Initialize score display
scoreText = new Text2('SCORE: 0', {
size: 80,
fill: 0xFFFFFF,
stroke: 0x000000,
strokeThickness: 5
});
scoreText.anchor.set(0.5, 0);
scoreText.y = 50; // Move down slightly from top
LK.gui.top.addChild(scoreText);
// Add game instructions
var instructionsText = new Text2('Tap when there are no lines! Don\'t tap on lines!', {
size: 60,
fill: 0xFFFFFF,
stroke: 0x000000,
strokeThickness: 4
});
instructionsText.anchor.set(0.5, 0);
instructionsText.y = 150;
LK.gui.top.addChild(instructionsText);
// Create buildings for city skyline on both sides of the road
for (var i = 0; i < 20; i++) {
var building = new Building();
// Position buildings on either side of the road
if (i % 2 === 0) {
building.x = Math.random() * ((2048 - road.width) / 2 - 100) + 100; // Left side
} else {
building.x = 2048 - (2048 - road.width) / 2 + Math.random() * ((2048 - road.width) / 2 - 100) - 100; // Right side
}
building.y = Math.random() * 2732;
buildings.push(building);
game.addChild(building);
}
// Create car
car = new Car();
car.x = 2048 / 2;
car.y = 2732 - 400;
game.addChild(car);
// Create score effects pool
for (var i = 0; i < 5; i++) {
var effect = new ScoreEffect();
effect.visible = false;
scoreEffects.push(effect);
game.addChild(effect);
}
// Game click handler
game.down = function (x, y, obj) {
if (!isGameActive) {
return;
}
// Check if car is already jumping
if (!car.jumping) {
car.jump();
// Check if car is over a road line
var overLine = false;
for (var i = 0; i < lines.length; i++) {
// Check if the car intersects with any vertical road line
if (lines[i].active && car.intersects(lines[i])) {
overLine = true;
break;
}
}
// Score or penalty based on jump
if (overLine) {
// Penalty for jumping over a line
score = Math.max(0, score - 10);
// Show penalty effect
var effect = scoreEffects[effectIndex];
effectIndex = (effectIndex + 1) % scoreEffects.length;
effect.show(car.x, car.y - 50, false);
// Play penalty sound
LK.getSound('penalty').play();
} else {
// Points for jumping on empty road
var pointsGained = 20 * difficulty;
score += pointsGained;
lastJumpScore = pointsGained;
// Show score effect
var effect = scoreEffects[effectIndex];
effectIndex = (effectIndex + 1) % scoreEffects.length;
effect.show(car.x, car.y - 50, true);
// Play point sound
LK.getSound('point').play();
}
// Update score display
scoreText.setText(score);
LK.setScore(score);
}
};
// Game update function
game.update = function () {
if (!isGameActive) {
return;
}
// Update car
car.update();
// Update all lines
for (var i = lines.length - 1; i >= 0; i--) {
lines[i].update();
// We don't penalize for just passing over a line anymore
// Only interactions happen when player taps
if (!lines[i].scored && lines[i].lastY < car.y && lines[i].y >= car.y) {
lines[i].scored = true; // Mark as scored
}
// Remove inactive lines
if (!lines[i].active) {
lines[i].destroy();
lines.splice(i, 1);
}
}
// Update all buildings
for (var i = 0; i < buildings.length; i++) {
buildings[i].speed = 5 * speedMultiplier;
buildings[i].update();
}
// Create new lines at intervals - always come from center of the screen
if (LK.ticks % Math.floor(lineSpawnRate / speedMultiplier) === 0) {
var line = new Line();
// Position line at the center of the screen
line.x = 2048 / 2; // Center X coordinate
line.y = -50;
line.speed = 15 * speedMultiplier;
lines.push(line);
game.addChild(line);
}
// Increase difficulty over time
if (LK.ticks % 600 === 0) {
// Every 10 seconds
difficulty += 0.1;
speedMultiplier = 1 + (difficulty - 1) * 0.5;
// Make lines spawn more frequently as difficulty increases
lineSpawnRate = Math.max(15, 60 - difficulty * 5);
}
// Check for game over condition
if (score < 0) {
isGameActive = false;
LK.showGameOver();
}
// Check for win condition (arbitrary high score for demo)
if (score >= 500) {
isGameActive = false;
LK.showYouWin();
}
};
// Start background music
LK.playMusic('bgmusic', {
fade: {
start: 0,
end: 0.4,
duration: 1000
}
}); ===================================================================
--- original.js
+++ change.js
@@ -164,18 +164,33 @@
anchorY: 0.5
});
// Make line vertical
lineGraphics.rotation = Math.PI / 2; // Rotate 90 degrees
- // Road lines have random lengths
- lineGraphics.width = Math.random() * 300 + 100; // Line length (now vertical)
- lineGraphics.height = 30; // Line thickness
+ // Road lines have fixed width to better match car size
+ lineGraphics.width = 400; // Line length (now vertical)
+ lineGraphics.height = 60; // Line thickness (more visible)
self.lastY = 0; // Track last Y position for intersection detection
self.speed = 15; // Default speed
self.active = true; // Whether the line is active for scoring
self.scored = false; // Whether this line has been scored already
+ // Add visual effect to make lines more prominent
+ var glowEffect = self.addChild(new Container());
+ var glowAsset = glowEffect.attachAsset('line', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ width: lineGraphics.width + 20,
+ height: lineGraphics.height + 20,
+ tint: 0xFFFF00,
+ alpha: 0.3
+ });
+ glowAsset.rotation = Math.PI / 2;
self.update = function () {
self.lastY = self.y; // Store last position for collision detection
self.y += self.speed;
+ // Pulse glow effect
+ if (LK.ticks % 10 === 0) {
+ glowAsset.alpha = 0.2 + Math.random() * 0.2;
+ }
// Remove when off screen
if (self.y > 2732 + lineGraphics.width / 2) {
self.active = false;
}
@@ -278,9 +293,9 @@
scoreText.anchor.set(0.5, 0);
scoreText.y = 50; // Move down slightly from top
LK.gui.top.addChild(scoreText);
// Add game instructions
-var instructionsText = new Text2('Tap to jump! Avoid the white lines', {
+var instructionsText = new Text2('Tap when there are no lines! Don\'t tap on lines!', {
size: 60,
fill: 0xFFFFFF,
stroke: 0x000000,
strokeThickness: 4
@@ -323,27 +338,27 @@
car.jump();
// Check if car is over a road line
var overLine = false;
for (var i = 0; i < lines.length; i++) {
- // Check if the car is near a vertical road line
- if (lines[i].active && Math.abs(lines[i].y - car.y) < 50 && Math.abs(lines[i].x - car.x) < 100) {
+ // Check if the car intersects with any vertical road line
+ if (lines[i].active && car.intersects(lines[i])) {
overLine = true;
break;
}
}
// Score or penalty based on jump
if (overLine) {
// Penalty for jumping over a line
- score = Math.max(0, score - 5);
+ score = Math.max(0, score - 10);
// Show penalty effect
var effect = scoreEffects[effectIndex];
effectIndex = (effectIndex + 1) % scoreEffects.length;
effect.show(car.x, car.y - 50, false);
// Play penalty sound
LK.getSound('penalty').play();
} else {
// Points for jumping on empty road
- var pointsGained = 10 * difficulty;
+ var pointsGained = 20 * difficulty;
score += pointsGained;
lastJumpScore = pointsGained;
// Show score effect
var effect = scoreEffects[effectIndex];
@@ -366,18 +381,11 @@
car.update();
// Update all lines
for (var i = lines.length - 1; i >= 0; i--) {
lines[i].update();
- // Check for car passing line (for scoring without jumping)
- if (!lines[i].scored && !car.jumping && lines[i].lastY < car.y && lines[i].y >= car.y) {
- // Car drove over a line - subtract points
- score = Math.max(0, score - 2);
- scoreText.setText(score);
- LK.setScore(score);
- // Show penalty effect
- var effect = scoreEffects[effectIndex];
- effectIndex = (effectIndex + 1) % scoreEffects.length;
- effect.show(car.x, car.y - 50, false);
+ // We don't penalize for just passing over a line anymore
+ // Only interactions happen when player taps
+ if (!lines[i].scored && lines[i].lastY < car.y && lines[i].y >= car.y) {
lines[i].scored = true; // Mark as scored
}
// Remove inactive lines
if (!lines[i].active) {
Images
:quality(85)/https://cdn.frvr.ai/6801493937595a8da670de6e.png%3F3)
:quality(85)/https://cdn.frvr.ai/680156d00ae5b5511299fa47.png%3F3)
Used plugins
@upit/tween@upit/storage
Most played remixes
:quality(85)/https://cdn.frvr.ai/68029464dd8b59ceb4d136b1.png)
