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:
https://replit.com/@DavidMcCleary/puzzlit3-main#puzzle2.html
The files that I need help with are the
puzzle10.html
puzzle10maze.py
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.
Read onto PyScript, or converting the code from Python to JS, CanvasRenderingContext2D - Web APIs | MDN
how would i install pyscript into this
It’s very simple to install, you just have to add:
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
To the <head> tag, and you could always use a JS lib inside of PyScript
Pyscript is a very good library, I like it a lot and I have used it in the past. It’s your best choice.
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)
<py-config>
packages = ["pygame"]
</py-config>
Then, run your code like this:
<py-script>
import pygame
#code goes here
</py-script>
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
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
<py-config>
packages = ["pygame"]
</py-config>
<py-script>
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):
super().__init__()
self.image = pygame.Surface([width, height])
self.image.fill(WHITE)
self.image.set_colorkey(WHITE)
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 = non_wall.rect.top
if y < 0: # Moving up; Hit the bottom side of the wall
self.rect.top = 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 = wall.rect.top
if y < 0: # Moving up; Hit the bottom side of the wall
self.rect.top = wall.rect.bottom
# Nice class to hold a wall rect
class Wall(pygame.sprite.Sprite):
def __init__(self, pos):
walls.append(self)
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"
pygame.init()
# 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)
phantomWalls.add(non_wall)
non_wall2 = Phantom(white, 16, 16)
phantomWalls.add(non_wall2)
open_b = Button(gray, 2, 16)
sprite_list.add(open_b)
open_b2 = Button(gray, 1, 1)
sprite_list.add(open_b2)
player = Player(orange,16,16)
player_group.add(player)
player.rect.y = 20
player.rect.x = 20
clock = pygame.time.Clock()
walls = []
# Holds the level layout in a list of strings.
level = [
"WWWWWWWWWWWWWWWWWWWW",
"W WW W",
"W WWWW WWWWWWW W W",
"WWW WWWW WW W W W",
"W W WWWW WbW",
"W WWW WWWWW W P WWW",
"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",
"WWW W W W WWWWW W WW",
"W W W W WW",
"W W WWWWWWWWWWWW WWW",
"W EW W",
"WWWWWWWWWWWWWWWWWWWW",
]
# 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((x,y))
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))
#wall.add(Wall)
if col == "E":
end_rect = pygame.Rect(x, y, 16, 16)
x += 16
y += 16
x = 0
white = (255,255,255)
ACCELERATION = 0.5
player_movement = 0
running = True
while running:
clock.tick(60)
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
phantomWalls.update()
player_group.update()
sprite_list.update()
# 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):
pygame.quit()
sys.exit()
if player.rect.colliderect(open_b):
pygame.sprite.Sprite.kill(non_wall)
if player.rect.colliderect(open_b2):
pygame.sprite.Sprite.kill(non_wall2)
# Draw the scene
player_group.update()
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))
sprite_list.draw(screen)
phantomWalls.draw(screen)
pygame.display.flip()
clock.tick(360)
pygame.quit()
</py-script>
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.