added pause and reset buttons
parent
58e65b2967
commit
0676c077fd
|
|
@ -0,0 +1,121 @@
|
|||
import { Robot } from "./robot.js";
|
||||
|
||||
const consoleElement = document.getElementById("console");
|
||||
const gameCanvas = document.getElementById("gameCanvas");
|
||||
const ctx = gameCanvas.getContext("2d");
|
||||
|
||||
let pyodideWorker = startPyodideWorker();
|
||||
let robots = createInitialRobots();
|
||||
let paused = false;
|
||||
|
||||
// ✅ Function to create the Pyodide Worker
|
||||
function startPyodideWorker() {
|
||||
const worker = new Worker("pyodide-worker.js");
|
||||
|
||||
// ✅ Reattach the event listener when a new worker is created
|
||||
worker.onmessage = (event) => {
|
||||
if (paused) return;
|
||||
|
||||
switch (event.data.type) {
|
||||
case "console":
|
||||
logToConsole(event.data.data);
|
||||
break;
|
||||
case "error":
|
||||
logToConsole(`<span style="color:red;">${event.data.message}</span>`);
|
||||
break;
|
||||
case "fire":
|
||||
fire();
|
||||
break;
|
||||
case "turn":
|
||||
turn(event.data.data);
|
||||
break;
|
||||
case "move":
|
||||
move(event.data.data);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return worker;
|
||||
}
|
||||
|
||||
// ✅ Function to create initial robots
|
||||
function createInitialRobots() {
|
||||
return {
|
||||
"player": new Robot("player", 50, 50, "blue"),
|
||||
"enemy1": new Robot("enemy1", 200, 150, "red"),
|
||||
"enemy2": new Robot("enemy2", 400, 250, "red")
|
||||
};
|
||||
}
|
||||
|
||||
// ✅ Function to log messages to console
|
||||
function logToConsole(text) {
|
||||
console.log(text.replace("<b>", "").replace("</b>", ""));
|
||||
consoleElement.innerHTML += text.replace(/\n/g, "<br>") + "<br>";
|
||||
consoleElement.scrollTop = consoleElement.scrollHeight;
|
||||
}
|
||||
|
||||
// ✅ Game Control Functions
|
||||
function fire() {
|
||||
logToConsole("<b>🔥 Gun Fired! 🔥</b>");
|
||||
}
|
||||
|
||||
function turn(deg) {
|
||||
robots["player"].turn(deg);
|
||||
}
|
||||
|
||||
function move(distance) {
|
||||
robots["player"].move(distance);
|
||||
}
|
||||
|
||||
// ✅ Pause/Resume Function
|
||||
function togglePause() {
|
||||
paused = !paused;
|
||||
document.getElementById("pause-button").innerText = paused ? "Resume" : "Pause";
|
||||
}
|
||||
|
||||
// ✅ Reset Function (Fixed)
|
||||
function resetGame() {
|
||||
// Terminate the worker
|
||||
pyodideWorker.terminate();
|
||||
|
||||
// Restart the worker and rebind event listener
|
||||
pyodideWorker = startPyodideWorker();
|
||||
|
||||
// Reset the robots to their initial state
|
||||
robots = createInitialRobots();
|
||||
|
||||
// Clear the console
|
||||
consoleElement.innerHTML = "";
|
||||
|
||||
// Unpause the game if it was paused
|
||||
paused = false;
|
||||
document.getElementById("pause-button").innerText = "Pause";
|
||||
}
|
||||
|
||||
// ✅ Game Loop
|
||||
function gameLoop() {
|
||||
if (!paused) {
|
||||
ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
|
||||
for (let id in robots) {
|
||||
robots[id].update(ctx);
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
// Start game loop
|
||||
gameLoop();
|
||||
|
||||
// ✅ Button Event Listeners
|
||||
document.getElementById("compile-button").addEventListener("click", () => {
|
||||
if (paused) return;
|
||||
const code = document.getElementById("python-code").value;
|
||||
consoleElement.innerHTML = "";
|
||||
pyodideWorker.postMessage({
|
||||
type: "execute",
|
||||
code: code
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("pause-button").addEventListener("click", togglePause);
|
||||
document.getElementById("reset-button").addEventListener("click", resetGame);
|
||||
102
index.html
102
index.html
|
|
@ -29,6 +29,9 @@
|
|||
<textarea id="python-code" rows="10" cols="50" placeholder="Enter your Python code here..."></textarea>
|
||||
<br><br>
|
||||
<button id="compile-button">Compile and Run</button>
|
||||
<button id="pause-button">Pause</button>
|
||||
<button id="reset-button">Reset</button>
|
||||
|
||||
<br><br>
|
||||
<h2>Console Output:</h2>
|
||||
<div id="console"></div>
|
||||
|
|
@ -37,105 +40,8 @@
|
|||
<h2>2D Tank Simulation</h2>
|
||||
<canvas id="gameCanvas" width="800" height="600"></canvas>
|
||||
|
||||
<script type="module">
|
||||
import { Robot } from "./robot.js"; // ✅ Import Robot class
|
||||
const consoleElement = document.getElementById("console");
|
||||
const gameCanvas = document.getElementById("gameCanvas");
|
||||
const ctx = gameCanvas.getContext("2d");
|
||||
<script type="module" src="game.js"></script>
|
||||
|
||||
let pyodideWorker = new Worker("pyodide-worker.js");
|
||||
|
||||
// ✅ Create tanks using the class
|
||||
let robots = {
|
||||
"player": new Robot("player", 50, 50, "blue"),
|
||||
"enemy1": new Robot("enemy1", 200, 150, "red"),
|
||||
"enemy2": new Robot("enemy2", 400, 250, "red")
|
||||
};
|
||||
|
||||
pyodideWorker.onmessage = (event) => {
|
||||
switch (event.data.type) {
|
||||
case "console":
|
||||
logToConsole(event.data.data);
|
||||
break;
|
||||
case "error":
|
||||
logToConsole(`<span style="color:red;">${event.data.message}</span>`);
|
||||
break;
|
||||
case "fire":
|
||||
fire(); // Call the JavaScript fire() function
|
||||
break;
|
||||
case "turn":
|
||||
turn(event.data.data); // Call the JavaScript turn(deg) function
|
||||
break;
|
||||
case "move":
|
||||
move(event.data.data); // Call the JavaScript turn(deg) function
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function logToConsole(text) {
|
||||
console.log(text.replace("<b>", "").replace("</b>", ""));
|
||||
consoleElement.innerHTML += text.replace(/\n/g, "<br>") + "<br>";
|
||||
consoleElement.scrollTop = consoleElement.scrollHeight;
|
||||
}
|
||||
|
||||
// ✅ JavaScript functions to handle events
|
||||
function fire() {
|
||||
logToConsole("<b>🔥 Gun Fired! 🔥</b>");
|
||||
}
|
||||
|
||||
function turn(deg) {
|
||||
robots["player"].turn(deg);
|
||||
}
|
||||
|
||||
function move(distance) {
|
||||
robots["player"].move(distance);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Update the sensor data
|
||||
function updateSensorData() {
|
||||
const distance = Math.random() * 100; // Random distance (0-100)
|
||||
const speed = Math.random() * 10; // Random speed (0-10)
|
||||
|
||||
pyodideWorker.postMessage({
|
||||
type: "sensor_update",
|
||||
data: { distance, speed }
|
||||
});
|
||||
|
||||
//logToConsole(`📡 Sensor Update - Distance: ${distance.toFixed(2)}, Speed: ${speed.toFixed(2)}`);
|
||||
}
|
||||
|
||||
// Game loop: Update and draw everything
|
||||
function gameLoop() {
|
||||
// Clear the canvas
|
||||
ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
|
||||
|
||||
|
||||
for (let id in robots) {
|
||||
robots[id].update(ctx);
|
||||
}
|
||||
|
||||
// Call the game loop recursively
|
||||
requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
// Start the game loop
|
||||
gameLoop();
|
||||
|
||||
// Send code to worker
|
||||
document.getElementById("compile-button").addEventListener("click", () => {
|
||||
const code = document.getElementById("python-code").value;
|
||||
consoleElement.innerHTML = ""; // Clear console before running new code
|
||||
pyodideWorker.postMessage({
|
||||
type: "execute",
|
||||
code: code
|
||||
});
|
||||
});
|
||||
|
||||
// Update "distance" and "speed" every 2 seconds with random values
|
||||
setInterval(updateSensorData, 2000); // Call every 2 seconds
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import robot
|
||||
import time
|
||||
|
||||
robot.move(0.5)
|
||||
await time.sleep(1)
|
||||
while True:
|
||||
robot.turn(5)
|
||||
await time.sleep(0.1)
|
||||
Loading…
Reference in New Issue