User prompt
Please fix the bug: 'TypeError: Cannot use 'in' operator to search for 'alpha' in null' in or related to this line: 'tween(tapToStartTxt, {' Line Number: 203 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
Code edit (1 edits merged)
Please save this source code
User prompt
Tap & Drive
Initial prompt
create a casual car game where you tap on screen and run car
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
highScore: 0
});
/****
* Classes
****/
var Car = Container.expand(function () {
var self = Container.call(this);
var carGraphics = self.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5
});
self.speed = 0;
self.maxSpeed = 15;
self.acceleration = 5;
self.deceleration = 0.2;
self.fuelConsumption = 0.3;
self.isMoving = false;
self.accelerate = function () {
self.speed = Math.min(self.maxSpeed, self.speed + self.acceleration);
self.isMoving = true;
// Slight bounce effect when accelerating
tween(carGraphics, {
scaleX: 0.9,
scaleY: 1.1
}, {
duration: 100,
onFinish: function onFinish() {
tween(carGraphics, {
scaleX: 1,
scaleY: 1
}, {
duration: 100
});
}
});
};
self.update = function () {
if (self.isMoving) {
self.speed = Math.max(0, self.speed - self.deceleration);
if (self.speed === 0) {
self.isMoving = false;
}
}
};
return self;
});
var GameItem = Container.expand(function (type) {
var self = Container.call(this);
self.type = type;
var assetId = type === 'obstacle' ? 'obstacle' : type === 'coin' ? 'coin' : 'fuelItem';
var itemGraphics = self.attachAsset(assetId, {
anchorX: 0.5,
anchorY: 0.5
});
// Add some animation based on item type
if (type === 'coin') {
// Make coins rotate
self.update = function () {
itemGraphics.rotation += 0.05;
};
} else if (type === 'fuelItem') {
// Make fuel items pulse
tween(itemGraphics, {
alpha: 0.7
}, {
duration: 800,
easing: tween.sinOut,
onFinish: function onFinish() {
tween(itemGraphics, {
alpha: 1
}, {
duration: 800,
easing: tween.sinIn,
onFinish: self.update
});
}
});
self.update = function () {
tween(itemGraphics, {
alpha: 0.7
}, {
duration: 800,
easing: tween.sinOut,
onFinish: function onFinish() {
tween(itemGraphics, {
alpha: 1
}, {
duration: 800,
easing: tween.sinIn,
onFinish: self.update
});
}
});
};
}
return self;
});
var RoadLine = Container.expand(function () {
var self = Container.call(this);
var lineGraphics = self.attachAsset('roadLine', {
anchorX: 0.5,
anchorY: 0.5
});
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x222222
});
/****
* Game Code
****/
// Game variables
var car;
var roadLines = [];
var gameItems = [];
var score = 0;
var fuel = 100;
var roadSpeed = 0;
var roadWidth = 600;
var lanePositions = [2048 / 2 - roadWidth / 3, 2048 / 2, 2048 / 2 + roadWidth / 3];
var currentLane = 1; // Middle lane
var gameStarted = false;
var roadContainer;
var itemsContainer;
var scoreTxt;
var distanceTxt;
var fuelBar;
var fuelBarBg;
var tapToStartTxt;
// Initialize game elements
function initGame() {
// Create road
roadContainer = new Container();
game.addChild(roadContainer);
var road = LK.getAsset('road', {
anchorX: 0.5,
anchorY: 0
});
road.x = 2048 / 2;
road.y = 0;
roadContainer.addChild(road);
// Create items container
itemsContainer = new Container();
game.addChild(itemsContainer);
// Create road lines
for (var i = 0; i < 10; i++) {
createRoadLine(-(i * 300));
}
// Create car
car = new Car();
car.x = lanePositions[currentLane];
car.y = 2732 - 300;
game.addChild(car);
// Create UI elements
createUI();
// Show tap to start
tapToStartTxt = new Text2('TAP TO START', {
size: 100,
fill: 0xFFFFFF
});
tapToStartTxt.anchor.set(0.5, 0.5);
tapToStartTxt.x = 2048 / 2;
tapToStartTxt.y = 2732 / 2;
game.addChild(tapToStartTxt);
// Animation for tap to start text
animateTapToStart();
}
function animateTapToStart() {
tween(tapToStartTxt, {
alpha: 0.5
}, {
duration: 800,
easing: tween.sinOut,
onFinish: function onFinish() {
tween(tapToStartTxt, {
alpha: 1
}, {
duration: 800,
easing: tween.sinIn,
onFinish: animateTapToStart
});
}
});
}
function createUI() {
// Score text
scoreTxt = new Text2('SCORE: 0', {
size: 70,
fill: 0xFFFFFF
});
scoreTxt.anchor.set(1, 0);
LK.gui.topRight.addChild(scoreTxt);
// Distance text
distanceTxt = new Text2('DISTANCE: 0m', {
size: 70,
fill: 0xFFFFFF
});
distanceTxt.anchor.set(0, 0);
distanceTxt.x = 120; // Leave space for the menu icon
LK.gui.topLeft.addChild(distanceTxt);
// Fuel bar background
fuelBarBg = LK.getAsset('fuelBarBg', {
anchorX: 0.5,
anchorY: 0
});
fuelBarBg.x = 2048 / 2;
fuelBarBg.y = 100;
LK.gui.top.addChild(fuelBarBg);
// Fuel bar
fuelBar = LK.getAsset('fuelBar', {
anchorX: 0,
anchorY: 0
});
fuelBar.x = fuelBarBg.x - fuelBarBg.width / 2;
fuelBar.y = fuelBarBg.y;
LK.gui.top.addChild(fuelBar);
}
function createRoadLine(yPos) {
var line = new RoadLine();
line.x = 2048 / 2;
line.y = yPos;
roadLines.push(line);
roadContainer.addChild(line);
return line;
}
function createGameItem(type, lane, yPos) {
var item = new GameItem(type);
item.x = lanePositions[lane];
item.y = yPos;
gameItems.push(item);
itemsContainer.addChild(item);
return item;
}
function startGame() {
if (gameStarted) {
return;
}
gameStarted = true;
score = 0;
fuel = 100;
roadSpeed = 0;
// Remove tap to start
if (tapToStartTxt && tapToStartTxt.parent) {
tapToStartTxt.parent.removeChild(tapToStartTxt);
tapToStartTxt = null;
}
// Start spawning items
spawnItems();
// Start background music
LK.playMusic('bgMusic');
}
function updateScore(value) {
score += value;
scoreTxt.setText('SCORE: ' + score);
}
function updateFuel(value) {
fuel = Math.max(0, Math.min(100, fuel + value));
// Update fuel bar width based on percentage
fuelBar.width = fuel / 100 * fuelBarBg.width;
// If no fuel left, game over
if (fuel <= 0) {
gameOver();
}
}
function gameOver() {
// Save high score if current score is higher
if (score > storage.highScore) {
storage.highScore = score;
}
// Show game over screen
LK.showGameOver();
}
function spawnItems() {
// Only spawn if game is active
if (!gameStarted) {
return;
}
// Choose random lane
var lane = Math.floor(Math.random() * 3);
// Choose random item type
var rand = Math.random();
var type;
if (rand < 0.6) {
type = 'obstacle';
} else if (rand < 0.9) {
type = 'coin';
} else {
type = 'fuelItem';
}
// Create item above the screen
createGameItem(type, lane, -100);
// Schedule next spawn
var nextSpawnTime = 1000 + Math.random() * 1000;
LK.setTimeout(spawnItems, nextSpawnTime);
}
function checkCollisions() {
// Check collisions with items
for (var i = gameItems.length - 1; i >= 0; i--) {
var item = gameItems[i];
if (car.intersects(item)) {
// Handle collision based on item type
if (item.type === 'obstacle') {
// Hit obstacle
LK.getSound('crash').play();
LK.effects.flashScreen(0xff0000, 500);
updateFuel(-20);
} else if (item.type === 'coin') {
// Collect coin
LK.getSound('coin').play();
updateScore(10);
} else if (item.type === 'fuelItem') {
// Collect fuel
LK.getSound('fuel').play();
updateFuel(20);
}
// Remove the item
if (item.parent) {
item.parent.removeChild(item);
}
gameItems.splice(i, 1);
}
}
}
// Input handlers
game.down = function (x, y, obj) {
if (!gameStarted) {
startGame();
return;
}
// Play tap sound
LK.getSound('tap').play();
// Accelerate car
car.accelerate();
// Consume fuel when tapping
updateFuel(-car.fuelConsumption);
// Handle lane change
if (x < 2048 / 3) {
// Tap on left side - move left if possible
if (currentLane > 0) {
currentLane--;
tween(car, {
x: lanePositions[currentLane]
}, {
duration: 200,
easing: tween.easeOut
});
}
} else if (x > 2048 * 2 / 3) {
// Tap on right side - move right if possible
if (currentLane < 2) {
currentLane++;
tween(car, {
x: lanePositions[currentLane]
}, {
duration: 200,
easing: tween.easeOut
});
}
}
};
// Game update logic
var distance = 0;
game.update = function () {
if (!gameStarted) {
return;
}
// Update car
car.update();
// Set road speed based on car speed
roadSpeed = car.speed;
// Move road lines
for (var i = roadLines.length - 1; i >= 0; i--) {
var line = roadLines[i];
line.y += roadSpeed;
// If line is off-screen, recycle it
if (line.y > 2732) {
line.y = -100;
}
// Create new lines as needed
if (roadLines.length < 15 && line.y > 0 && line.y < roadSpeed) {
createRoadLine(-100);
}
}
// Move game items
for (var j = gameItems.length - 1; j >= 0; j--) {
var item = gameItems[j];
item.y += roadSpeed;
// Update item animation if it has an update method
if (item.update) {
item.update();
}
// Remove items that are off-screen
if (item.y > 2732 + 100) {
if (item.parent) {
item.parent.removeChild(item);
}
gameItems.splice(j, 1);
}
}
// Check for collisions
checkCollisions();
// Update distance
if (roadSpeed > 0) {
distance += roadSpeed / 20;
distanceTxt.setText('DISTANCE: ' + Math.floor(distance) + 'm');
}
// Gradually decrease fuel
if (roadSpeed > 0) {
updateFuel(-0.05);
}
};
// Initialize the game
initGame(); ===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,424 @@
-/****
+/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+var storage = LK.import("@upit/storage.v1", {
+ highScore: 0
+});
+
+/****
+* Classes
+****/
+var Car = Container.expand(function () {
+ var self = Container.call(this);
+ var carGraphics = self.attachAsset('car', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.speed = 0;
+ self.maxSpeed = 15;
+ self.acceleration = 5;
+ self.deceleration = 0.2;
+ self.fuelConsumption = 0.3;
+ self.isMoving = false;
+ self.accelerate = function () {
+ self.speed = Math.min(self.maxSpeed, self.speed + self.acceleration);
+ self.isMoving = true;
+ // Slight bounce effect when accelerating
+ tween(carGraphics, {
+ scaleX: 0.9,
+ scaleY: 1.1
+ }, {
+ duration: 100,
+ onFinish: function onFinish() {
+ tween(carGraphics, {
+ scaleX: 1,
+ scaleY: 1
+ }, {
+ duration: 100
+ });
+ }
+ });
+ };
+ self.update = function () {
+ if (self.isMoving) {
+ self.speed = Math.max(0, self.speed - self.deceleration);
+ if (self.speed === 0) {
+ self.isMoving = false;
+ }
+ }
+ };
+ return self;
+});
+var GameItem = Container.expand(function (type) {
+ var self = Container.call(this);
+ self.type = type;
+ var assetId = type === 'obstacle' ? 'obstacle' : type === 'coin' ? 'coin' : 'fuelItem';
+ var itemGraphics = self.attachAsset(assetId, {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ // Add some animation based on item type
+ if (type === 'coin') {
+ // Make coins rotate
+ self.update = function () {
+ itemGraphics.rotation += 0.05;
+ };
+ } else if (type === 'fuelItem') {
+ // Make fuel items pulse
+ tween(itemGraphics, {
+ alpha: 0.7
+ }, {
+ duration: 800,
+ easing: tween.sinOut,
+ onFinish: function onFinish() {
+ tween(itemGraphics, {
+ alpha: 1
+ }, {
+ duration: 800,
+ easing: tween.sinIn,
+ onFinish: self.update
+ });
+ }
+ });
+ self.update = function () {
+ tween(itemGraphics, {
+ alpha: 0.7
+ }, {
+ duration: 800,
+ easing: tween.sinOut,
+ onFinish: function onFinish() {
+ tween(itemGraphics, {
+ alpha: 1
+ }, {
+ duration: 800,
+ easing: tween.sinIn,
+ onFinish: self.update
+ });
+ }
+ });
+ };
+ }
+ return self;
+});
+var RoadLine = Container.expand(function () {
+ var self = Container.call(this);
+ var lineGraphics = self.attachAsset('roadLine', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ return self;
+});
+
+/****
* Initialize Game
-****/
+****/
var game = new LK.Game({
- backgroundColor: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0x222222
+});
+
+/****
+* Game Code
+****/
+// Game variables
+var car;
+var roadLines = [];
+var gameItems = [];
+var score = 0;
+var fuel = 100;
+var roadSpeed = 0;
+var roadWidth = 600;
+var lanePositions = [2048 / 2 - roadWidth / 3, 2048 / 2, 2048 / 2 + roadWidth / 3];
+var currentLane = 1; // Middle lane
+var gameStarted = false;
+var roadContainer;
+var itemsContainer;
+var scoreTxt;
+var distanceTxt;
+var fuelBar;
+var fuelBarBg;
+var tapToStartTxt;
+// Initialize game elements
+function initGame() {
+ // Create road
+ roadContainer = new Container();
+ game.addChild(roadContainer);
+ var road = LK.getAsset('road', {
+ anchorX: 0.5,
+ anchorY: 0
+ });
+ road.x = 2048 / 2;
+ road.y = 0;
+ roadContainer.addChild(road);
+ // Create items container
+ itemsContainer = new Container();
+ game.addChild(itemsContainer);
+ // Create road lines
+ for (var i = 0; i < 10; i++) {
+ createRoadLine(-(i * 300));
+ }
+ // Create car
+ car = new Car();
+ car.x = lanePositions[currentLane];
+ car.y = 2732 - 300;
+ game.addChild(car);
+ // Create UI elements
+ createUI();
+ // Show tap to start
+ tapToStartTxt = new Text2('TAP TO START', {
+ size: 100,
+ fill: 0xFFFFFF
+ });
+ tapToStartTxt.anchor.set(0.5, 0.5);
+ tapToStartTxt.x = 2048 / 2;
+ tapToStartTxt.y = 2732 / 2;
+ game.addChild(tapToStartTxt);
+ // Animation for tap to start text
+ animateTapToStart();
+}
+function animateTapToStart() {
+ tween(tapToStartTxt, {
+ alpha: 0.5
+ }, {
+ duration: 800,
+ easing: tween.sinOut,
+ onFinish: function onFinish() {
+ tween(tapToStartTxt, {
+ alpha: 1
+ }, {
+ duration: 800,
+ easing: tween.sinIn,
+ onFinish: animateTapToStart
+ });
+ }
+ });
+}
+function createUI() {
+ // Score text
+ scoreTxt = new Text2('SCORE: 0', {
+ size: 70,
+ fill: 0xFFFFFF
+ });
+ scoreTxt.anchor.set(1, 0);
+ LK.gui.topRight.addChild(scoreTxt);
+ // Distance text
+ distanceTxt = new Text2('DISTANCE: 0m', {
+ size: 70,
+ fill: 0xFFFFFF
+ });
+ distanceTxt.anchor.set(0, 0);
+ distanceTxt.x = 120; // Leave space for the menu icon
+ LK.gui.topLeft.addChild(distanceTxt);
+ // Fuel bar background
+ fuelBarBg = LK.getAsset('fuelBarBg', {
+ anchorX: 0.5,
+ anchorY: 0
+ });
+ fuelBarBg.x = 2048 / 2;
+ fuelBarBg.y = 100;
+ LK.gui.top.addChild(fuelBarBg);
+ // Fuel bar
+ fuelBar = LK.getAsset('fuelBar', {
+ anchorX: 0,
+ anchorY: 0
+ });
+ fuelBar.x = fuelBarBg.x - fuelBarBg.width / 2;
+ fuelBar.y = fuelBarBg.y;
+ LK.gui.top.addChild(fuelBar);
+}
+function createRoadLine(yPos) {
+ var line = new RoadLine();
+ line.x = 2048 / 2;
+ line.y = yPos;
+ roadLines.push(line);
+ roadContainer.addChild(line);
+ return line;
+}
+function createGameItem(type, lane, yPos) {
+ var item = new GameItem(type);
+ item.x = lanePositions[lane];
+ item.y = yPos;
+ gameItems.push(item);
+ itemsContainer.addChild(item);
+ return item;
+}
+function startGame() {
+ if (gameStarted) {
+ return;
+ }
+ gameStarted = true;
+ score = 0;
+ fuel = 100;
+ roadSpeed = 0;
+ // Remove tap to start
+ if (tapToStartTxt && tapToStartTxt.parent) {
+ tapToStartTxt.parent.removeChild(tapToStartTxt);
+ tapToStartTxt = null;
+ }
+ // Start spawning items
+ spawnItems();
+ // Start background music
+ LK.playMusic('bgMusic');
+}
+function updateScore(value) {
+ score += value;
+ scoreTxt.setText('SCORE: ' + score);
+}
+function updateFuel(value) {
+ fuel = Math.max(0, Math.min(100, fuel + value));
+ // Update fuel bar width based on percentage
+ fuelBar.width = fuel / 100 * fuelBarBg.width;
+ // If no fuel left, game over
+ if (fuel <= 0) {
+ gameOver();
+ }
+}
+function gameOver() {
+ // Save high score if current score is higher
+ if (score > storage.highScore) {
+ storage.highScore = score;
+ }
+ // Show game over screen
+ LK.showGameOver();
+}
+function spawnItems() {
+ // Only spawn if game is active
+ if (!gameStarted) {
+ return;
+ }
+ // Choose random lane
+ var lane = Math.floor(Math.random() * 3);
+ // Choose random item type
+ var rand = Math.random();
+ var type;
+ if (rand < 0.6) {
+ type = 'obstacle';
+ } else if (rand < 0.9) {
+ type = 'coin';
+ } else {
+ type = 'fuelItem';
+ }
+ // Create item above the screen
+ createGameItem(type, lane, -100);
+ // Schedule next spawn
+ var nextSpawnTime = 1000 + Math.random() * 1000;
+ LK.setTimeout(spawnItems, nextSpawnTime);
+}
+function checkCollisions() {
+ // Check collisions with items
+ for (var i = gameItems.length - 1; i >= 0; i--) {
+ var item = gameItems[i];
+ if (car.intersects(item)) {
+ // Handle collision based on item type
+ if (item.type === 'obstacle') {
+ // Hit obstacle
+ LK.getSound('crash').play();
+ LK.effects.flashScreen(0xff0000, 500);
+ updateFuel(-20);
+ } else if (item.type === 'coin') {
+ // Collect coin
+ LK.getSound('coin').play();
+ updateScore(10);
+ } else if (item.type === 'fuelItem') {
+ // Collect fuel
+ LK.getSound('fuel').play();
+ updateFuel(20);
+ }
+ // Remove the item
+ if (item.parent) {
+ item.parent.removeChild(item);
+ }
+ gameItems.splice(i, 1);
+ }
+ }
+}
+// Input handlers
+game.down = function (x, y, obj) {
+ if (!gameStarted) {
+ startGame();
+ return;
+ }
+ // Play tap sound
+ LK.getSound('tap').play();
+ // Accelerate car
+ car.accelerate();
+ // Consume fuel when tapping
+ updateFuel(-car.fuelConsumption);
+ // Handle lane change
+ if (x < 2048 / 3) {
+ // Tap on left side - move left if possible
+ if (currentLane > 0) {
+ currentLane--;
+ tween(car, {
+ x: lanePositions[currentLane]
+ }, {
+ duration: 200,
+ easing: tween.easeOut
+ });
+ }
+ } else if (x > 2048 * 2 / 3) {
+ // Tap on right side - move right if possible
+ if (currentLane < 2) {
+ currentLane++;
+ tween(car, {
+ x: lanePositions[currentLane]
+ }, {
+ duration: 200,
+ easing: tween.easeOut
+ });
+ }
+ }
+};
+// Game update logic
+var distance = 0;
+game.update = function () {
+ if (!gameStarted) {
+ return;
+ }
+ // Update car
+ car.update();
+ // Set road speed based on car speed
+ roadSpeed = car.speed;
+ // Move road lines
+ for (var i = roadLines.length - 1; i >= 0; i--) {
+ var line = roadLines[i];
+ line.y += roadSpeed;
+ // If line is off-screen, recycle it
+ if (line.y > 2732) {
+ line.y = -100;
+ }
+ // Create new lines as needed
+ if (roadLines.length < 15 && line.y > 0 && line.y < roadSpeed) {
+ createRoadLine(-100);
+ }
+ }
+ // Move game items
+ for (var j = gameItems.length - 1; j >= 0; j--) {
+ var item = gameItems[j];
+ item.y += roadSpeed;
+ // Update item animation if it has an update method
+ if (item.update) {
+ item.update();
+ }
+ // Remove items that are off-screen
+ if (item.y > 2732 + 100) {
+ if (item.parent) {
+ item.parent.removeChild(item);
+ }
+ gameItems.splice(j, 1);
+ }
+ }
+ // Check for collisions
+ checkCollisions();
+ // Update distance
+ if (roadSpeed > 0) {
+ distance += roadSpeed / 20;
+ distanceTxt.setText('DISTANCE: ' + Math.floor(distance) + 'm');
+ }
+ // Gradually decrease fuel
+ if (roadSpeed > 0) {
+ updateFuel(-0.05);
+ }
+};
+// Initialize the game
+initGame();
\ No newline at end of file