Brython / HTML5 simple "asteroids" game

[dan d.]

This is a follow up post to the threads :
"Displaying an image with Brython" and
"Playing sounds in Brython"

The goal is to write a simple HTML5 game with Brython.
I did not get to work on it a whole lot these days. I've been busy and I had to work on another little project using PyGame for a  Christmas surprise for the kids :)

So far I have:
- Background image ==> image on canvas
- Ship flying around the screen and responding to keyboard events ==> canvas image + timer updates + keyboard events
- Ship shoots its missiles. with sound. ==> more images on the canvas and loading a JS window.Audio object.

And so far it runs rather nicely. But I need to do a lot of code cleanup. Its a mess!

One problem I got was using the Space Bar button for the missiles. Under Firefox, this scrolls my window down. Event though I used the "ev.preventDefault()" call in the keyboard event handler. Has anyone else had this problem?

I could post the game up, on the web, once in a while if people are interested. But again, the code is messy. And it's "work in progress"  :)

Thanks Dan

[Billy Earney]

I would love to see it!

Billy

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/brython/924d7a6e-d33b-4e5e-9bce-c5bda53d4245%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Christophe Bal]

Hello.

I would be happy to see even it is messy. Can you send it to me ou put your draft code on the web ?

Christophe

[dan d.]

Ok guys. As soon as I have something decent, I'll post it up.
Decent in terms of game play and looks.
Above is a sneak peak  :)

Is there a random number generator for Brython? (Random module?)

Thanks
Dan

[Billy Earney]

yes,

There are two random modules.  one i called random (and this takes some time to load), and there is __random (as in double under score), which is faster.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/95afdf81-d906-4e85-9f23-e8f5335b7ae6%40googlegroups.com.

[dan d.]

thanks, __random works nicely.
Using randint()

Dan



[dan d.]

Here a rough draft version. Run it under Firefox or Chrome.

http://webswap.free.fr/brythonrocks/BrythonRocks.html

Warning :
The code is not cleaned up. Its not even finished, but is pretty much "works". With a lot of little things to finish up and debug here and there.
Not sure I'll get to work on it a lot during Xmas break. And since I told you guys I'd post a version up... here it is. Just keep in mind that it is Work In Progress  :)

I need to fix the velocity / direction code.
I need to add the splash screen
I need to update the lives / score display. I just displayed the basic info as text on the canvas.
I need to add a game music in the background.
I need to improve / tweak the collision code.
I need to figure out the bug and error messages that happen when the set of "rocks" / "enemies" is empty. This does not seem to cause a problem under Skulpt...
Sound stops working after a while under Chrome... not sure why...
etc...

Cheers,

Dan

Le jeudi 18 décembre 2014 00:59:18 UTC+1, Billy Earney a écrit :

[dan d.]

I added explosions for enemy ships. (non animated, for right now)
Also added very simple shields.

As for the user interface, I am also playing with "on screen" buttons, to try to play the game on touch screen PC's or tablettes.I need to get a hold of a tablette to test this...
These are the little round circles at the bottom of the screen.

Cheers
Dan

[Billy Earney]

adding the on screen buttons is probably a good idea.

I've looked at your demo and I like what I see.  I also looked at the code, and noticed it was probably a little too complicated to use as a basic example to convert pygame to brython.  So for right now, I'm using a few pygame demos to get some of the main functionality working with brython.  Hopefully soon, I can try to convert your example.

Billy

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/d8113b0f-b89e-4c03-a451-c437d231c093%40googlegroups.com.

[dan d.]

Thanks Billy.

It's a simple game. Its only about 500 lines of code. And can probably be made shorter. I am not really going for efficiency right now.
But it is not completely trivial either since it has classes / objects. Graphics, sounds, user interface (keybaord and mouse). And the collision checking code is a little hairy.
So yeah, its probably a bit much as a first exemple for someone learning web games.

The "Memory" game or "Pong" might be a better first games.

Cheers,
Dan

[Billy Earney]

I"m currently looking at chimp, and stars.  Both are quite small and use some of the basic features, which needs to be translated to html5 canvas.  I've gotten stars example working, and have the fist printing out on the canvas for the chimp example, but need to do some additional debugging to get the image/sprite to work correctly.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/a1ee458e-baf2-4325-ada1-d1d46784e948%40googlegroups.com.

[dan d.]

I posted a very simple / basic example here :

http://webswap.free.fr/brythonrocks/simple.html

This shows the structure of a game.
Displaying text on the canvas
Dislaying an image on the canvas
Using a Timer
Keyboard event handling
Playing sounds
Integrating you Python classes / functions in all this

All the basics to create an HTML5 game with Brython :)

Cheers
Dan

[André]

On Friday, 26 December 2014 14:46:02 UTC-4, dan d. wrote:

I posted a very simple / basic example here :

http://webswap.free.fr/brythonrocks/simple.html

This shows the structure of a game.
Displaying text on the canvas
Dislaying an image on the canvas
Using a Timer
Keyboard event handling
Playing sounds
Integrating you Python classes / functions in all this

All the basics to create an HTML5 game with Brython :)

Very nice!   I had started writing a game with Brython but I "broke it" with some changes I made to my site.  Yours is a good first example.

On your site, you wrote 

   "since the CodeSkultor libraries are not open source and the owners, do not allow the use of their libraries outside of the codeskultor.org website."

Do you have any reference to the second part or your statement?  I have been trying to find out about what they allowed myself, and was thinking of porting their simplegui library (api really) to Brython....

André

[dan d.]

Hey André,

Thanks. You can also see the "real" simple game I posted at the following url :
ttp://webswap.free.fr/brythonrocks/BrythonRocks.html

Yeah, actually another person I was in contact with, who used CodeSkulptor.org, copied the .js libraries and made his own website to host "simplegui" powered games.
He was contacted by the author of the CodeSkulptor / simplegui libraries and was asked to take his website down. Specifying that the libraries are not open source and not free to use.
I actually wrote the simple.py example to post it here, in the Brython group, and to post on Coursera to show people how to migrate their games from simplegui to Brython.
Writing an open source version of the library, an "opensimplegui" if you will,  based on Brython, would be really cool. I don't know if I have the expertise to get that done, myself. But if some folks want to try to tackle that subject, I woud be interested in participating. :)   You would be the third person interested in the idea.

Let me know. I can contact the other person I mentioned and we can try to see if it seems possible and how to go about it.

Cheers,
Dan

[Scott Lawton]

Here's another source of simple Python games that could be ported to Brython:
   http://lightbird.net/larks/
   or https://github.com/pythonbyexample/PBE/tree/master/code

license is BSD: https://github.com/pythonbyexample/PBE/blob/master/LICENSE

The author is somewhat anonymous but is someone I can get in touch with. (No, it's not me!)

...

Another simple Asteroids-style game is hidden in the examples here: https://www.panda3d.org/download.php ... BSD license: http://www.panda3d.org/license.php

Panda3D is a very interesting Python 3D library, though the Asteroids example is 2D and fairly straightforward. Some of the other examples may be worth a look.

(OK, back to occasional lurking....)

Scott

[Vinicius Assef]

These examples don't work on Safari. :-( I'm using Safari on Mac OS X Yosemite and none of your links work here.

No game board showing here. :-( Is there some compatibility problem?

It works nice in Firefox, but not in Safari.

---- On Fri, 26 Dec 2014 17:46:37 -0300 dan d.<dandelso...@gmail.com> wrote ----

> To view this discussion on the web visit https://groups.google.com/d/msgid/brython/dd509b1f-bf18-45bf-81b0-3dae440300a3%40googlegroups.com.

[Kiko]

2014-12-29 9:41 GMT+01:00 Vinicius Assef <list-b...@viniciusban.eu.org>:

These examples don't work on Safari. :-( I'm using Safari on Mac OS X Yosemite and none of your links work here.

No game board showing here. :-( Is there some compatibility problem?

It works nice in Firefox, but not in Safari.

Could you provide some info from the js console of your browser? Errors, messages,....

 

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/14a9531293e.fe85cffd142267.3068040486571193760%40viniciusban.eu.org.

[Vinicius Assef]

See the attached screenshot.

Tell me if you need more information.


---- On Mon, 29 Dec 2014 07:20:39 -0300 Kiko wrote ----

> To view this discussion on the web visit https://groups.google.com/d/msgid/brython/CAB-sx61XH-fK5y9vgxh6C8oTK00Qg80eJBz7teG9KjdOz_a50A%40mail.gmail.com.

[dan d.]

Hey  Vinicius Assef,

I'm sorry I don't have a Mac so I don't have acces to MacOS X or Safari ...

I only tested, using Firefox, and Chrome / Chromium under Linux and Windows. And also with Chrome on Android 4.x (on a Smartphone).
Does Brython work n general (various demos on the Brython website) on Safari?

I did nothing Firefox or Chrome specific in the code. It's all Brython and HTML5. (canvas, images, sounds)

Cheers,
Dan

[Roger Erens]

Hi Dan,

nice progress you are making!

I can confirm the issue: it's working in Chrome, but not in Safari.

Op donderdag 1 januari 2015 18:51:24 UTC+1 schreef dan d.:

Hey  Vinicius Assef,

... 

Does Brython work n general (various demos on the Brython website) on Safari?

Yes, both in Chrome and in Safari. I could not find any demos, though, that load images.

It seems to be something with the loading of the images: when I remove the empty parentheses at the end of the lines defining the images imgSun, imgBackground, etc.,

the code breaks when the first sound is defined (soundMissile).

I tried to disable to use of sound in the code altogether, but in that case I end up in some infinite loop, which I did not find out how to interrupt yet.

HTH, Roger.

PS: a minor typo in ennemySpawner, should be enemySpawner IMHO.

[dan d.]

Hey guys,

Did you guys test the very simple demo I made under Safari? Does that one work? URL below.
http://webswap.free.fr/brythonrocks/simple.html

The PC I have access to, that runs with Windows, I don't have the possibility of installing Safari on it.

Cheers,
Dan

[Vinicius Assef]

It didn't work.

The screenshot with error follows attached.


---- On Fri, 02 Jan 2015 12:00:21 -0300 dan d.<dandelso...@gmail.com> wrote ----

[dan d.]

Looks like a question for Pierre Q. or others who know the internals of Brython.  :)
Might be a "Safari specific" problem.

Dan

[dan d.]

Hey everyone,

Do any of you Brython users have any good tips on how to effectively make game UIs for touch screens? (tablets, smartphones, touch screen PC's)

I added touch areas (circles) on my HTML canvas and added click events processed by Brython. Are there better or prefered ways to do this?
See picture, above, of the game running on an Android phone in the Chrome browser.

I put a call to "ev.preventDefault()" in the mouse click processing function. And yet the Android Chrome browser resizes the window if you "double click" on the canvas.

Has anyone done something a bit similar to what I am doing?

Thanks
Dan

[Billy Earney]

I like the touch areas.  I believe this is a good approach.

Have you tried to override the ondblclick event?   Above you sstate you call ev.preventDefault on mouse click, which I assume you are referring to the onclick event.

Hope this helps.

Billy

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/19594554-139a-4ae7-94a7-80bcbf9595f8%40googlegroups.com.

[Pierre Quentel]

Le vendredi 2 janvier 2015 16:39:08 UTC+1, dan d. a écrit :

Looks like a question for Pierre Q. or others who know the internals of Brython.  :)

Unfortunately I don't have an Apple so I can't test. The latest release fixed a bug that made Brython unusable on an iPhone (another Javascript compatibility problem : setting "throw" as an object attribute is ok for Firefox and Chrome, but throws an exception on Safari for the iPhone... I can tell you I had fun finding the bug !). It's fixed now, but seeing the attached error messages I don't think it was the same issue

[dan d.]

Hey Billy,

Its the "mousedown" event to be exact  :)

canvas.bind("mousedown", process_mouse_down)

At the end of my "process_mouse_down" function, I call "ev.preventDefault()".  But it does not seem to prevent the Android Chrome "zoom/unzoom" functionality when you "double tap" on the canvas.

Dan

[Kiko]

2015-01-04 18:38 GMT+01:00 Pierre Quentel <pierre....@gmail.com>:

Le vendredi 2 janvier 2015 16:39:08 UTC+1, dan d. a écrit :

Looks like a question for Pierre Q. or others who know the internals of Brython.  :)

Unfortunately I don't have an Apple so I can't test. The latest release fixed a bug that made Brython unusable on an iPhone (another Javascript compatibility problem : setting "throw" as an object attribute is ok for Firefox and Chrome, but throws an exception on Safari for the iPhone... I can tell you I had fun finding the bug !). It's fixed now, but seeing the attached error messages I don't think it was the same issue

Might be a "Safari specific" problem.

Dan

I think it is safari specific.

I don't have a Mac but I installed safari 5 (not very updated) on Linux using playonlinux. After playing a little bit with the code provided by Dan it seems that the Audio and Image constructors are not working well with that version of safari. I attach an (almost) working version were you can play with it but no sound in Safari. In FF and Chrome/Chromium it works ok. You will need an internet connection to run it.

P.D.: I'm on holidays so I don't have too much time to answer.