はじめに
先日pygbag
というのを使って、ブラウザ上でpygameを動かせるようにする。すなわちネット上に公開する方法を紹介したので、そちらを使って、作ったゲームを公開したいと思います。このゲームはスマホ向けに作ってみました。PCでもキーを押せば発射できるので、マウスとキーボードで一応遊べますが、スマホでやった方が面白いと思います。
宣伝
ぜひプレイしてみて!
操作方法
操作はシンプルです。左のぐるぐるを動かすと移動します。青いボタンを押すと向いている方向に弾を撃ちます。弾は0.8秒ごとに1発溜まり、5発まで溜まります。5発溜まっているときに赤いボタンを押すと、全弾消費してレーザーを撃てます。
おまけ
ゲーム中のスティックが、結構見た目がそれっぽくて気に入ったので、実装方法を置いておきます。用はマウスの座標と自分の座標から、math
モジュールを使って角度を割り出すってだけです。ゲーム中ではその角度を取得して、戦車の画像を回転させるのに使っています。
class Stick:
def __init__(self, x, y, r, border_width = 2):
self.x, self.y = x, y
self.r = r
self.inner_r= int(self.r * 0.6)
self.border_width = border_width
self.inner_x = self.x + self.r - self.inner_r # 初期位置を調整
self.inner_y = self.y + self.r - self.inner_r # 初期位置を調整
self.angle = 0
self.holding = False
def draw(self):
# 透明な土台を設定
alpha_surface = pygame.Surface((self.r*2, self.r*2), pygame.SRCALPHA)
alpha_surface.fill((0, 0, 0, 0))
#白い枠線
pygame.draw.circle(alpha_surface, (255, 255, 255, 128), (self.r, self.r), self.r, self.border_width)
#灰色の丸
pygame.draw.circle(alpha_surface, (128, 128, 128, 128), (self.inner_x, self.inner_y), self.inner_r)
#描画
screen.blit(alpha_surface, (self.x, self.y))
def update(self, mouse_x, mouse_y):
if self.holding and mouse_x <= 128: #ここは任意の範囲を指定したらOK
dx = mouse_x - (self.x + self.r)
dy = mouse_y - (self.y + self.r)
self.angle = math.atan2(dy, dx)
self.inner_x = self.r + self.r * 0.4 * math.cos(self.angle)# 中心からの距離を計算
self.inner_y = self.r + self.r * 0.4 * math.sin(self.angle)# 中心からの距離を計算
self.inner_x = int(self.inner_x)
self.inner_y = int(self.inner_y)
else:
self.inner_x = self.r
self.inner_y = self.r
↓イベントloop中に配置
mouse_pressed = pygame.mouse.get_pressed()
if mouse_pressed[0]:
# 左クリックが押されている場合
stick.holding = True
else:
stick.holding = False
別に最適化しているわけではなく、雑に作ったものですが、スティックを実装したいと思っている人は参考になると思います。スティックが反応する範囲をregion
とか名前つけてインスタンス作成時に設定できるようにした方が親切ではありますね。
最後に
ここまで読んで下さりありがとうございました。また、ゲームをプレイしていただいた方もありがとうございました。pygbag
の情報が日本だとほぼ無いので、サンプルプログラムの一つ的な感じで見てもらえればと思います。こちらは、マウス操作がしっかりできるよっていうのをメインで推してるのですが、フォント関連がしっかりできるよっていうのをメインに、タイピングゲームも公開しているので、pygbag
が気になる方はそちらもご覧ください。