/****
* 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
var Coin = Container.expand(function () {
var self = Container.call(this);
var coinAsset = self.attachAsset('coin', {
anchorX: 0.5,
anchorY: 0.5
});
self.width = coinAsset.width;
self.height = coinAsset.height;
return self;
});
// 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
****/
// Road stripes
// Coin
// Obstacle
// Car (player)
// Game area
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;
// Dragging
var dragCar = false;
var dragOffsetX = 0;
// 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;
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;
}
};
game.up = function (x, y, obj) {
dragCar = false;
};
// 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() {
var coin = new Coin();
var lanes = 4;
var laneWidth = ROAD_WIDTH / lanes;
var lane = Math.floor(Math.random() * lanes);
coin.x = ROAD_X + laneWidth * (lane + 0.5);
coin.y = -coin.height;
coins.push(coin);
game.addChild(coin);
}
// Main update loop
game.update = function () {
// Speed up over time
if (LK.ticks % speedIncreaseEvery === 0 && speed < maxSpeed) {
speed += 2;
}
// 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 > 40 + Math.floor(60 * baseSpeed / speed)) {
spawnObstacle();
obstacleTimer = 0;
}
// Spawn coins
coinTimer += 1;
if (coinTimer > 90 + Math.floor(120 * baseSpeed / speed)) {
spawnCoin();
coinTimer = 0;
}
// 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;
}
// Collect coin
if (car.intersects(coin)) {
score += 1;
scoreTxt.setText(score);
if (score > bestScore) {
bestScore = score;
bestScoreTxt.setText('Best: ' + bestScore);
storage.bestScore = bestScore;
}
// Animate coin
tween(coin, {
scaleX: 1.5,
scaleY: 1.5,
alpha: 0
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
coin.destroy();
}
});
coins.splice(i, 1);
continue;
}
}
};
// Reset score on new game
score = 0;
scoreTxt.setText(score);
bestScore = storage.bestScore || 0;
bestScoreTxt.setText('Best: ' + bestScore); ===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,260 @@
-/****
+/****
+* 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
+var Coin = Container.expand(function () {
+ var self = Container.call(this);
+ var coinAsset = self.attachAsset('coin', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.width = coinAsset.width;
+ self.height = coinAsset.height;
+ return self;
+});
+// 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: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0x222222
+});
+
+/****
+* Game Code
+****/
+// Road stripes
+// Coin
+// Obstacle
+// Car (player)
+// Game area
+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;
+// Dragging
+var dragCar = false;
+var dragOffsetX = 0;
+// 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;
+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;
+ }
+};
+game.up = function (x, y, obj) {
+ dragCar = false;
+};
+// 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() {
+ var coin = new Coin();
+ var lanes = 4;
+ var laneWidth = ROAD_WIDTH / lanes;
+ var lane = Math.floor(Math.random() * lanes);
+ coin.x = ROAD_X + laneWidth * (lane + 0.5);
+ coin.y = -coin.height;
+ coins.push(coin);
+ game.addChild(coin);
+}
+// Main update loop
+game.update = function () {
+ // Speed up over time
+ if (LK.ticks % speedIncreaseEvery === 0 && speed < maxSpeed) {
+ speed += 2;
+ }
+ // 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 > 40 + Math.floor(60 * baseSpeed / speed)) {
+ spawnObstacle();
+ obstacleTimer = 0;
+ }
+ // Spawn coins
+ coinTimer += 1;
+ if (coinTimer > 90 + Math.floor(120 * baseSpeed / speed)) {
+ spawnCoin();
+ coinTimer = 0;
+ }
+ // 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;
+ }
+ // Collect coin
+ if (car.intersects(coin)) {
+ score += 1;
+ scoreTxt.setText(score);
+ if (score > bestScore) {
+ bestScore = score;
+ bestScoreTxt.setText('Best: ' + bestScore);
+ storage.bestScore = bestScore;
+ }
+ // Animate coin
+ tween(coin, {
+ scaleX: 1.5,
+ scaleY: 1.5,
+ alpha: 0
+ }, {
+ duration: 200,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ coin.destroy();
+ }
+ });
+ coins.splice(i, 1);
+ continue;
+ }
+ }
+};
+// Reset score on new game
+score = 0;
+scoreTxt.setText(score);
+bestScore = storage.bestScore || 0;
+bestScoreTxt.setText('Best: ' + bestScore);
\ No newline at end of file
Vertical sports car. In-Game asset. 2d. High contrast. No shadows
Accelerator pedal vertical. In-Game asset. 2d. High contrast. No shadows
Car gear-. In-Game asset. 2d. High contrast. No shadows
Standart Car vertical. In-Game asset. 2d. High contrast. No shadows
Token. In-Game asset. 2d. High contrast. No shadows