obstacles and player position drawn from data/levels.json file

master
Jake 2025-06-19 00:05:09 +08:00
parent 98b46f58fc
commit 2dfdbab898
4 changed files with 218 additions and 24 deletions

171
data/levels.json Normal file
View File

@ -0,0 +1,171 @@
[
{
"name": "Level 1",
"robots":{
"player": {
"position": {
"x": 200,
"y": 200
}
}
},
"obstacles": [
{
"vertices": [
{
"x": -100,
"y": -100
},
{
"x": 100,
"y": -100
},
{
"x": 100,
"y": 100
},
{
"x": -100,
"y": 100
}
],
"position": {
"x": 400,
"y": 300
},
"strokeColor": "#999999",
"fillColor": "#CCCCCC"
},
{
"vertices": [
{
"x": 300,
"y": 380
},
{
"x": 420,
"y": 380
},
{
"x": 350,
"y": 550
},
{
"x": 280,
"y": 420
}
],
"position": {
"x": 400,
"y": -50
},
"strokeColor": "#999999",
"fillColor": "#CCCCCC"
},
{
"vertices": [
{
"x": -10,
"y": -10
},
{
"x": 1010,
"y": -10
},
{
"x": 1010,
"y": 10
},
{
"x": -10,
"y": 10
}
],
"position": {
"x": 500,
"y": 0
},
"strokeColor": "#999999",
"fillColor": "#CCCCCC"
},
{
"vertices": [
{
"x": -10,
"y": -10
},
{
"x": 1010,
"y": -10
},
{
"x": 1010,
"y": 10
},
{
"x": -10,
"y": 10
}
],
"position": {
"x": 500,
"y": 620
},
"strokeColor": "#999999",
"fillColor": "#CCCCCC"
},
{
"vertices": [
{
"x": -10,
"y": 10
},
{
"x": 10,
"y": 10
},
{
"x": 10,
"y": 610
},
{
"x": -10,
"y": 610
}
],
"position": {
"x": 0,
"y": 310
},
"strokeColor": "#999999",
"fillColor": "#CCCCCC"
},
{
"vertices": [
{
"x": -10,
"y": 10
},
{
"x": 10,
"y": 10
},
{
"x": 10,
"y": 610
},
{
"x": -10,
"y": 610
}
],
"position": {
"x": 1000,
"y": 310
},
"strokeColor": "#999999",
"fillColor": "#CCCCCC"
}
]
}
]

22
game.js
View File

@ -6,6 +6,7 @@ const gameCanvas = document.getElementById("gameCanvas");
const ctx = gameCanvas.getContext("2d");
const gameWorld = new GameWorld();
let monacoEditor;
let pyodideWorker = startPyodideWorker();
@ -95,8 +96,8 @@ function resetGame() {
// Reset the robots to their initial state
robots = createInitialRobots();
gameWorld.reset();
gameWorld.addRobot(robots["player"]);
gameWorld.reset(robots["player"]);
//gameWorld.addRobot(robots["player"]);
// Clear the console
consoleElement.innerHTML = "";
@ -139,10 +140,6 @@ function gameLoop(timestamp) {
requestAnimationFrame(gameLoop);
}
resetGame(); // Initialize the game and robots
// Start game loop
gameLoop();
// ✅ Update "distance" and "speed" every 2 seconds with random values
function updateSensorData() {
const distance = Math.random() * 100; // Random distance (0-100)
@ -270,8 +267,17 @@ function setupCanvas() {
}
// Call this function when the page loads
setupCanvas();
fetch('/data/levels.json')
.then(response => response.json())
.then(data => {
gameWorld.levelData = data;
setupCanvas();
resetGame(); // Initialize the game and robots
// Start game loop
gameLoop();
});

View File

@ -10,7 +10,7 @@ export class GameWorld {
let ground = Matter.Bodies.rectangle(400, 600, 800, 50, { isStatic: true });
Matter.World.add(this.world, ground);
this.levelData = null;
this.obstacles = [];
this.robots = [];
@ -22,25 +22,42 @@ export class GameWorld {
}
reset() {
reset(player = null) {
this.robots = []
this.obstacles = []
Matter.World.clear(this.world); // Clear the world without resetting the engine
console.log(this.obstacles.length);
this.addObstacle([
{ x: -100, y: -100 }, // Vertex 1
{ x: 100, y: -100 }, // Vertex 2
{ x: 100, y: 100 }, // Vertex 3
{ x: -100, y: 100 } // Vertex 4
], { x: 400, y: 300 });
let level = this.levelData[0];
if (player) {
console.log("Resetting player position to:", level.robots["player"]["position"]);
console.log(this.robots);
player.x = level.robots["player"]["position"]["x"];
player.y = level.robots["player"]["position"]["y"];
this.addRobot(player);
}
this.addObstacle([
{ x: 300, y: 380 }, // Vertex 1
{ x: 420, y: 380 }, // Vertex 2
{ x: 350, y: 550 }, // Vertex 3
{ x: 280, y: 420 } // Vertex 4
], { x: 400, y: -50 });
for (let i = 0; i < level.obstacles.length; i++) {
let obstacle = level.obstacles[i];
this.addObstacle(obstacle.vertices, obstacle.position);
}
// this.addObstacle([
// { x: -100, y: -100 }, // Vertex 1
// { x: 100, y: -100 }, // Vertex 2
// { x: 100, y: 100 }, // Vertex 3
// { x: -100, y: 100 } // Vertex 4
// ], { x: 400, y: 300 });
// this.addObstacle([
// { x: 300, y: 380 }, // Vertex 1
// { x: 420, y: 380 }, // Vertex 2
// { x: 350, y: 550 }, // Vertex 3
// { x: 280, y: 420 } // Vertex 4
// ], { x: 400, y: -50 });
}

View File

@ -9,4 +9,4 @@ while True:
robot.turn(-0.001)
else:
robot.turn(0)
await time.sleep(0.1)
time.sleep(0.1)