Play
:quality(85)/https://cdn.frvr.ai/68546cd6feb31f989bceab7b.png)
:quality(85)/https://cdn.frvr.ai/68546cd2feb31f989bceab79.png)
#DoodleRoad
#DrawingGame
#PuzzleGame
#CasualGaming
#CreativeChallenge
Creation History
User prompt
Start tuşunun altına, Refresh butonu ekle. Refresh basınca çizgi silinsin ve araç başlangıç yerine geçsin. Yani bulunduğumuz bölüm sıfırlansın.
User prompt
Aracın arkasından ekzos dumanı gibi hafif duman efeği çıksın hareket halinde. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Çizgiyi çizdikten sonra start tuşuna basalım.
User prompt
Level sol tarafına start tuşu ekle ve Start tuşuna basmadan araba hareket etmesin.
User prompt
Çizgiyi çekmeye başlamadan hareket etmesin araba.
Code edit (1 edits merged)
Please save this source code
User prompt
Doodle Road
Initial prompt
Doodle Road, yaratıcılığı problem çözme ile birleştiren yaratıcı ve büyüleyici bir 2D gündelik oyundur. Bu eğlenceli tarayıcı oyununda birincil hedefiniz, bir arabayı başlangıç noktasından bitiş çizgisine kadar başarıyla yönlendirecek bir yol çizmektir. Keşfedilecek çok sayıda seviye ile her biri yaratıcılığınızı ve stratejik düşünmenizi test eden yeni zorluklar ve heyecan verici engeller getiriyor. Zafere giden yolu çizin ve yaratıcılığınızın sizi ne kadar uzağa götürebileceğini görün! Doodle Road Nasıl Oynanır? Doodle Road'a arabadan hedefe doğru düz bir çizgi çizme alıştırması yaparak başlıyorsunuz. Kulağa basit geliyor, değil mi? Çizginizin gerçekten ne kadar düz olduğunu görene kadar bekleyin! Asıl zorluk, arabanızın bu yoldan geçmesinin ne kadar kolay olduğudur. Sıradaki zorluk - hedefe doğru bir çizgi çizin, ancak şimdi yolunuzda bir duvar var. Unutmayın, arabanız uçamaz! Bu yüzden, yolunuzu nasıl çizeceğinizi düşünün - duvarın üzerinden geçmek zorunda değilsiniz; altından da geçebilirsiniz! İlerledikçe düz bir çizgi çizmenin göründüğünden daha zor olduğunu göreceksiniz. Çizgiye arabanızın arkasından başlamazsanız, çizgi unutulup gidecektir. Bir L şeklini nasıl aşarsınız? Ya da yerdeki büyük bir boşluğu? Ve zorluklar gelmeye devam ediyor. Seviye 5'te motorunuz kapanır, bu yüzden karşıya geçmek için tepeleri ve momentumu nasıl kullanacağınızı bulmak için fizik beyninize ihtiyacınız olacak. Bazı seviyelerde sizi hedefinize doğru fırlatacak trambolin benzeri yaylar var. Zorluklar her seferinde değişerek sizi diken üstünde tutar. Kemerlerinizi bağlayın çünkü ne kadar iyi çizdiğinize bağlı olarak inişli çıkışlı bir yolculuk olacak!
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");
/****
* Classes
****/
var Car = Container.expand(function () {
var self = Container.call(this);
var carBody = self.attachAsset('car', {
anchorX: 0.5,
anchorY: 0.5
});
var wheelLeft = self.attachAsset('wheel', {
anchorX: 0.5,
anchorY: 0.5,
x: -25,
y: 20
});
var wheelRight = self.attachAsset('wheel', {
anchorX: 0.5,
anchorY: 0.5,
x: 25,
y: 20
});
self.velocityX = 0;
self.velocityY = 0;
self.speed = 2;
self.gravity = 0.3;
self.onGround = false;
self.engineWorking = true;
self.update = function () {
// Only update physics if game has started
if (!gameStarted) return;
if (!self.engineWorking) {
self.velocityX *= 0.98;
}
self.velocityY += self.gravity;
self.x += self.velocityX;
self.y += self.velocityY;
wheelLeft.rotation += self.velocityX * 0.1;
wheelRight.rotation += self.velocityX * 0.1;
};
self.setVelocity = function (vx, vy) {
self.velocityX = vx;
self.velocityY = vy;
};
return self;
});
var DrawnLine = Container.expand(function () {
var self = Container.call(this);
self.points = [];
self.segments = [];
self.addPoint = function (x, y) {
self.points.push({
x: x,
y: y
});
if (self.points.length > 1) {
var lastPoint = self.points[self.points.length - 2];
var currentPoint = self.points[self.points.length - 1];
var dx = currentPoint.x - lastPoint.x;
var dy = currentPoint.y - lastPoint.y;
var distance = Math.sqrt(dx * dx + dy * dy);
var angle = Math.atan2(dy, dx);
var segment = self.attachAsset('wall', {
anchorX: 0,
anchorY: 0.5,
x: lastPoint.x,
y: lastPoint.y,
scaleX: distance / 200,
scaleY: 0.1,
rotation: angle,
tint: 0x0000FF
});
self.segments.push(segment);
}
};
self.getSegments = function () {
var segmentData = [];
for (var i = 0; i < self.points.length - 1; i++) {
segmentData.push({
start: self.points[i],
end: self.points[i + 1]
});
}
return segmentData;
};
return self;
});
var SmokeParticle = Container.expand(function () {
var self = Container.call(this);
var smokeGraphics = self.attachAsset('wheel', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x999999,
alpha: 0.6
});
self.init = function (x, y) {
self.x = x;
self.y = y;
self.scale.set(0.3);
// Animate the smoke particle
tween(self, {
y: y - 50,
alpha: 0
}, {
duration: 800,
easing: tween.easeOut
});
tween(self.scale, {
x: 1.2,
y: 1.2
}, {
duration: 800,
easing: tween.easeOut
});
};
return self;
});
var Trampoline = Container.expand(function () {
var self = Container.call(this);
var trampolineGraphics = self.attachAsset('trampoline', {
anchorX: 0.5,
anchorY: 0.5
});
self.bounce = function () {
tween(trampolineGraphics, {
scaleY: 0.7
}, {
duration: 100,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(trampolineGraphics, {
scaleY: 1
}, {
duration: 200,
easing: tween.bounceOut
});
}
});
};
return self;
});
var Wall = Container.expand(function () {
var self = Container.call(this);
var wallGraphics = self.attachAsset('wall', {
anchorX: 0.5,
anchorY: 0.5
});
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xE8E8E8
});
/****
* Game Code
****/
var currentLevel = storage.currentLevel || 1;
var maxLevel = 5;
var car = null;
var walls = [];
var trampolines = [];
var drawnLine = null;
var isDrawing = false;
var levelComplete = false;
var carCanMove = false;
var gameStarted = false;
var startButton = null;
var startButtonText = null;
var refreshButton = null;
var refreshButtonText = null;
var smokeParticles = [];
var smokeTimer = 0;
var startPos = {
x: 200,
y: 1000
};
var finishPos = {
x: 1800,
y: 1000
};
var levelText = new Text2('Level ' + currentLevel, {
size: 80,
fill: 0x333333
});
levelText.anchor.set(0.5, 0);
LK.gui.top.addChild(levelText);
var instructionText = new Text2('Draw a path from behind the car!', {
size: 50,
fill: 0x666666
});
instructionText.anchor.set(0.5, 0);
instructionText.y = 100;
LK.gui.top.addChild(instructionText);
function setupLevel(level) {
// Clear existing objects
if (car) car.destroy();
for (var i = 0; i < walls.length; i++) {
walls[i].destroy();
}
for (var i = 0; i < trampolines.length; i++) {
trampolines[i].destroy();
}
if (drawnLine) drawnLine.destroy();
// Clear smoke particles
for (var i = 0; i < smokeParticles.length; i++) {
smokeParticles[i].destroy();
}
smokeParticles = [];
walls = [];
trampolines = [];
drawnLine = null;
isDrawing = false;
levelComplete = false;
carCanMove = false;
gameStarted = false;
// Create ground
var ground = game.addChild(LK.getAsset('ground', {
anchorX: 0.5,
anchorY: 0,
x: 1024,
y: 2532
}));
// Create start and finish flags
var startFlag = game.addChild(LK.getAsset('startFlag', {
anchorX: 0.5,
anchorY: 1,
x: startPos.x,
y: startPos.y + 50
}));
var finishFlag = game.addChild(LK.getAsset('finishFlag', {
anchorX: 0.5,
anchorY: 1,
x: finishPos.x,
y: finishPos.y + 50
}));
// Setup level-specific elements
if (level === 1) {
// Simple level - just draw from start to finish
instructionText.setText('Draw a path, then press START!');
} else if (level === 2) {
// Wall in the middle
var wall = new Wall();
wall.x = 1024;
wall.y = 1000;
walls.push(wall);
game.addChild(wall);
instructionText.setText('Draw around the wall!');
} else if (level === 3) {
// L-shaped obstacle
var wall1 = new Wall();
wall1.x = 1024;
wall1.y = 1000;
wall1.scaleX = 2;
walls.push(wall1);
game.addChild(wall1);
var wall2 = new Wall();
wall2.x = 1224;
wall2.y = 900;
wall2.rotation = Math.PI / 2;
walls.push(wall2);
game.addChild(wall2);
instructionText.setText('Navigate the L-shape!');
} else if (level === 4) {
// Gap in the ground
finishPos.y = 1800;
finishFlag.y = finishPos.y + 50;
instructionText.setText('Bridge the gap!');
} else if (level === 5) {
// Engine failure with trampoline
var trampoline = new Trampoline();
trampoline.x = 1024;
trampoline.y = 1200;
trampolines.push(trampoline);
game.addChild(trampoline);
instructionText.setText('Engine failed! Use the trampoline!');
}
// Create car
car = new Car();
car.x = startPos.x;
car.y = startPos.y;
if (level === 5) {
car.engineWorking = false;
car.setVelocity(5, 0);
}
game.addChild(car);
levelText.setText('Level ' + level);
// Create start button
if (startButton) startButton.destroy();
if (startButtonText) startButtonText.destroy();
startButton = game.addChild(LK.getAsset('startButton', {
anchorX: 0.5,
anchorY: 0.5,
x: 150,
y: 1366
}));
startButtonText = new Text2('START', {
size: 40,
fill: 0xffffff
});
startButtonText.anchor.set(0.5, 0.5);
startButtonText.x = 150;
startButtonText.y = 1366;
game.addChild(startButtonText);
// Create refresh button
if (refreshButton) refreshButton.destroy();
if (refreshButtonText) refreshButtonText.destroy();
refreshButton = game.addChild(LK.getAsset('refreshButton', {
anchorX: 0.5,
anchorY: 0.5,
x: 150,
y: 1450
}));
refreshButtonText = new Text2('REFRESH', {
size: 35,
fill: 0xffffff
});
refreshButtonText.anchor.set(0.5, 0.5);
refreshButtonText.x = 150;
refreshButtonText.y = 1450;
game.addChild(refreshButtonText);
}
function checkLineCollision(line1Start, line1End, line2Start, line2End) {
var x1 = line1Start.x;
var y1 = line1Start.y;
var x2 = line1End.x;
var y2 = line1End.y;
var x3 = line2Start.x;
var y3 = line2Start.y;
var x4 = line2End.x;
var y4 = line2End.y;
var denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
if (Math.abs(denom) < 0.0001) return null;
var t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
var u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;
if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
return {
x: x1 + t * (x2 - x1),
y: y1 + t * (y2 - y1)
};
}
return null;
}
function handleCarPhysics() {
if (!car || !drawnLine || levelComplete || !carCanMove || !gameStarted) return;
var carBottom = {
x: car.x,
y: car.y + 20
};
var segments = drawnLine.getSegments();
var onLine = false;
for (var i = 0; i < segments.length; i++) {
var segment = segments[i];
var carRay = {
start: {
x: car.x,
y: car.y
},
end: {
x: car.x,
y: car.y + 30
}
};
var collision = checkLineCollision(carRay.start, carRay.end, segment.start, segment.end);
if (collision) {
onLine = true;
car.y = collision.y - 20;
car.velocityY = 0;
var dx = segment.end.x - segment.start.x;
var dy = segment.end.y - segment.start.y;
var angle = Math.atan2(dy, dx);
if (car.engineWorking) {
car.velocityX = Math.cos(angle) * car.speed;
car.velocityY = Math.sin(angle) * car.speed;
}
car.rotation = angle;
break;
}
}
car.onGround = onLine;
// Check collision with trampolines
for (var i = 0; i < trampolines.length; i++) {
if (car.intersects(trampolines[i])) {
car.velocityY = -15;
trampolines[i].bounce();
LK.getSound('bounce').play();
}
}
// Check if car reached finish
var distToFinish = Math.sqrt(Math.pow(car.x - finishPos.x, 2) + Math.pow(car.y - finishPos.y, 2));
if (distToFinish < 100) {
levelComplete = true;
LK.getSound('success').play();
currentLevel++;
storage.currentLevel = currentLevel;
if (currentLevel > maxLevel) {
LK.setScore(100);
LK.showYouWin();
} else {
LK.setTimeout(function () {
setupLevel(currentLevel);
}, 1500);
}
}
// Check if car fell off screen
if (car.y > 2732) {
setupLevel(currentLevel);
}
}
game.down = function (x, y, obj) {
if (levelComplete) return;
// Check if start button clicked
if (startButton && Math.abs(x - startButton.x) < 75 && Math.abs(y - startButton.y) < 30) {
// Only start if we have drawn a line
if (drawnLine && !gameStarted) {
gameStarted = true;
carCanMove = true;
startButton.tint = 0x888888;
if (car.engineWorking) {
LK.getSound('carEngine').play();
}
}
return;
}
// Check if refresh button clicked
if (refreshButton && Math.abs(x - refreshButton.x) < 75 && Math.abs(y - refreshButton.y) < 30) {
// Reset current level
setupLevel(currentLevel);
return;
}
// Check if starting from behind the car
if (x < car.x - 50 && !gameStarted) {
isDrawing = true;
drawnLine = new DrawnLine();
game.addChild(drawnLine);
drawnLine.addPoint(x, y);
}
};
game.move = function (x, y, obj) {
if (isDrawing && drawnLine) {
drawnLine.addPoint(x, y);
}
};
game.up = function (x, y, obj) {
if (isDrawing && drawnLine) {
// Don't automatically allow car to move - wait for start button
}
isDrawing = false;
};
game.update = function () {
handleCarPhysics();
// Create smoke particles when car is moving
if (car && gameStarted && carCanMove && (Math.abs(car.velocityX) > 0.5 || Math.abs(car.velocityY) > 0.5)) {
smokeTimer++;
if (smokeTimer % 4 === 0) {
// Create smoke every 4 frames
var smoke = new SmokeParticle();
// Position smoke behind the car based on its rotation
var offsetX = -Math.cos(car.rotation) * 40;
var offsetY = -Math.sin(car.rotation) * 40;
smoke.init(car.x + offsetX, car.y + offsetY);
game.addChild(smoke);
smokeParticles.push(smoke);
}
}
// Clean up old smoke particles
for (var i = smokeParticles.length - 1; i >= 0; i--) {
if (smokeParticles[i].alpha <= 0) {
smokeParticles[i].destroy();
smokeParticles.splice(i, 1);
}
}
};
// Initialize first level
setupLevel(currentLevel); ===================================================================
--- original.js
+++ change.js
@@ -174,8 +174,10 @@
var carCanMove = false;
var gameStarted = false;
var startButton = null;
var startButtonText = null;
+var refreshButton = null;
+var refreshButtonText = null;
var smokeParticles = [];
var smokeTimer = 0;
var startPos = {
x: 200,
@@ -307,8 +309,25 @@
startButtonText.anchor.set(0.5, 0.5);
startButtonText.x = 150;
startButtonText.y = 1366;
game.addChild(startButtonText);
+ // Create refresh button
+ if (refreshButton) refreshButton.destroy();
+ if (refreshButtonText) refreshButtonText.destroy();
+ refreshButton = game.addChild(LK.getAsset('refreshButton', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 150,
+ y: 1450
+ }));
+ refreshButtonText = new Text2('REFRESH', {
+ size: 35,
+ fill: 0xffffff
+ });
+ refreshButtonText.anchor.set(0.5, 0.5);
+ refreshButtonText.x = 150;
+ refreshButtonText.y = 1450;
+ game.addChild(refreshButtonText);
}
function checkLineCollision(line1Start, line1End, line2Start, line2End) {
var x1 = line1Start.x;
var y1 = line1Start.y;
@@ -410,8 +429,14 @@
}
}
return;
}
+ // Check if refresh button clicked
+ if (refreshButton && Math.abs(x - refreshButton.x) < 75 && Math.abs(y - refreshButton.y) < 30) {
+ // Reset current level
+ setupLevel(currentLevel);
+ return;
+ }
// Check if starting from behind the car
if (x < car.x - 50 && !gameStarted) {
isDrawing = true;
drawnLine = new DrawnLine();
Images
:quality(85)/https://cdn.frvr.ai/68558f22c167d32ab93738c7.png%3F3)
Bitiş bayrağı, yazısız, 3d, gerçekçi. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/68558fd9c167d32ab93738dc.png%3F3)
araba gaz pedalı, yazısız, 3d, gerçekçi. In-Game asset. 2d. High contrast. No shadows. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/68559102c167d32ab93738f4.png%3F3)
araba, yazısız, 3d, gerçekçi, yandan görünüm, In-Game asset. 2d. High contrast. No shadows. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/685592c9c167d32ab93738fe.png%3F3)
ateş, 3d, yazısız. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/68559372c167d32ab9373908.png%3F3)
water, 3d, yazısız. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/685593b6c167d32ab9373915.png%3F3)
wall, 3d, yazısız. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/685593ffc167d32ab9373920.png%3F3)
trampoline, 3d, yazısız. In-Game asset. 2d. High contrast. No shadows
Used plugins
@upit/tween@upit/storage
