kWatanabe 記事一覧へ

kWatanabe の 技術帖

某企業でOSや仮想化の研究をやっているインフラ系エンジニア。オンプレとクラウドのコラボレーションなど、興味ある技術を綴る。

トップ > Python > Pythonでブラウザで動く "ぷよぷよっぽいもの" を作る

Pythonでブラウザで動く "ぷよぷよっぽいもの" を作る

Python ゲーム

ぷよぷよeスポーツ×プログラミング

…という教材があるんです。殆ど読んでないんですが、曰く、以下のような代物のようです。

プログラミング学習環境『Monaca Education』において、セガが展開するアクションパズルゲーム『ぷよぷよ』をプログラミング学習できる教材です。 製品版と同じ画像素材を利用して、世界中で使われるコンピュータ言語を使い、プロが使う開発環境で本物のプログラミングをお楽しみください。

https://puyo.sega.jp/program_2020/ より引用

puyo.sega.jp

面白そうじゃないですか。やってみようと思い、著作物利用許諾書に目を通すと、以下の記述がありました。

本利用条件に基づき改変した本プログラム等の著作権（著作権法第21条から第28条までに定めるすべての権利を意味します）は、当社に無償にて譲渡及び移転するものとします。また、使用者は、当社が当該本プログラム等を、当社の判断で、商用であるか否かにかかわらず、いかなる方法にて、利用、公開、公表、販売もしくは頒布等を行うことができることを承諾するものとします。

https://puyo.sega.jp/program_2020/dl/puyo-programming-code.pdf より引用

この教材には、ソースコードに加え、画像ファイルなども含まれているようなので、改変した成果物を自由に扱える権利を与えるわけにはいかないのは分かるんですけど。その成果物の権利を逆に召し上げるっていうのはどうなんだ。

なんとなく、ムッとしたので、この教材に頼らずに、「ぷよぷよっぽい何か」を独力で作ってみようと思いました。

教材に頼らず独力で作る

どうやって作るか？

kWatanabe の知るブラウザのプラットフォームと言えば Flash でした。今は HTML5 か。

ただ、kWatanabe は Low-Level な開発を生業にしており、扱える高級言語は Python くらいです。ブラウザで走る Python の処理系を探しました。

brython.info

Brython という JavaScript で実装された Python 処理系です。ライセンスは 3条項BSD。

brython.js と brython_stdlib.js という js ファイルをロードして、<canvas> や <div> で描画領域を用意してあげれば、あとはインラインで Python コードを生で書いていくことができます。

例えば以下のような感じでしょうか。

<!DOCTYPE html>
<html>
    <head>
        <title>Brythonサンプル</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="brython.js"></script>
        <script type="text/javascript" src="brython_stdlib.js"></script>
    </head>
    <body onload="brython()">
        <canvas id="drawarea" width="192" height="384" style="border: 1px solid black;"></canvas>
...
描画先となる HTML5 のオブジェクトを定義する。
...
        <script type="text/python">
from browser import document
from browser import html
...
Python コードを記述する。
...
        </script>
    </body>
</html>

JavaScript と同様、HTMLファイルにソースコードを記述していく*1ので、中身はモロバレです。隠したいなら難読化などの、工夫が必要です。

あと、brython_stdlib.js に実装されていないモジュールは使えません。なので、Python 標準のモジュール以外は基本的に使用できないですが、それでも処理系としては JavaScript と比べてかなり協力です。

kWatanabe のように JavaScript をよく知らない人間や、 JavaScript にアレルギーを持つような人には、選択肢のひとつになるんじゃないでしょうか。

成果物

プレビュー

とりあえず、こんな感じになりました。連鎖で石を消すときの処理が何か怪しい？かも。

f:id:kWatanabe:20210919233648g:plain
Brythonで実装したぷよぷよっぽいもの

デモ

近日中に、期間限定でデモを置く予定です。

操作は以下のとおりです。

キー 効果
W ゲームの開始
A 石を左に動かす
S 押し続けている間、落下速度が増す
D 石を右に動かす
スペース 石を回転させる

ソースコード

GitHubで公開します。ライセンスは GPL Version.2 です。

github.com

所感

  • JavaScript を一切書かなくても、ブラウザのフロントエンドやアプリを作れる方法があることを知った
  • とはいえ、処理系のために数MBの js をロードさせるのは、ユーザフレンドリーではなさそうなので、使いどころは選ぶかも

*1:srcタグでロードすることもできますが、そのファイルを直接開かれると結局同じ。