Play
:quality(85)/https:%2F%2Fcdn.frvr.ai/68449f58208521569644f51d.png)
:quality(85)/https:%2F%2Fcdn.frvr.ai/68449f58208521569644f51e.png)
#Race
Creation History
User prompt
Let the obstacles go in the same direction as my bike
User prompt
Increase the speed of obstacles
User prompt
No vehicles should be driving backwards
User prompt
Apply the obstacle skin to the obstacle vehicles
User prompt
Remove changing colors
User prompt
Make speed bar horizontal
User prompt
Adapt speed bar to speed skin
User prompt
Make the skin of gear- and gear+ into gear skin
User prompt
Set brakeide throttle skin
User prompt
Remove gas from car skin and add it to gas skin
User prompt
Block vehicles
User prompt
Gaz brake Gear+ Gear - Make Speed skins square
User prompt
Vites Gaz Yavaşlama hız imlecini kare yap
User prompt
Add individual skins to buttons
User prompt
Restore buttons
User prompt
Add moving vehicles instead of obstacles
User prompt
Let the vehicle stay in the middle for a while longer, then slow down after shifting gears and step on the gas to increase speed.
User prompt
Add skins store
User prompt
Make Speed Cursor
User prompt
Add drift system
User prompt
Increase traffic and add gear
User prompt
Add gas and brake
User prompt
Speed up the game by 1% per 2000 scores
User prompt
Slow down score growth by 75%
User prompt
Remove tokens and instead make a score system based on distance
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
bestScore: 0
});
/****
* Classes
****/
// Player Car
var Car = Container.expand(function () {
var self = Container.call(this);
var carAsset = self.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5
});
// For collision box, use the car asset's size
self.width = carAsset.width;
self.height = carAsset.height;
return self;
});
// Coin class removed (no longer needed)
// Obstacle
var Obstacle = Container.expand(function () {
var self = Container.call(this);
var obsAsset = self.attachAsset('obstacle', {
anchorX: 0.5,
anchorY: 0.5
});
self.width = obsAsset.width;
self.height = obsAsset.height;
// For collision
return self;
});
// Road Stripe
var Stripe = Container.expand(function () {
var self = Container.call(this);
var stripeAsset = self.attachAsset('stripe', {
anchorX: 0.5,
anchorY: 0.5
});
self.width = stripeAsset.width;
self.height = stripeAsset.height;
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x222222
});
/****
* Game Code
****/
// LK.init.shape('coin', {width:100, height:100, color:0xffeb3b, shape:'ellipse'})
// Game area
// Car (player)
// Obstacle
// Coin
// Road stripes
var GAME_WIDTH = 2048;
var GAME_HEIGHT = 2732;
var ROAD_WIDTH = 1200;
var ROAD_X = (GAME_WIDTH - ROAD_WIDTH) / 2;
var ROAD_Y = 0;
var ROAD_HEIGHT = GAME_HEIGHT;
// Player car
var car = new Car();
car.x = GAME_WIDTH / 2;
car.y = GAME_HEIGHT - 500;
game.addChild(car);
// Road stripes
var stripes = [];
var stripeSpacing = 400;
for (var i = 0; i < 8; i++) {
var stripe = new Stripe();
stripe.x = GAME_WIDTH / 2;
stripe.y = i * stripeSpacing + 200;
stripes.push(stripe);
game.addChild(stripe);
}
// Obstacles and coins
var obstacles = [];
var coins = [];
// Score
var score = 0;
var scoreTxt = new Text2('0', {
size: 120,
fill: "#fff"
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Best score
var bestScore = storage.bestScore || 0;
var bestScoreTxt = new Text2('Best: ' + bestScore, {
size: 60,
fill: "#fff"
});
bestScoreTxt.anchor.set(0.5, 0);
bestScoreTxt.y = 120;
LK.gui.top.addChild(bestScoreTxt);
// Game speed
var baseSpeed = 18;
var speed = baseSpeed;
var speedIncreaseEvery = 600; // ticks
var maxSpeed = 48;
// Gear system
var gear = 1;
var maxGear = 5;
var minGear = 1;
var gearSpeeds = [0, 18, 26, 34, 42, 48]; // index 0 unused, gear 1-5
// Dragging
var dragCar = false;
var dragOffsetX = 0;
// Gas and brake button state
var gasPressed = false;
var brakePressed = false;
// Touch controls
function clamp(val, min, max) {
return val < min ? min : val > max ? max : val;
}
function handleMove(x, y, obj) {
if (dragCar) {
// Clamp car within road
var minX = ROAD_X + car.width / 2 + 20;
var maxX = ROAD_X + ROAD_WIDTH - car.width / 2 - 20;
car.x = clamp(x - dragOffsetX, minX, maxX);
}
}
game.move = handleMove;
// --- Gas and Brake Buttons ---
var buttonSize = 260;
var buttonMargin = 80;
// Gas button (bottom right)
var gasBtn = new Container();
var gasAsset = gasBtn.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize,
color: 0x43a047
});
gasAsset.tint = 0x43a047;
gasBtn.x = GAME_WIDTH - buttonSize / 2 - buttonMargin;
gasBtn.y = GAME_HEIGHT - buttonSize / 2 - buttonMargin;
game.addChild(gasBtn);
var gasTxt = new Text2('GAS', {
size: 70,
fill: "#fff"
});
gasTxt.anchor.set(0.5, 0.5);
gasBtn.addChild(gasTxt);
// Brake button (bottom left)
var brakeBtn = new Container();
var brakeAsset = brakeBtn.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize,
color: 0xfbc02d
});
brakeAsset.tint = 0xfbc02d;
brakeBtn.x = buttonSize / 2 + buttonMargin;
brakeBtn.y = GAME_HEIGHT - buttonSize / 2 - buttonMargin;
game.addChild(brakeBtn);
var brakeTxt = new Text2('BRAKE', {
size: 70,
fill: "#fff"
});
brakeTxt.anchor.set(0.5, 0.5);
brakeBtn.addChild(brakeTxt);
// Gear Up button (bottom center right)
var gearUpBtn = new Container();
var gearUpAsset = gearUpBtn.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize * 0.7,
height: buttonSize * 0.7,
color: 0x90caf9
});
gearUpAsset.tint = 0x90caf9;
gearUpBtn.x = GAME_WIDTH / 2 + buttonSize + buttonMargin;
gearUpBtn.y = GAME_HEIGHT - buttonSize / 2 - buttonMargin;
game.addChild(gearUpBtn);
var gearUpTxt = new Text2('GEAR+', {
size: 60,
fill: "#fff"
});
gearUpTxt.anchor.set(0.5, 0.5);
gearUpBtn.addChild(gearUpTxt);
// Gear Down button (bottom center left)
var gearDownBtn = new Container();
var gearDownAsset = gearDownBtn.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize * 0.7,
height: buttonSize * 0.7,
color: 0x90caf9
});
gearDownAsset.tint = 0x90caf9;
gearDownBtn.x = GAME_WIDTH / 2 - buttonSize - buttonMargin;
gearDownBtn.y = GAME_HEIGHT - buttonSize / 2 - buttonMargin;
game.addChild(gearDownBtn);
var gearDownTxt = new Text2('GEAR-', {
size: 60,
fill: "#fff"
});
gearDownTxt.anchor.set(0.5, 0.5);
gearDownBtn.addChild(gearDownTxt);
// Gear display (center bottom)
var gearTxt = new Text2('GEAR: 1', {
size: 80,
fill: "#fff"
});
gearTxt.anchor.set(0.5, 0.5);
gearTxt.x = GAME_WIDTH / 2;
gearTxt.y = GAME_HEIGHT - buttonSize - buttonMargin - 60;
game.addChild(gearTxt);
// Helper to check if a point is inside a button
function isInsideBtn(btn, x, y) {
var bx = btn.x,
by = btn.y;
var hw = buttonSize / 2,
hh = buttonSize / 2;
return x >= bx - hw && x <= bx + hw && y >= by - hh && y <= by + hh;
}
// Down event
game.down = function (x, y, obj) {
// Only start drag if touch is on car
var local = car.toLocal(game.toGlobal({
x: x,
y: y
}));
if (local.x >= -car.width / 2 && local.x <= car.width / 2 && local.y >= -car.height / 2 && local.y <= car.height / 2) {
dragCar = true;
dragOffsetX = x - car.x;
}
// Gas/brake buttons
if (isInsideBtn(gasBtn, x, y)) {
gasPressed = true;
gasAsset.alpha = 0.7;
}
if (isInsideBtn(brakeBtn, x, y)) {
brakePressed = true;
brakeAsset.alpha = 0.7;
}
// Gear up button
if (isInsideBtn(gearUpBtn, x, y)) {
if (gear < maxGear) {
gear++;
gearTxt.setText('GEAR: ' + gear);
// Snap speed to new gear's minimum if below
if (speed < gearSpeeds[gear]) speed = gearSpeeds[gear];
}
gearUpAsset.alpha = 0.7;
}
// Gear down button
if (isInsideBtn(gearDownBtn, x, y)) {
if (gear > minGear) {
gear--;
gearTxt.setText('GEAR: ' + gear);
// Snap speed to new gear's max if above
if (speed > gearSpeeds[gear]) speed = gearSpeeds[gear];
}
gearDownAsset.alpha = 0.7;
}
};
// Up event
game.up = function (x, y, obj) {
dragCar = false;
gasPressed = false;
brakePressed = false;
gasAsset.alpha = 1;
brakeAsset.alpha = 1;
gearUpAsset.alpha = 1;
gearDownAsset.alpha = 1;
};
// Spawning
var obstacleTimer = 0;
var coinTimer = 0;
function spawnObstacle() {
var obs = new Obstacle();
// Random lane
var lanes = 4;
var laneWidth = ROAD_WIDTH / lanes;
var lane = Math.floor(Math.random() * lanes);
obs.x = ROAD_X + laneWidth * (lane + 0.5);
obs.y = -obs.height;
obstacles.push(obs);
game.addChild(obs);
}
// function spawnCoin removed (no longer needed)
// Main update loop
game.update = function () {
// Gas/brake logic
if (gasPressed) {
speed = Math.min(speed + 0.5, gearSpeeds[gear]);
} else if (brakePressed) {
speed = Math.max(speed - 1.2, gearSpeeds[gear - 1] ? gearSpeeds[gear - 1] : baseSpeed * 0.5);
} else {
// Speed up over time
if (LK.ticks % speedIncreaseEvery === 0 && speed < gearSpeeds[gear]) {
speed += 2;
}
}
// Clamp speed to current gear range
if (speed > gearSpeeds[gear]) speed = gearSpeeds[gear];
if (speed < (gearSpeeds[gear - 1] ? gearSpeeds[gear - 1] : baseSpeed * 0.5)) speed = gearSpeeds[gear - 1] ? gearSpeeds[gear - 1] : baseSpeed * 0.5;
gearTxt.setText('GEAR: ' + gear);
// Move stripes
for (var i = 0; i < stripes.length; i++) {
stripes[i].y += speed;
if (stripes[i].y > GAME_HEIGHT + stripes[i].height / 2) {
stripes[i].y -= stripeSpacing * stripes.length;
}
}
// Spawn obstacles
obstacleTimer += 1;
if (obstacleTimer > 32 + Math.floor(40 * baseSpeed / speed)) {
// Spawn 1-2 obstacles per spawn, but never in the same lane
var lanes = 4;
var usedLanes = [];
var numObstacles = 1 + (Math.random() < 0.5 ? 1 : 0); // 1 or 2
for (var i = 0; i < numObstacles; i++) {
var lane;
do {
lane = Math.floor(Math.random() * lanes);
} while (usedLanes.indexOf(lane) !== -1 && usedLanes.length < lanes);
usedLanes.push(lane);
var obs = new Obstacle();
var laneWidth = ROAD_WIDTH / lanes;
obs.x = ROAD_X + laneWidth * (lane + 0.5);
obs.y = -obs.height;
obstacles.push(obs);
game.addChild(obs);
}
obstacleTimer = 0;
}
// Coin spawning removed
// Move obstacles
for (var i = obstacles.length - 1; i >= 0; i--) {
var obs = obstacles[i];
obs.y += speed;
// Remove if off screen
if (obs.y - obs.height / 2 > GAME_HEIGHT + 100) {
obs.destroy();
obstacles.splice(i, 1);
continue;
}
// Collision with car
if (car.intersects(obs)) {
// Flash and game over
LK.effects.flashScreen(0xff0000, 800);
if (score > bestScore) {
storage.bestScore = score;
}
LK.showGameOver();
return;
}
}
// Move coins
for (var i = coins.length - 1; i >= 0; i--) {
var coin = coins[i];
coin.y += speed;
// Remove if off screen
if (coin.y - coin.height / 2 > GAME_HEIGHT + 100) {
coin.destroy();
coins.splice(i, 1);
continue;
}
}
score += Math.floor(speed / 4); // Slow down score growth by 75%
scoreTxt.setText(score);
// Speed up by 1% for every 2000 score points
if (typeof lastScoreForSpeed === "undefined") {
lastScoreForSpeed = 0;
}
while (score - lastScoreForSpeed >= 2000) {
speed = Math.min(Math.round(speed * 1.01), maxSpeed);
lastScoreForSpeed += 2000;
}
if (score > bestScore) {
bestScore = score;
bestScoreTxt.setText('Best: ' + bestScore);
storage.bestScore = bestScore;
}
};
// Reset score on new game
score = 0;
scoreTxt.setText(score);
bestScore = storage.bestScore || 0;
bestScoreTxt.setText('Best: ' + bestScore); ===================================================================
--- original.js
+++ change.js
@@ -107,8 +107,13 @@
var baseSpeed = 18;
var speed = baseSpeed;
var speedIncreaseEvery = 600; // ticks
var maxSpeed = 48;
+// Gear system
+var gear = 1;
+var maxGear = 5;
+var minGear = 1;
+var gearSpeeds = [0, 18, 26, 34, 42, 48]; // index 0 unused, gear 1-5
// Dragging
var dragCar = false;
var dragOffsetX = 0;
// Gas and brake button state
@@ -167,8 +172,55 @@
fill: "#fff"
});
brakeTxt.anchor.set(0.5, 0.5);
brakeBtn.addChild(brakeTxt);
+// Gear Up button (bottom center right)
+var gearUpBtn = new Container();
+var gearUpAsset = gearUpBtn.attachAsset('car', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ width: buttonSize * 0.7,
+ height: buttonSize * 0.7,
+ color: 0x90caf9
+});
+gearUpAsset.tint = 0x90caf9;
+gearUpBtn.x = GAME_WIDTH / 2 + buttonSize + buttonMargin;
+gearUpBtn.y = GAME_HEIGHT - buttonSize / 2 - buttonMargin;
+game.addChild(gearUpBtn);
+var gearUpTxt = new Text2('GEAR+', {
+ size: 60,
+ fill: "#fff"
+});
+gearUpTxt.anchor.set(0.5, 0.5);
+gearUpBtn.addChild(gearUpTxt);
+// Gear Down button (bottom center left)
+var gearDownBtn = new Container();
+var gearDownAsset = gearDownBtn.attachAsset('car', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ width: buttonSize * 0.7,
+ height: buttonSize * 0.7,
+ color: 0x90caf9
+});
+gearDownAsset.tint = 0x90caf9;
+gearDownBtn.x = GAME_WIDTH / 2 - buttonSize - buttonMargin;
+gearDownBtn.y = GAME_HEIGHT - buttonSize / 2 - buttonMargin;
+game.addChild(gearDownBtn);
+var gearDownTxt = new Text2('GEAR-', {
+ size: 60,
+ fill: "#fff"
+});
+gearDownTxt.anchor.set(0.5, 0.5);
+gearDownBtn.addChild(gearDownTxt);
+// Gear display (center bottom)
+var gearTxt = new Text2('GEAR: 1', {
+ size: 80,
+ fill: "#fff"
+});
+gearTxt.anchor.set(0.5, 0.5);
+gearTxt.x = GAME_WIDTH / 2;
+gearTxt.y = GAME_HEIGHT - buttonSize - buttonMargin - 60;
+game.addChild(gearTxt);
// Helper to check if a point is inside a button
function isInsideBtn(btn, x, y) {
var bx = btn.x,
by = btn.y;
@@ -195,16 +247,38 @@
if (isInsideBtn(brakeBtn, x, y)) {
brakePressed = true;
brakeAsset.alpha = 0.7;
}
+ // Gear up button
+ if (isInsideBtn(gearUpBtn, x, y)) {
+ if (gear < maxGear) {
+ gear++;
+ gearTxt.setText('GEAR: ' + gear);
+ // Snap speed to new gear's minimum if below
+ if (speed < gearSpeeds[gear]) speed = gearSpeeds[gear];
+ }
+ gearUpAsset.alpha = 0.7;
+ }
+ // Gear down button
+ if (isInsideBtn(gearDownBtn, x, y)) {
+ if (gear > minGear) {
+ gear--;
+ gearTxt.setText('GEAR: ' + gear);
+ // Snap speed to new gear's max if above
+ if (speed > gearSpeeds[gear]) speed = gearSpeeds[gear];
+ }
+ gearDownAsset.alpha = 0.7;
+ }
};
// Up event
game.up = function (x, y, obj) {
dragCar = false;
gasPressed = false;
brakePressed = false;
gasAsset.alpha = 1;
brakeAsset.alpha = 1;
+ gearUpAsset.alpha = 1;
+ gearDownAsset.alpha = 1;
};
// Spawning
var obstacleTimer = 0;
var coinTimer = 0;
@@ -223,17 +297,21 @@
// Main update loop
game.update = function () {
// Gas/brake logic
if (gasPressed) {
- speed = Math.min(speed + 0.5, maxSpeed);
+ speed = Math.min(speed + 0.5, gearSpeeds[gear]);
} else if (brakePressed) {
- speed = Math.max(speed - 1.2, baseSpeed * 0.5);
+ speed = Math.max(speed - 1.2, gearSpeeds[gear - 1] ? gearSpeeds[gear - 1] : baseSpeed * 0.5);
} else {
// Speed up over time
- if (LK.ticks % speedIncreaseEvery === 0 && speed < maxSpeed) {
+ if (LK.ticks % speedIncreaseEvery === 0 && speed < gearSpeeds[gear]) {
speed += 2;
}
}
+ // Clamp speed to current gear range
+ if (speed > gearSpeeds[gear]) speed = gearSpeeds[gear];
+ if (speed < (gearSpeeds[gear - 1] ? gearSpeeds[gear - 1] : baseSpeed * 0.5)) speed = gearSpeeds[gear - 1] ? gearSpeeds[gear - 1] : baseSpeed * 0.5;
+ gearTxt.setText('GEAR: ' + gear);
// Move stripes
for (var i = 0; i < stripes.length; i++) {
stripes[i].y += speed;
if (stripes[i].y > GAME_HEIGHT + stripes[i].height / 2) {
@@ -241,10 +319,26 @@
}
}
// Spawn obstacles
obstacleTimer += 1;
- if (obstacleTimer > 40 + Math.floor(60 * baseSpeed / speed)) {
- spawnObstacle();
+ if (obstacleTimer > 32 + Math.floor(40 * baseSpeed / speed)) {
+ // Spawn 1-2 obstacles per spawn, but never in the same lane
+ var lanes = 4;
+ var usedLanes = [];
+ var numObstacles = 1 + (Math.random() < 0.5 ? 1 : 0); // 1 or 2
+ for (var i = 0; i < numObstacles; i++) {
+ var lane;
+ do {
+ lane = Math.floor(Math.random() * lanes);
+ } while (usedLanes.indexOf(lane) !== -1 && usedLanes.length < lanes);
+ usedLanes.push(lane);
+ var obs = new Obstacle();
+ var laneWidth = ROAD_WIDTH / lanes;
+ obs.x = ROAD_X + laneWidth * (lane + 0.5);
+ obs.y = -obs.height;
+ obstacles.push(obs);
+ game.addChild(obs);
+ }
obstacleTimer = 0;
}
// Coin spawning removed
// Move obstacles
Images
:quality(85)/https:%2F%2Fcdn.frvr.ai/6844a618208521569644f54d.png%3F3)
Vertical sports car. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6844a9d2208521569644f575.png%3F3)
Accelerator pedal vertical. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6844aa96208521569644f589.png%3F3)
Car gear-. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6844ac7b208521569644f5a5.png%3F3)
Standart Car vertical. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/6844afbd208521569644f5be.png%3F3)
Token. In-Game asset. 2d. High contrast. No shadows
Used plugins
@upit/tween@upit/storage
