141 lines
4.4 KiB
HTML
141 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pyodide Real-Time Python Execution with Console</title>
|
|
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
|
|
<style>
|
|
#console {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-color: black;
|
|
color: white;
|
|
font-family: monospace;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
#gameCanvas {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Real-Time Python Execution with Pyodide</h1>
|
|
<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>
|
|
<br><br>
|
|
<h2>Console Output:</h2>
|
|
<div id="console"></div>
|
|
|
|
<!-- Game canvas -->
|
|
<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");
|
|
|
|
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> |