Code edit (4 edits merged)
Please save this source code
User prompt
in handleDragEnd add to cellX and cellY the offset due to currentViewCenter
Code edit (5 edits merged)
Please save this source code
User prompt
add cellW and cellH properties to buildings, constructionYard is 2x2
User prompt
add cellX and cellY propeties to buildings
Code edit (4 edits merged)
Please save this source code
User prompt
Fix Bug: 'TypeError: Cannot read properties of null (reading 'x')' in or related to this line: 'var deltaX = currentPos.x - dragStart.x;' Line Number: 280
Code edit (1 edits merged)
Please save this source code
User prompt
Fix Bug: 'Timeout.tick error: Cannot read properties of null (reading 'playerId')' in or related to this line: 'return player1.playerId === id ? player1.tint : player2.tint;' Line Number: 205
Code edit (1 edits merged)
Please save this source code
User prompt
Fix Bug: 'Uncaught ReferenceError: global is not defined' in or related to this line: 'global.updateActionBoard = function () {' Line Number: 284
User prompt
Add a global function to handle the action board update
Code edit (1 edits merged)
Please save this source code
User prompt
I don't see the log : console.log("Building selected", self); when 1 click on a building
Code edit (1 edits merged)
Please save this source code
User prompt
when an empty cell of the map is clicked currentSelection is set back to null
User prompt
Now can you handle the UI system ? set a currentSelection global variable, when a building is clicked, set this variable
Code edit (18 edits merged)
Please save this source code
User prompt
Do you have a more 'royal' font for player1SpiceText ?
Code edit (1 edits merged)
Please save this source code
Code edit (3 edits merged)
Please save this source code
User prompt
add anchors to player1SpiceText
Code edit (6 edits merged)
Please save this source code
User prompt
add a black text at the top right with player1 spice level
User prompt
This game is Dune 2, so the objective is to harvest spice. add a 'spice' property to Player class with a value of 1000
/****
* Classes
****/
// Initialize game elements
// Map class to represent the grid-based map system
var Map = Container.expand(function () {
var self = Container.call(this);
self.cells = [];
self.init = function (width, height) {
for (var x = 0; x < width; x++) {
self.cells[x] = [];
for (var y = 0; y < height; y++) {
// Initialize each cell with default terrain, height, resources
self.cells[x][y] = {
height: 0,
resources: null,
terrain: null,
asset: null,
building: null
};
}
}
};
self.initTerrain = function (width, height) {
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
// Initialize each cell with default terrain, height, resources
self.cells[x][y].terrain = globalTerrain[x][y] === 1 ? 'rock' : 'sand';
self.cells[x][y].asset = globalTerrain[x][y] === 1 ? new Rock(x, y) : new Sand(x, y);
}
}
};
self.currentViewCenter = {
x: 15,
y: 20
};
// Create a Text2 object to display the currentViewCenter coordinates
self.viewCenterText = new Text2(self.currentViewCenter.x + ', ' + self.currentViewCenter.y, {
size: 50,
fill: '#ffffff',
align: 'center'
});
// Position the text at the top center of the screen
LK.gui.top.addChild(self.viewCenterText);
self.render = function () {
// Move tiles instead of the view
var viewSize = Math.ceil(Math.max(game.width, game.height) / 2 / 100); // Calculate viewSize based on game dimensions and tile size
for (var x = self.currentViewCenter.x - viewSize - 1; x <= self.currentViewCenter.x + viewSize; x++) {
for (var y = self.currentViewCenter.y - viewSize - 1; y <= self.currentViewCenter.y + viewSize; y++) {
if (x >= 0 && x < self.cells.length && y >= 0 && y < self.cells[x].length) {
var cell = self.cells[x][y];
var asset = cell.asset;
var screenX = (x - self.currentViewCenter.x + viewSize) * asset.width;
var screenY = (y - self.currentViewCenter.y + viewSize) * asset.height;
asset.x = screenX;
asset.y = screenY;
if (!asset.parent) {
self.addChild(asset);
}
// Render buildings
var building = cell.building;
if (building) {
//if (!building.parent) {
//self.addChild(building.asset);
//building.x = screenX;
//building.y = screenY;
building.asset.x = screenX;
building.asset.y = screenY;
//if (!building.asset.parent)
{
self.addChild(building.asset);
}
//console.log("Building at " + x + ',' + y, building);
}
} else {
if (asset && asset.parent) {
self.removeChild(asset);
}
}
}
}
};
self.getNavigationMesh = function () {
// Create and return the navigation mesh for pathfinding
};
self.findPath = function (start, end) {
// Implement A* pathfinding algorithm
// Return the path from start to end
};
self.lastInputPosition = null;
self.handleInput = function (input) {
self.currentViewCenter.x = input.x;
self.currentViewCenter.y = input.y;
// Clamp the view center to the map boundaries
self.currentViewCenter.x = Math.max(14, Math.min(self.currentViewCenter.x, self.cells.length - 7));
self.currentViewCenter.y = Math.max(14, Math.min(self.currentViewCenter.y, self.cells[0].length - 9));
// Update the Text2 object with the new coordinates
self.viewCenterText.setText(self.currentViewCenter.x + ', ' + self.currentViewCenter.y);
};
self.checkCollisions = function () {
// Handle collisions between units and obstacles
};
self.serialize = function () {
// Serialize map data to a file
};
self.load = function (data) {
// Load map data from a file
};
});
// Command Panel class
var CommandPanel = Container.expand(function () {
var self = Container.call(this);
self.graphics = self.attachAsset('boardBackground', {
width: game.width,
height: game.height * 0.22,
color: 0x333333
});
// Set the center box position to the center of the screen
self.x = game.width / 2 - self.graphics.width / 2;
self.y = game.height - self.height + game.height * 0.01;
});
var Sand = Container.expand(function (x, y) {
var self = Container.call(this);
self.asset = LK.getAsset('sand', {
x: x * 100,
y: y * 100
}); // Pre-create the asset for this cell
return self.asset;
});
var Rock = Container.expand(function (x, y) {
var self = Container.call(this);
self.asset = LK.getAsset('rock', {
x: x * 100,
y: y * 100
}); // Pre-create the asset for this cell
return self.asset;
});
// Base Building class
var Building = Container.expand(function (x, y, type, playerId) {
var self = Container.call(this);
self.x = x * 100;
self.y = y * 100;
self.type = type;
self.playerId = playerId, self.asset = self.attachAsset(type, {
anchorX: 0.5,
anchorY: 0.5,
tint: getPlayerTint(playerId)
});
self.asset.x = self.x;
self.asset.y = self.y;
// Initialize building-specific properties here
// ...
return self;
});
var ConstructionYard = Building.expand(function (x, y, playerId) {
var self = Building.call(this, x, y, 'constructionYard', playerId);
// Additional properties and methods for ConstructionYard can be added here
return self;
});
var Player = Container.expand(function (playerId, tint) {
var self = Container.call(this);
self.playerId = playerId;
self.resources = 0;
self.tint = tint;
self.spice = 1000; // Initialize spice property with 1000
// Initialize player-specific properties here
// ...
return self;
});
/****
* Initialize Game
****/
// Event listeners
// Instantiate and initialize the Map
var game = new LK.Game({
backgroundColor: 0x000000 // Init game with black background
});
/****
* Game Code
****/
var getPlayerTint = function getPlayerTint(id) {
return player1.playerId === id ? player1.tint : player2.tint;
};
var player1 = new Player(1, 0xAAAAff);
var player2 = new Player(2, 0xffAAAA);
// Initialize assets used in this game.
// Event listeners
// Event listeners
// Instantiate and initialize the Map
var mapXSize = 50;
var mapYSize = 30;
// Prepare the terrain
var globalTerrain = new Array(mapXSize).fill(0).map(function () {
return new Array(mapYSize).fill(0);
});
var gameMap = new Map();
gameMap.init(mapXSize, mapYSize); // Initialize with a 20x20 grid
// Define a fixed rock ilot near the center left of the map
var rockIlot1Center = {
x: Math.floor(mapXSize * 0.15),
y: Math.floor(mapYSize * 0.5)
};
var rockIlot1Radius = 4;
for (var x = rockIlot1Center.x - rockIlot1Radius; x <= rockIlot1Center.x + rockIlot1Radius; x++) {
for (var y = rockIlot1Center.y - rockIlot1Radius; y <= rockIlot1Center.y + rockIlot1Radius; y++) {
if (x >= 0 && x < mapXSize && y >= 0 && y < mapYSize) {
globalTerrain[x][y] = 1;
}
}
}
console.log("rockIlot2Center at " + rockIlot1Center.x + ',' + rockIlot1Center.y);
gameMap.cells[rockIlot1Center.x][rockIlot1Center.y].building = new ConstructionYard(rockIlot1Center.x, rockIlot1Center.y, 1);
// Define a fixed rock ilot near the center right of the map
var rockIlot2Center = {
x: Math.floor(mapXSize * 0.85),
y: Math.floor(mapYSize * 0.5)
};
var rockIlot2Radius = 4;
for (var x = rockIlot2Center.x - rockIlot2Radius; x <= rockIlot2Center.x + rockIlot2Radius; x++) {
for (var y = rockIlot2Center.y - rockIlot2Radius; y <= rockIlot2Center.y + rockIlot2Radius; y++) {
if (x >= 0 && x < mapXSize && y >= 0 && y < mapYSize) {
globalTerrain[x][y] = 1;
}
}
}
console.log("rockIlot2Center at " + rockIlot2Center.x + ',' + rockIlot2Center.y);
gameMap.cells[rockIlot2Center.x][rockIlot2Center.y].building = new ConstructionYard(rockIlot2Center.x, rockIlot2Center.y, 2);
console.log('ConstructionYard cell :', gameMap.cells[rockIlot2Center.x][rockIlot2Center.y]);
gameMap.initTerrain(mapXSize, mapYSize); // Initialize with a 20x20 grid
// Add the map to the game
// This should be done after the map is fully initialized and ready to render
game.addChild(gameMap);
var isPressing = false;
var dragStart = null;
function handleDragStart(obj) {
dragStart = obj.event.getLocalPosition(game);
}
function handleDragMove(obj) {
if (dragStart) {
var currentPos = obj.event.getLocalPosition(game);
var deltaX = currentPos.x - dragStart.x;
var deltaY = currentPos.y - dragStart.y;
dragStart = currentPos; // Update dragStart to the current position
var inputPosition = {
x: gameMap.currentViewCenter.x - Math.round(deltaX / 100),
y: gameMap.currentViewCenter.y - Math.round(deltaY / 100)
};
gameMap.handleInput(inputPosition);
}
}
function handleDragEnd(obj) {
dragStart = null;
}
game.on('down', handleDragStart);
game.on('move', handleDragMove);
game.on('up', handleDragEnd);
// Instantiate CommandPanel
var commandPanel = game.addChild(new CommandPanel());
// Game tick
LK.on('tick', function () {
// Render the map each tick
gameMap.render();
});
a tileable sand terrain tile.
A square tileable rock terrain tile WITHOUT BBORDER. Single Game Texture. In-Game asset. 2d. No shadows. No Border
Zenith view of Dune's Wind Trap power facility square fence. Ressembles a bit to Sydney's Opera. Zenith view Directly from above.
grey cancel icon. UI
thin white circle empty.
0x5e86ff
Zenith view of a white rectangular Harvester shape of a garbage truck with a triangular head. Harvesting on sand, with flowing spice in the back. inside a square fence. Zenith view. Directly overhead. Plumb view.
Minimal Ui icon of an right sign aside with an icon of a target. sand background
Minimal icon of a home with direction icon pointing to the home. sand background
3 white flat isometric concentric circles like a target.
Remove background
Gray background
Minimal Ui icon of target sign on a fire icon.. sand background
top view of an explosion effect.
Simple heavy army tank factory buiding a tank with a crane. Square fence... Zenith view Directly overhead. Plumb view.
an empty black popup UI. UI