An AI generated poster for the game.

Swimmy Submarine

Nautical adventures with PyScript (Python in the browser).

Play the game here: https://ntoll.pyscriptapps.com/swimmysub/

Awards


best animated background
Presented by omnia

Fantastic Entertainment
Presented by zobi

The "HAL 9000" award for most shameless AI music usage
Presented by ambv

Give this entry an award

Scores

Ratings (show detail)

Overall: 3.0
Fun: 2.9
Production: 3.3
Innovation: 2.9

9% respondents marked the game as not working.
Respondents: 10

Files

File Uploader Date
swimmy_sub.zipfinal
Zipped up assets of the final version of the entry.
ntoll 2025/03/28 18:03
swimmy_poster.jpg
An AI generated poster for the game.
ntoll 2025/03/28 18:00
sub2.png
Different animated backgrounds
ntoll 2025/03/26 19:50
sub3.png
Responsive layout
ntoll 2025/03/26 19:50
Screenshot_2025-03-25_at_18-28-29_SwimmySub.png
Early gameplay
ntoll 2025/03/25 18:33
Screenshot_2025-03-25_at_18-19-54_SwimmySub.png
Loading screen
ntoll 2025/03/25 18:20

Diary Entries

A platform game...

No, not that sort of platform game... but a Python game in a new platform: the browser. ;-)

Thanks to PyScript I want to explore ways in which game making with Python could be delivered via the convenience of a URL. I don't want to use PyGame (also supported by PyScript), but perhaps play around with the built-in browser capabilities to figure out what bits and bobs are available, and how they can most effectively be exposed to game makers.

PyWeek is the vehicle for exploration..! Onwards!

Add a comment

Swimmy Submarine

After a false start on Monday, I put my thinking cap on for a game on the theme of "downstream".

Since I'm playing with relatively new technology for making a game in Python (i.e. running it in the browser via PyScript), I wanted a simple game... something daft but fun like Flappy Bird. How about Swimmy Sub? The back story isn't complicated... just navigate downstream in your sub, avoid the aquatic life and collect the treasure dropped by pirates.

Everything is being done via MicroPython and the DOM. Emoji are the "sprites", CSS is helping with basic layout, animated backgrounds via webp and I've even found a cheesy AI generated "under the water world" song to set the mood.

Here's a couple of screenies that show a few hour's worth of work, around 200 lines of Python... most of the work has been curating and refining assets:



Next steps:

  • A scoring system, and actual treasure to collect.
  • More subtle animation of the aquatic life.
  • BUBBLES!
  • Check it works on mobile (it should be simple).
  • Fine tuning of the various settings for speed and movement.
  • Play test with my kids.
  • Try not to get fed up with that damn AI generated music. ;-)
Onwards!

3 comments

Two days work done... getting there.

My game is deliberately simple and silly in the Flappy Bird / Crossy Road sense.

Why? So I have an opportunity to play with the browser/DOM as a game engine, controlled via PyScript, without having to worry about complicated game context and in between "real work" demands on my time.

I think I'm nearly there.

Today I managed to check off most of my outstanding items on my to-do list:

  • There's now a scoring system!
  • The aquatic life moves and animates.
  • BUBBLES!
  • It's a responsive web app, so displays well on mobile browsers.
  • I've adjusted various settings so as the score increases the game becomes faster / more challenging.

Some screenies:

Responsive layout!
^^^^ A responsive layout of the game!

Different animated backgrounds.

^^^^ There are a selection of different animated backgrounds.

Of course, you can see it in all its glory via this YouTube video: https://www.youtube.com/watch?v=-nni8GHdS9M

Here's what remains:

  • Add a countdown clock, so you have to get as many points within the time limit.
  • When on mobile, use the browser based accelerometer API to control the submarine's depth (i.e. tilt the phone to steer up/down).
  • Play test with my kids, folks at tomorrow morning's gym class (they were enthusiastic to learn I was making a game for PyWeek), and my colleagues at tomorrow's PyWeek community call (on discord).
  • Polish / refactor the code. Some of it is a bit slap-dash as I'm spiking. Nevertheless it's still < 360 lines of Python (including comments).

I think I should be finished tomorrow, with plenty of time to spare. 

All in all I'm having lots of fun making a goofy game while exploring the game-making potential of the browser/DOM. Post PyWeek, I'd like to explore how we could perhaps use something sensible like the <canvas> element to make a "real" game engine in the style of PyGameZero or Wasabi2D.

Onwards!

Add a comment

Almost there...

Today has mostly been tidy ups and final details:

  • The countdown clock gives you 1 minute to score as many points as possible.
  • I dropped the accelerometer API idea, realising that as you tilt the device you can no longer see the screen!
  • Instead, I use touch points if you're on a mobile browser. If you touch above the sub, it goes up, below the sub it goes down and when there's no touch it levels out.
  • I added copious comments to the code. It's very much a bodge job which reflects the experimental and spike-y nature of the entry. But hey, perhaps by next PyWeek we'll have organised ourselves enough to have a nice and simple game engine.
  • I demoed it to various folks and got mostly positive feedback, with a few suggestions for improvements. You can see this via the recording of today's PyScript FUN community call: https://www.youtube.com/watch?v=eXmfqAy9HOo&t=1491s
  • The animated background is something people absolutely love, or they really don't like it. Can't please everyone I guess... ;-)
I feel the game just requires a little more polish so that it speeds up, and more assets are added, in a smoother manner, but that can wait until tomorrow. I'll cut a release on PyScript.com so folks can play it online, and make sure there's a zipped up version you can run locally too.

It's been lots of fun and I'm looking forward to playing everyone else's games and doing the feedback bit of PyWeek.

Onwards..!

2 comments

It's a wrap!

I spent the final couple of hours of this afternoon getting the game to the state needed for submitting it as a final version to be judged. This mostly meant writing a comprehensive README and testing on desktop and mobile versions of Chrome and Firefox (for other browsers, YMMV).

You can play the game in your browser here: https://ntoll.pyscriptapps.com/swimmysub/

Alternatively, you can try it out in a mobile browser via this QR code:

QR code for the game.

The source code is available online here: https://pyscript.com/@ntoll/swimmysub/latest

I also had some fun polishing final features (for example, you can de-select animated backgrounds - a feature that half the world loves to bits, while the other half loathes it). 

Play testing allowed me to fine tune the way the game speeds up as you try to grab as much loot over the 1 minute available, although I'm not entirely happy I've got quite the right settings, and this might be something I look into post-PyWeek. 

A lot of this game also depends upon the random generation of treasure and aquatic friends so, while it's usually lots of fun, it can sometimes be frustrating if Python is being randomly random at randomly choosing a point at which to add treasure and other stuff. Many years ago, I once read a fascinating paper on randomness in games... it turns out, from a psychological point of view, if the game randomly doesn't do anything, or randomly does the same thing in quick succession, then players don't think it's random... but biased in some way. Therefore, for the sake of players' frustrations, it's better if a game is predictably random, if that at all makes sense. Also, it's important to balance the sense of skill needed to play the game vs. the randomness needed so it isn't boring. If it's too random, everything happens just by chance. See my comment above about tuning the game. ;-)

I also had fun generating an appropriately hallucinogenic AI poster for the game:

A poster for the game.
 
I'm looking forward to the feedback from the next round, as well as enjoying the fruits of everyone else's labours. Huge congratulations to everyone else who managed to get something over the line, and thanks to Dan (et al.) for organising another wonderful PyWeek.

Play testing is going to be lots of fun..!

Onwards!

1 comment

Swimmy Sub on four wheels...

Every Tesla has a browser built in... so would the game work..?


https://www.youtube.com/watch?v=4UvOEdTe9p4

:-)

1 comment