[SOLVED] Pyodide: My pygame code that works in pyodide have no error but no result

Pyodide: My pygame code that works in pyodide have no error but no result

My code in pyodide has no error but the result of a purple screen isn't happening.

So if you need to see the code, this is the github link(https://github.com/IEYT/Mayor-Rush), and the github pages link(https://ieyt.github.io/Mayor-Rush/). They have no errors whatsoever and so, I am kinda stumped. Usually I could give an error, but today the only thing I have is that I might have wrote the python code in the wrong place and it didn't execute. BTW, the edge devTools console tells me pyodide and pygame-ce loaded perfectly.

Edit: The purple screen result is for testing that it works, not related to the game.

Solution

You have many mistakes in code - so if you change only one thing then it may still not work.

You defined def run_game() in game.js but you don't execute run_game() so it can't work.
asyncio.sleep() should be inside while-loop, not after quiting pygame.
You forgot to define fps = 60
Probably more important problem - you use createElement('canvas') which creates new element but it doesn't add it to HTML automatically.
You have to use other function to insert it to existsing HTML -
for example document.getElementsByTagName('body')[0].appendChild(sdl2Canvas).
But you already have <canvas> in index.html so you could use document.selectElementById("canvas") to use existing <canvas>
You run runPython() but code uses async/await so it needs runPythonAsync()
(using async def run_game() in runPython() it shows RuntimeWarning: coroutine 'run_game' was never awaited and RuntimeWarning: Enable tracemalloc to get the object allocation traceback in Console in DevTools)

Code which works for me:

game.js

async function main() {
  let pyodide = await loadPyodide();

  pyodide._api._skip_unwind_fatal_error = true; // Add the flag here

  await pyodide.loadPackage("pygame-ce");

  // let sdl2Canvas = document.createElement("canvas");
  // sdl2Canvas.id = "canvas";
  // document.getElementsByTagName('body')[0].appendChild(sdl2Canvas);
  // pyodide.canvas.setCanvas2D(sdl2Canvas);

  let sdl2Canvas = document.getElementById("canvas");
  pyodide.canvas.setCanvas2D(sdl2Canvas);

  // pyodide.runPython(`
  pyodide.runPythonAsync(`
import asyncio
import pygame

FPS = 30  # forgot to define variable 

async def run_game():
    # pygame setup
    pygame.init()
    screen = pygame.display.set_mode((1280, 720))

    clock = pygame.time.Clock()
    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                running = False

        screen.fill("purple")
        pygame.display.flip()

        clock.tick(FPS)
        await asyncio.sleep(0)  # should be inside loop

    pygame.quit()

run_game()  # execute function
  `);
  // return pyodide;  // don't need it because it doesn't use `variable = main()`
}
main();
console.log("Pygame loads, YAY!");

index.html (without changes)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Mayor Rush</title>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js"></script>
    <script src="game.js"></script>
  </body>
</html>

Tested with python3 -m http.server and Firefox, Chrome