Upit | Learn about creating the game Tap & Drive with gen AI

Play

2mo

Tap and Drive: Addictive Racing Fun on the Go! Get behind the wheel in Tap and Drive, the fast-paced arcade car game that puts your reflexes to the test! With simple one-touch controls, all you need to do is tap to switch lanes, dodge traffic, and collect coins as you speed through endless roads. Watch out for obstacles, changing lanes at just the right moment to keep your ride going! Features: Easy to learn, hard to master gameplay Colorful graphics and smooth animations Multiple cars to unlock and upgrade Leaderboards to compete with friends Endless fun with increasing difficulty Perfect for quick sessions or long commutes, Tap and Drive delivers high-octane excitement anytime, anywhere. Can you handle the speed?

#TapRacer

#OneTouch

#CasualDriving

#CarGame

#RoadRush

Creation History

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() {
	if (!tapToStartTxt) {
		return;
	}
	tween(tapToStartTxt, {
		alpha: 0.5
	}, {
		duration: 800,
		easing: tween.sinOut,
		onFinish: function onFinish() {
			if (!tapToStartTxt) {
				return;
			}
			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
@@ -176,14 +176,20 @@
 	// Animation for tap to start text
 	animateTapToStart();
 }
 function animateTapToStart() {
+	if (!tapToStartTxt) {
+		return;
+	}
 	tween(tapToStartTxt, {
 		alpha: 0.5
 	}, {
 		duration: 800,
 		easing: tween.sinOut,
 		onFinish: function onFinish() {
+			if (!tapToStartTxt) {
+				return;
+			}
 			tween(tapToStartTxt, {
 				alpha: 1
 			}, {
 				duration: 800,

Showing 1 to 4 of 4

Images

Car.
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows

Used plugins

@upit/tween@upit/storage