Play
:quality(85)/https://cdn.frvr.ai/6862aa9b6327ac2b91b3e36f.png)
:quality(85)/https://cdn.frvr.ai/6862aa946327ac2b91b3e36d.png)
#ParametricDesign
#SmartCity
#UrbanPlanning
#AIArchitecture
#SustainableDesign
Creation History
User prompt
yanlış yaptın diğerlerin hedef barı olmasın sadece aşağıdakilerin olsun hedefe yaklaştıkça bar rengi kırmızıdan yeşile dönsün
User prompt
6 tane hedefin hepsinin barı olsun yanında hedef tamamlandıkça kırmı renkten yeşilş renge dönsün ton olarak
User prompt
tamam eklemişsin ama bunu hep göster ve barları düzelt yazıların üstüne geliyo
User prompt
bunları neden hedef barına eklemiyorsun
User prompt
traffic yazıyor ama hedef barında değiştir
User prompt
Traffic Efficiency yaz
User prompt
traffic verimiliği yaz
User prompt
bu kazanma koşullarını bar olarak ekle
User prompt
bu söylediklerini eklermisin yapılması gerek çubuklara alt tarfta yazdığın yere
User prompt
ızgara daha büyük olsun
User prompt
traffic yazısı ve sustainability yazıları bina eklediğimiz zman o yazı renkleri soluyor yazılar okunsun ve binanın üsütne tıkladığımız zaman bilgi veriyor ama çok küçükler yazı boyutu büyük olsun
User prompt
bu oyun tamam sadece yazılar ve oyun daha büyük sayfada olsun menüdeki yazılar üst üste gelmesin kullanıcı yazıları okuyabilsin
User prompt
daha detalı ve karışık sitemli olsun gerçek bir şehir parametri oyun tasrımı gibi
User prompt
evet bu oyun güzel ama daha interaktif ve bilgi verici ve daha fazla grid olsun
Code edit (1 edits merged)
Please save this source code
User prompt
AI City Architect: Parametric Paradise
Initial prompt
urban buildings with parametric and design and green traffic in the city and turn them into a parametric architecture artificial intelligence game
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Building = Container.expand(function () {
var self = Container.call(this);
var buildingGraphics = self.attachAsset('buildingBase', {
anchorX: 0.5,
anchorY: 1.0
});
var greenSpace = self.attachAsset('greenSpace', {
anchorX: 0.5,
anchorY: 1.0,
alpha: 0.7
});
greenSpace.y = -10;
self.buildingHeight = 1.0;
self.buildingWidth = 1.0;
self.density = 0.5;
self.greenCoverage = 0.3;
self.trafficScore = 50;
self.sustainabilityScore = 50;
self.updateBuilding = function () {
buildingGraphics.scaleX = self.buildingWidth;
buildingGraphics.scaleY = self.buildingHeight;
var densityColor = Math.floor(255 * (1 - self.density));
buildingGraphics.tint = densityColor << 16 | densityColor << 8 | 255;
greenSpace.scaleX = self.greenCoverage;
greenSpace.scaleY = self.greenCoverage;
greenSpace.alpha = self.greenCoverage * 0.8;
self.calculateScores();
};
self.calculateScores = function () {
self.trafficScore = Math.max(0, Math.min(100, 60 - self.density * 40 + self.greenCoverage * 30));
self.sustainabilityScore = Math.max(0, Math.min(100, self.greenCoverage * 50 + 25 * (2 - self.buildingHeight) + 25 * (1 - self.density)));
};
self.down = function (x, y, obj) {
LK.getSound('buildingPlace').play();
tween(self, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 200,
easing: tween.easeOut
});
tween(self, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200,
easing: tween.easeIn
});
};
return self;
});
var GridCell = Container.expand(function () {
var self = Container.call(this);
var cellGraphics = self.attachAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.3
});
self.occupied = false;
self.building = null;
self.down = function (x, y, obj) {
if (!self.occupied && selectedBuildingType) {
self.building = new Building();
self.building.x = 0;
self.building.y = 0;
self.addChild(self.building);
self.occupied = true;
buildings.push(self.building);
updateCityScores();
} else if (self.occupied && self.building) {
// Show building info when tapped
var globalPos = self.toGlobal({
x: 0,
y: 0
});
infoDisplay.x = globalPos.x + 60;
infoDisplay.y = globalPos.y - 60;
infoDisplay.showInfo(self.building);
}
};
return self;
});
var InfoDisplay = Container.expand(function () {
var self = Container.call(this);
var background = self.attachAsset('slider', {
anchorX: 0,
anchorY: 0,
alpha: 0.9
});
background.width = 250;
background.height = 120;
background.tint = 0x34495e;
var infoText = new Text2('', {
size: 20,
fill: 0xFFFFFF
});
infoText.anchor.set(0, 0);
infoText.x = 10;
infoText.y = 10;
self.addChild(infoText);
self.showInfo = function (building) {
if (building) {
var info = 'Height: ' + building.buildingHeight.toFixed(1) + '\n';
info += 'Width: ' + building.buildingWidth.toFixed(1) + '\n';
info += 'Density: ' + (building.density * 100).toFixed(0) + '%\n';
info += 'Green: ' + (building.greenCoverage * 100).toFixed(0) + '%\n';
info += 'Traffic: ' + building.trafficScore.toFixed(0) + '\n';
info += 'Eco: ' + building.sustainabilityScore.toFixed(0);
infoText.setText(info);
self.visible = true;
} else {
self.visible = false;
}
};
self.visible = false;
return self;
});
var ParameterSlider = Container.expand(function () {
var self = Container.call(this);
var sliderTrack = self.attachAsset('slider', {
anchorX: 0,
anchorY: 0.5
});
var handle = self.attachAsset('sliderHandle', {
anchorX: 0.5,
anchorY: 0.5
});
self.minValue = 0;
self.maxValue = 1;
self.currentValue = 0.5;
self.onValueChange = null;
self.isDragging = false;
self.updateHandle = function () {
var normalizedValue = (self.currentValue - self.minValue) / (self.maxValue - self.minValue);
handle.x = normalizedValue * sliderTrack.width;
};
self.setValue = function (value) {
self.currentValue = Math.max(self.minValue, Math.min(self.maxValue, value));
self.updateHandle();
if (self.onValueChange) {
self.onValueChange(self.currentValue);
}
};
self.down = function (x, y, obj) {
self.isDragging = true;
var localX = x;
var normalizedValue = Math.max(0, Math.min(1, localX / sliderTrack.width));
var newValue = self.minValue + normalizedValue * (self.maxValue - self.minValue);
self.setValue(newValue);
LK.getSound('parameterChange').play();
};
self.updateHandle();
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x2c3e50
});
/****
* Game Code
****/
var buildings = [];
var gridCells = [];
var selectedBuildingType = true;
var totalTrafficScore = 0;
var totalSustainabilityScore = 0;
var targetTrafficScore = 70;
var targetSustainabilityScore = 75;
// Create grid - increased size for more interactive gameplay
var gridSize = 8;
var cellSize = 100;
var gridStartX = 2048 / 2 - gridSize * cellSize / 2;
var gridStartY = 700;
for (var row = 0; row < gridSize; row++) {
for (var col = 0; col < gridSize; col++) {
var cell = new GridCell();
cell.x = gridStartX + col * cellSize;
cell.y = gridStartY + row * cellSize;
gridCells.push(cell);
game.addChild(cell);
}
}
// UI Elements
var titleText = new Text2('AI City Architect', {
size: 80,
fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0);
titleText.x = 2048 / 2;
titleText.y = 100;
game.addChild(titleText);
var instructionText = new Text2('Tap grid cells to place buildings', {
size: 40,
fill: 0xECF0F1
});
instructionText.anchor.set(0.5, 0);
instructionText.x = 2048 / 2;
instructionText.y = 200;
game.addChild(instructionText);
// Parameter Sliders
var heightSlider = new ParameterSlider();
heightSlider.x = 200;
heightSlider.y = 400;
heightSlider.minValue = 0.5;
heightSlider.maxValue = 2.0;
heightSlider.setValue(1.0);
heightSlider.onValueChange = function (value) {
updateAllBuildings('buildingHeight', value);
};
game.addChild(heightSlider);
var heightLabel = new Text2('Height', {
size: 30,
fill: 0xFFFFFF
});
heightLabel.anchor.set(0, 0.5);
heightLabel.x = 200;
heightLabel.y = 350;
game.addChild(heightLabel);
var widthSlider = new ParameterSlider();
widthSlider.x = 200;
widthSlider.y = 520;
widthSlider.minValue = 0.5;
widthSlider.maxValue = 2.0;
widthSlider.setValue(1.0);
widthSlider.onValueChange = function (value) {
updateAllBuildings('buildingWidth', value);
};
game.addChild(widthSlider);
var widthLabel = new Text2('Width', {
size: 30,
fill: 0xFFFFFF
});
widthLabel.anchor.set(0, 0.5);
widthLabel.x = 200;
widthLabel.y = 470;
game.addChild(widthLabel);
var densitySlider = new ParameterSlider();
densitySlider.x = 200;
densitySlider.y = 640;
densitySlider.minValue = 0.1;
densitySlider.maxValue = 1.0;
densitySlider.setValue(0.5);
densitySlider.onValueChange = function (value) {
updateAllBuildings('density', value);
};
game.addChild(densitySlider);
var densityLabel = new Text2('Density', {
size: 30,
fill: 0xFFFFFF
});
densityLabel.anchor.set(0, 0.5);
densityLabel.x = 200;
densityLabel.y = 590;
game.addChild(densityLabel);
var greenSlider = new ParameterSlider();
greenSlider.x = 1500;
greenSlider.y = 400;
greenSlider.minValue = 0.0;
greenSlider.maxValue = 1.0;
greenSlider.setValue(0.3);
greenSlider.onValueChange = function (value) {
updateAllBuildings('greenCoverage', value);
};
game.addChild(greenSlider);
var greenLabel = new Text2('Green Coverage', {
size: 30,
fill: 0xFFFFFF
});
greenLabel.anchor.set(0, 0.5);
greenLabel.x = 1500;
greenLabel.y = 350;
game.addChild(greenLabel);
// Score Display
var trafficScoreText = new Text2('Traffic: 0/70', {
size: 40,
fill: 0xF39C12
});
trafficScoreText.anchor.set(0, 0);
trafficScoreText.x = 1500;
trafficScoreText.y = 520;
game.addChild(trafficScoreText);
var sustainabilityScoreText = new Text2('Sustainability: 0/75', {
size: 40,
fill: 0x2ECC71
});
sustainabilityScoreText.anchor.set(0, 0);
sustainabilityScoreText.x = 1500;
sustainabilityScoreText.y = 580;
game.addChild(sustainabilityScoreText);
var goalText = new Text2('Goal: Reach target scores!', {
size: 35,
fill: 0xE74C3C
});
goalText.anchor.set(0.5, 0);
goalText.x = 2048 / 2;
goalText.y = 2300;
game.addChild(goalText);
// Add interactive information display
var infoDisplay = new InfoDisplay();
game.addChild(infoDisplay);
// Add building counter
var buildingCountText = new Text2('Buildings: 0/' + gridSize * gridSize, {
size: 30,
fill: 0xFFFFFF
});
buildingCountText.anchor.set(0, 0);
buildingCountText.x = 200;
buildingCountText.y = 700;
game.addChild(buildingCountText);
// Add progress indicators
var trafficProgress = LK.getAsset('trafficLine', {
anchorX: 0,
anchorY: 0.5
});
trafficProgress.x = 1500;
trafficProgress.y = 470;
trafficProgress.scaleX = 0;
trafficProgress.tint = 0xF39C12;
game.addChild(trafficProgress);
var sustainabilityProgress = LK.getAsset('trafficLine', {
anchorX: 0,
anchorY: 0.5
});
sustainabilityProgress.x = 1500;
sustainabilityProgress.y = 530;
sustainabilityProgress.scaleX = 0;
sustainabilityProgress.tint = 0x2ECC71;
game.addChild(sustainabilityProgress);
// Add informative tips
var tipsText = new Text2('Tip: Tap buildings for details, balance density with green space!', {
size: 25,
fill: 0x95A5A6
});
tipsText.anchor.set(0.5, 0);
tipsText.x = 2048 / 2;
tipsText.y = 250;
game.addChild(tipsText);
function updateAllBuildings(property, value) {
for (var i = 0; i < buildings.length; i++) {
buildings[i][property] = value;
buildings[i].updateBuilding();
}
updateCityScores();
}
function updateCityScores() {
if (buildings.length === 0) {
totalTrafficScore = 0;
totalSustainabilityScore = 0;
} else {
var trafficSum = 0;
var sustainabilitySum = 0;
for (var i = 0; i < buildings.length; i++) {
trafficSum += buildings[i].trafficScore;
sustainabilitySum += buildings[i].sustainabilityScore;
}
totalTrafficScore = Math.round(trafficSum / buildings.length);
totalSustainabilityScore = Math.round(sustainabilitySum / buildings.length);
}
// Update building counter
buildingCountText.setText('Buildings: ' + buildings.length + '/' + gridSize * gridSize);
// Update score displays with colors
var trafficColor = totalTrafficScore >= targetTrafficScore ? 0x2ECC71 : 0xF39C12;
var sustainabilityColor = totalSustainabilityScore >= targetSustainabilityScore ? 0x2ECC71 : 0xE74C3C;
trafficScoreText.setText('Traffic: ' + totalTrafficScore + '/' + targetTrafficScore);
trafficScoreText.tint = trafficColor;
sustainabilityScoreText.setText('Sustainability: ' + totalSustainabilityScore + '/' + targetSustainabilityScore);
sustainabilityScoreText.tint = sustainabilityColor;
// Update progress bars
trafficProgress.scaleX = Math.min(1, totalTrafficScore / targetTrafficScore);
sustainabilityProgress.scaleX = Math.min(1, totalSustainabilityScore / targetSustainabilityScore);
if (totalTrafficScore >= targetTrafficScore && totalSustainabilityScore >= targetSustainabilityScore) {
LK.setScore(totalTrafficScore + totalSustainabilityScore);
if (buildings.length >= 12) {
goalText.setText('Success! Perfect parametric city!');
goalText.tint = 0x2ecc71;
LK.showYouWin();
}
}
}
var draggedSlider = null;
game.move = function (x, y, obj) {
if (draggedSlider && draggedSlider.isDragging) {
var localPos = draggedSlider.toLocal({
x: x,
y: y
});
var normalizedValue = Math.max(0, Math.min(1, localPos.x / 300));
var newValue = draggedSlider.minValue + normalizedValue * (draggedSlider.maxValue - draggedSlider.minValue);
draggedSlider.setValue(newValue);
}
};
game.down = function (x, y, obj) {
draggedSlider = null;
// Hide info display when clicking elsewhere
var clickedOnGridCell = false;
for (var i = 0; i < gridCells.length; i++) {
if (obj === gridCells[i] || obj.parent && obj.parent === gridCells[i]) {
clickedOnGridCell = true;
break;
}
}
if (!clickedOnGridCell) {
infoDisplay.showInfo(null);
}
if (obj === heightSlider || obj.parent === heightSlider) {
draggedSlider = heightSlider;
draggedSlider.isDragging = true;
} else if (obj === widthSlider || obj.parent === widthSlider) {
draggedSlider = widthSlider;
draggedSlider.isDragging = true;
} else if (obj === densitySlider || obj.parent === densitySlider) {
draggedSlider = densitySlider;
draggedSlider.isDragging = true;
} else if (obj === greenSlider || obj.parent === greenSlider) {
draggedSlider = greenSlider;
draggedSlider.isDragging = true;
}
};
game.up = function (x, y, obj) {
if (draggedSlider) {
draggedSlider.isDragging = false;
draggedSlider = null;
}
};
game.update = function () {
// Animate building color variations based on performance
for (var i = 0; i < buildings.length; i++) {
var building = buildings[i];
var combinedScore = (building.trafficScore + building.sustainabilityScore) / 2;
if (combinedScore > 60) {
building.alpha = 1.0;
} else {
building.alpha = 0.7 + 0.3 * Math.sin(LK.ticks * 0.1);
}
}
}; ===================================================================
--- original.js
+++ change.js
@@ -74,12 +74,56 @@
self.addChild(self.building);
self.occupied = true;
buildings.push(self.building);
updateCityScores();
+ } else if (self.occupied && self.building) {
+ // Show building info when tapped
+ var globalPos = self.toGlobal({
+ x: 0,
+ y: 0
+ });
+ infoDisplay.x = globalPos.x + 60;
+ infoDisplay.y = globalPos.y - 60;
+ infoDisplay.showInfo(self.building);
}
};
return self;
});
+var InfoDisplay = Container.expand(function () {
+ var self = Container.call(this);
+ var background = self.attachAsset('slider', {
+ anchorX: 0,
+ anchorY: 0,
+ alpha: 0.9
+ });
+ background.width = 250;
+ background.height = 120;
+ background.tint = 0x34495e;
+ var infoText = new Text2('', {
+ size: 20,
+ fill: 0xFFFFFF
+ });
+ infoText.anchor.set(0, 0);
+ infoText.x = 10;
+ infoText.y = 10;
+ self.addChild(infoText);
+ self.showInfo = function (building) {
+ if (building) {
+ var info = 'Height: ' + building.buildingHeight.toFixed(1) + '\n';
+ info += 'Width: ' + building.buildingWidth.toFixed(1) + '\n';
+ info += 'Density: ' + (building.density * 100).toFixed(0) + '%\n';
+ info += 'Green: ' + (building.greenCoverage * 100).toFixed(0) + '%\n';
+ info += 'Traffic: ' + building.trafficScore.toFixed(0) + '\n';
+ info += 'Eco: ' + building.sustainabilityScore.toFixed(0);
+ infoText.setText(info);
+ self.visible = true;
+ } else {
+ self.visible = false;
+ }
+ };
+ self.visible = false;
+ return self;
+});
var ParameterSlider = Container.expand(function () {
var self = Container.call(this);
var sliderTrack = self.attachAsset('slider', {
anchorX: 0,
@@ -133,13 +177,13 @@
var totalTrafficScore = 0;
var totalSustainabilityScore = 0;
var targetTrafficScore = 70;
var targetSustainabilityScore = 75;
-// Create grid
-var gridSize = 6;
-var cellSize = 120;
+// Create grid - increased size for more interactive gameplay
+var gridSize = 8;
+var cellSize = 100;
var gridStartX = 2048 / 2 - gridSize * cellSize / 2;
-var gridStartY = 800;
+var gridStartY = 700;
for (var row = 0; row < gridSize; row++) {
for (var col = 0; col < gridSize; col++) {
var cell = new GridCell();
cell.x = gridStartX + col * cellSize;
@@ -260,10 +304,50 @@
fill: 0xE74C3C
});
goalText.anchor.set(0.5, 0);
goalText.x = 2048 / 2;
-goalText.y = 2400;
+goalText.y = 2300;
game.addChild(goalText);
+// Add interactive information display
+var infoDisplay = new InfoDisplay();
+game.addChild(infoDisplay);
+// Add building counter
+var buildingCountText = new Text2('Buildings: 0/' + gridSize * gridSize, {
+ size: 30,
+ fill: 0xFFFFFF
+});
+buildingCountText.anchor.set(0, 0);
+buildingCountText.x = 200;
+buildingCountText.y = 700;
+game.addChild(buildingCountText);
+// Add progress indicators
+var trafficProgress = LK.getAsset('trafficLine', {
+ anchorX: 0,
+ anchorY: 0.5
+});
+trafficProgress.x = 1500;
+trafficProgress.y = 470;
+trafficProgress.scaleX = 0;
+trafficProgress.tint = 0xF39C12;
+game.addChild(trafficProgress);
+var sustainabilityProgress = LK.getAsset('trafficLine', {
+ anchorX: 0,
+ anchorY: 0.5
+});
+sustainabilityProgress.x = 1500;
+sustainabilityProgress.y = 530;
+sustainabilityProgress.scaleX = 0;
+sustainabilityProgress.tint = 0x2ECC71;
+game.addChild(sustainabilityProgress);
+// Add informative tips
+var tipsText = new Text2('Tip: Tap buildings for details, balance density with green space!', {
+ size: 25,
+ fill: 0x95A5A6
+});
+tipsText.anchor.set(0.5, 0);
+tipsText.x = 2048 / 2;
+tipsText.y = 250;
+game.addChild(tipsText);
function updateAllBuildings(property, value) {
for (var i = 0; i < buildings.length; i++) {
buildings[i][property] = value;
buildings[i].updateBuilding();
@@ -283,13 +367,23 @@
}
totalTrafficScore = Math.round(trafficSum / buildings.length);
totalSustainabilityScore = Math.round(sustainabilitySum / buildings.length);
}
+ // Update building counter
+ buildingCountText.setText('Buildings: ' + buildings.length + '/' + gridSize * gridSize);
+ // Update score displays with colors
+ var trafficColor = totalTrafficScore >= targetTrafficScore ? 0x2ECC71 : 0xF39C12;
+ var sustainabilityColor = totalSustainabilityScore >= targetSustainabilityScore ? 0x2ECC71 : 0xE74C3C;
trafficScoreText.setText('Traffic: ' + totalTrafficScore + '/' + targetTrafficScore);
+ trafficScoreText.tint = trafficColor;
sustainabilityScoreText.setText('Sustainability: ' + totalSustainabilityScore + '/' + targetSustainabilityScore);
+ sustainabilityScoreText.tint = sustainabilityColor;
+ // Update progress bars
+ trafficProgress.scaleX = Math.min(1, totalTrafficScore / targetTrafficScore);
+ sustainabilityProgress.scaleX = Math.min(1, totalSustainabilityScore / targetSustainabilityScore);
if (totalTrafficScore >= targetTrafficScore && totalSustainabilityScore >= targetSustainabilityScore) {
LK.setScore(totalTrafficScore + totalSustainabilityScore);
- if (buildings.length >= 8) {
+ if (buildings.length >= 12) {
goalText.setText('Success! Perfect parametric city!');
goalText.tint = 0x2ecc71;
LK.showYouWin();
}
@@ -308,8 +402,19 @@
}
};
game.down = function (x, y, obj) {
draggedSlider = null;
+ // Hide info display when clicking elsewhere
+ var clickedOnGridCell = false;
+ for (var i = 0; i < gridCells.length; i++) {
+ if (obj === gridCells[i] || obj.parent && obj.parent === gridCells[i]) {
+ clickedOnGridCell = true;
+ break;
+ }
+ }
+ if (!clickedOnGridCell) {
+ infoDisplay.showInfo(null);
+ }
if (obj === heightSlider || obj.parent === heightSlider) {
draggedSlider = heightSlider;
draggedSlider.isDragging = true;
} else if (obj === widthSlider || obj.parent === widthSlider) {
Showing 1 to 17 of 17
Used plugins
@upit/tween
