Make a pygame show up in html page

So I want to make a maze that’s playable in my html web page. I’m doing this as a class project and it’s a website of puzzles. For the last puzzle I want it to be a pygame maze. I want it to show up and be playable in the html web page.
Repl link:

The files that I need help with are the
puzzle10maze.wasm (I’m not sure if i need this, and I don’t know how to use wasm at all)

@DavidMcCleary I would recommend using the tag py-script it allows Python code inside of HTML.

1 Like

Read onto PyScript, or converting the code from Python to JS, CanvasRenderingContext2D - Web APIs | MDN

1 Like

That only works if you installed pyscript like @804kn said.

how would i install pyscript into this

It’s very simple to install, you just have to add:

<link rel="stylesheet" href="" />
<script defer src=""></script>

To the <head> tag, and you could always use a JS lib inside of PyScript

1 Like

Pyscript is a very good library, I like it a lot and I have used it in the past. It’s your best choice.

1 Like

ok so i did that now what would i have to do

To add pygame to your Py-Script environment, add this, too. (After you do what @804kn did)

      packages = ["pygame"]

Then, run your code like this:

import pygame
#code goes here

where would i put that

also idk what you mean by py-script environment. im still technically newish to this coding stuff so im still learning

In the <body> tag, make sure to read PyScript — PyScript documentation

1 Like

It’s okay you’re still learning. I’m new to the concept of Pyodide and Py-script too. I can just remember these things somehow. Good luck on your coding journey, and be sure to ask if you have any more questions!

is it alright if i just add you to the project so you could help me

Sure, I’ll check on the lib for PyGame

k i invited you/added you

so i did that and add the code and i get this error
(PY1001): Unable to install package(s) ‘pygame’. Reason: Can’t find a pure Python 3 Wheel for package(s) ‘pygame’. See: Frequently Asked Questions — Version 0.23.2 for more information.

the code is

      packages = ["pygame"]
import os
import sys
import random
import pygame
from phantom import Phantom
from button import Button
#from player import Player
WHITE = (255,255,255)
class Player(pygame.sprite.Sprite):
    def __init__(self,color,width,height):
      self.image = pygame.Surface([width, height])
      pygame.draw.rect(self.image, color, [0, 0, width, height])
      self.rect = self.image.get_rect()
    def move(self, x, y):
        # Move each axis separately. Note that this checks for collisions both times.
        if x != 0:
            self.move_single_axis(x, 0)
        if y != 0:
            self.move_single_axis(0, y)
    def move_single_axis(self, x, y):
        # Move the rect
        self.rect.x += x
        self.rect.y += y
        # If you collide with a wall, move out based on velocity
        for non_wall in phantomWalls:
          if self.rect.colliderect(non_wall.rect):
                if x > 0: # Moving right; Hit the left side of the wall
                    self.rect.right = non_wall.rect.left
                if x < 0: # Moving left; Hit the right side of the wall
                    self.rect.left = non_wall.rect.right
                if y > 0: # Moving down; Hit the top side of the wall
                    self.rect.bottom =
                if y < 0: # Moving up; Hit the bottom side of the wall
           = non_wall.rect.bottom

        for wall in walls:
            if self.rect.colliderect(wall.rect):
                if x > 0: # Moving right; Hit the left side of the wall
                    self.rect.right = wall.rect.left
                if x < 0: # Moving left; Hit the right side of the wall
                    self.rect.left = wall.rect.right
                if y > 0: # Moving down; Hit the top side of the wall
                    self.rect.bottom =
                if y < 0: # Moving up; Hit the bottom side of the wall
           = wall.rect.bottom


# Nice class to hold a wall rect

class Wall(pygame.sprite.Sprite):
    def __init__(self, pos):
        self.rect = pygame.Rect(pos[0], pos[1], 16, 16)

sprite_list = pygame.sprite.Group()
phantomWalls = pygame.sprite.Group()
player_group = pygame.sprite.Group()
wall = pygame.sprite.Group()

# Initialise pygame
os.environ["SDL_VIDEO_CENTERED"] = "1"
# Set up the display
pygame.display.set_caption("Get to the red square!")
screen = pygame.display.set_mode((320, 240))
orange = (255, 187, 72 )
white = (255, 254, 255)
red = (255, 0, 0)
gray = (255,225,255)

non_wall = Phantom(white, 16, 16)
non_wall2 = Phantom(white, 16, 16)

open_b = Button(gray, 2, 16)
open_b2 = Button(gray, 1, 1)

player = Player(orange,16,16)
player.rect.y = 20
player.rect.x = 20
clock = pygame.time.Clock()

walls = []

# Holds the level layout in a list of strings.
level = [
    "W           WW     W",
    "WWW WWWW WW    W W W",
    "W   W       WWWW WbW",
    "W W W W   W W WW  WW",
    "W W WBW W W W WWW WW",
    "W W WWW WWW W W W WW",
    "W W p W   W   W W WW",
    "W W W   W         WW",
    "W             EW   W",
# Parse the level string above. W = wall, E = exit
x = y = 0
for row in level:
    for col in row:
        if col == "B":
          open_b.rect.x = x
          open_b.rect.y = y
        if col == "P":
          non_wall.rect.x = x
          non_wall.rect.y = y
        if col == "p":
          non_wall2.rect.x = x
          non_wall2.rect.y = y
        if col == "b":
          open_b2.rect.x = x
          open_b2.rect.y = y
        if col == "W":
            Wall((x, y))
        if col == "E":
            end_rect = pygame.Rect(x, y, 16, 16)
        x += 16
    y += 16
    x = 0
white = (255,255,255)
player_movement = 0
running = True
while running:
    for e in pygame.event.get():
        if e.type == pygame.QUIT:
            running = False
        if e.type == pygame.KEYDOWN and e.key == pygame.K_ESCAPE:
            running = False
    # Move the player if an arrow key is pressed
    key = pygame.key.get_pressed()
    if key[pygame.K_LEFT]:
        player.move(-2, 0)
    if key[pygame.K_RIGHT]:
        player.move(2, 0)
    if key[pygame.K_UP]:
        player.move(0, -2)
    if key[pygame.K_DOWN]:
        player.move(0, 2)


    if player.rect.colliderect(end_rect):

    if player.rect.colliderect(open_b):
    if player.rect.colliderect(open_b2):
    # Draw the scene
    collided = pygame.sprite.spritecollide(player, walls, False, pygame.sprite.collide_rect)

    screen.fill((0, 0, 0))
    for wall in walls:
        pygame.draw.rect(screen, (255, 255, 255), wall.rect)
    pygame.draw.rect(screen, (255, 0, 0), end_rect)
    pygame.draw.rect(screen, (255, 200, 0), player.rect)
    # gfxdraw.filled_circle(screen, 255, 200, 5, (0,128,0))


Oh, darn. Pyodide ( The backend ) can only use packages that have a pure .whl file with them. Now we either have to build a wheel for it or it won’t work at all. Sorry…

That won’t work either. Pygame uses C libraries internally afaik, so it is impossible to build a pure python wheel without modding the lib.


I just saw this library…Try out pygbag. It looks as though it may be able to run pygame in a web browser without an external kernel like Pyodide.