(The post title said 'in the Jupyter Notebook Demo' and so this at first addresses that with the most online Jupyter-associated offering; however, it may be possible with pyodide served other ways, see options #2a & 2b below.)
Option #1: Online Jupyter-associated/MyBinder served Jupyter Desktop for pygame use
In my comments, I detailed why you are expecting something that isn't really possible at this time. Eventually there may be a trick to get it (or some derivative or variation) to work in JupyterLite; however, even the basics of JupyterLite are still coming into place. JupyterLite is very much 'Experimental' and won't support something meant to be installed on your local machine and use your graphics card.
In my comments, I do detail a way to get a typical ipykernel to test things in the Jupyter ecosystem and at this time you are encouraged to actually do that when you want a more standard Jupyter experience. However, even the MyBinder-served temporary Jupyter sessions won't support Pygame as you are trying to run it in that offered block as that is meant to make it's own GUI and the standard Jupyter instance through the MyBinder service is it's own GUI and they typically don't play well together.
However, you can use an online offering to sort of get some pygame stuff with a lot of caveats. There's no sound is a biggie. Here's how:
Go here and click on 'launch binder'. I have configured this session to already have pygame installed. So when the session comes up you want to open a terminal and kick running a pygame example.
To do that:
Open a terminal window by clicking on 'Applications' in the upper left of the linux desktop you'll see, and then click 'Terminal Emulator' from the choices to open a terminal window on the remote desktop.
At the prompt in the terminal window on the remote desktop, you'll need to type this command below because this version doesn't have a way to pass in text from your local machine to the remote desktop:
python -m pygame.examples.aliens
That should kick off run the example on remote system you are accessing in your browser. You can use the arrow keys to move left and right and shoot with the spacebar.
Now you have pygame running in an online, Jupyter-associated offering as your title seemed to indicate you want.
It isn't perfect; there's no sound. However, it is farther than you can currently get with JupyterLite.
Note this example above is an older version of the jupyter-dekstop. It has improved since then, but I haven't made one where I configured it to have Pygame installed on it because as you saw it isn't really satisfactory to use Pygame in such sessions.
Here are some example MyBinder-served desktop experiences with better implementations (none of these are configured for pygame at that time):
- Spyder-IDE in Jupyter-desktop MyBinder-served session. Click the '
launch latest release' badge to start the session up and use the Spyder-IDE by clicking on the 'Spyder' icon on the left side of the linux desktop you'll see. You can learn more about Spyder Python development software here. (You'll see that SPyder-IDE is another program meant to run on a desktop, like Pygame. So imagein) - https://github.com/fomightez/Jupyter-desktop_with_pymol/ . Follow what it says under 'How to start a remote computing session and open & use PyMOL on the remote desktop' to try out the better, more modern jupyter-desktop offering available. (see here if you are curious about more technical details. Importantly, this version of the desktop adds a Remote Clipboard tool in the upper right corner that makes it possible to pass text into and out of the remote virtual machine.)
- The basics the Spyder folks provide that I used as basis for updating the above bullet point, namely https://github.com/fomightez/Jupyter-desktop_with_pymol/ . (In addition to other improvements, this version of the desktop adds a Remote Clipboard tool in the upper right corner that makes it possible to pass text into and out of the remote virtual machine.)
Alternative #2a: Possibility with Pyodide/Javascript using Py.Cafe
(Pyodide is the kernel being used in JupyterLite, but you may be able to use Pyodide in a browser to run Pygame. This details the best lead I have found so far to do that.)
In a flash of inspiration, I remembered py.cafe also uses pyodide and has amazing offerings that wouldn't have been possible a few years ago.
I searched 'py.cafe pygame' and found this amazing example offered by Maarten Breddels:
- Maarten Breddels' AMAZING Pygame Demo using Solara offering via Py.cafe.
This is probably more close to what you were originally trying with your offered code bock as it is indeed Python code; however, again you'll see it needs a lot of very particular special handling to get it working there that your code wasn't close to doing.
You'll see by reading the page here in it's entirety, even way down at the bottom Py.cafe offers various frameworks with Jupyter-related potentially being one because under 'Vote for the next', there are currently three Jupyter-related offerings as options. But this again makes it clear that the pygame with pyodide would be separate, or more easily separate, from JupyterLite at this time.
I'll point out that Pygame seems have been developed in the last few years to look and see if in pyodide-based environment, see sys.platform == 'emscripten' used in github.com/pygame-web/archives/blob/… . And see Pyodide FAQ:'How to detect that code is run with Pyodide?'. And so it being possible with Pyodide makes sense, it's just not the classic way.
Alternative #2b: Possibility with Javascript/Pyodide using pyodide and static hosting(?)
(Pyodide is the kernel being used in JupyterLite but you may be able to use Pyodide with javascript a browser to run pygame-ce(?).)
Also, I had seen that with pyodide you may be able to use pygame in a browser directly from a server without JupyterLite involved? There was a StackOverflow post that got closed but I recorded the example at github.com/IEYT/Mayor-Rush/blob/… . Note it says 'Thanks to Furas for helping me import pygame successfully.' here. The deleted post is at https://stackoverflow.com/questions/79593483/how-to-use-pygame-ce-in-pyscript#comment140382075_79593483 .
If you can see the deleted post see the 'Edit' section at the end and the last comment there. IEYT was hosting it at Github Pages. I never saw it do anything active and I note the mature version now offered at ieyt.github.io/Mayor-Rush (via github pages) doesn't seem to use pygame anymore in the current code. I don't know for sure, but I don't think it is possible to access older versions of the github pages versions so you can only get GitHub pages to run the current one.
Anyway, the code is in JAVASCRIPT and very async-heavy and makes me think different approaches are needed to make pygame work with pyodide but it may be possible in browser html with javascript and css. Your code block you shared looks nothing though like https://github.com/IEYT/Mayor-Rush/blob/908b1cb1170477e11cc841fb1ec5b81d25b19497/game.js . (Indeed yours, is Python and that is Javascript.) And so you may need to use that as an example and try to adapt it to what you were trying to do? Maybe using Github's static site offering, Github Pages, to serve the content allows the browser to use the graphics card? So that is how it works??
Pygame seems have been developed in the last few years to look and see if in pyodide-based environment, see sys.platform == 'emscripten' used in github.com/pygame-web/archives/blob/… . And see Pyodide FAQ:'How to detect that code is run with Pyodide?'. So as I said under option #2a, it make sense there's other routes , but it's definitely not the classic way though to use Pygame.