Pythonのtkinterで、画像つきのおみくじゲームを作ろう！

さて、今日《きょう》も楽《たの》しくプログラミングを学《まな》んでいきましょう。

今回《こんかい》はPython《パイソン》のtkinterを使《つか》って、本格的《ほんかくてき》なおみくじゲームを作《つく》ってみます。
本格的というのは、コマンドプロンプトやターミナルに文字《もじ》だけが表示《ひょうじ》されるようなゲームではなく、ちゃんとウィンドウや画像《がぞう》も表示される、ということです。

今回、tkinterで作るおみくじゲームについて

まず、今回《こんかい》作《つく》るおみくじゲームについてです。

tkinterでおみくじゲームを作るための準備

まず、tkinterでおみくじゲームを作るための準備《じゅんび》をしていきたいと思います。

omikuji/
|-- game.py
`-- img/
    `-- omikuji.png

tkinterでウィンドウを表示してみよう！

前回《ぜんかい》、tkinterでウィンドウを表示《ひょうじ》しました。では、そのおさらいをしてみましょう。

game.py

# tkinterを使いたいよ、というお願い
import tkinter

# tkinterのTkクラスを使えるようにする（インスタンス化）
game = tkinter.Tk()
# ウィンドウに表示される名前を「おみくじゲーム」にする
game.title('おみくじゲーム')

# アプリが終了してしまわないようにしたりする
game.mainloop()

Windowsの場合

> python game.py

Macの場合

% python3 game.py

ウィンドウのサイズを固定してみよう！

つづいて、ウィンドウのサイズを固定《こてい》してみましょう。

game.py

# tkinterを使いたいよ、というお願い
import tkinter

# tkinterのTkクラスを使えるようにする（インスタンス化）
game = tkinter.Tk()
# ウィンドウに表示される名前を「おみくじゲーム」にする
game.title('おみくじゲーム')
# ウィンドウのサイズを800x600にする
game.geometry('800x600')
# ウィンドウのサイズを変更できないようにする
game.resizable(False, False)

# アプリが終了してしまわないようにしたりする
game.mainloop()

Windowsの場合

> python game.py

Macの場合

% python3 game.py

tkinterでCanvasを使ってみよう！

つづいて、tkinterでCanvas《キャンバス》を使《つか》ってみましょう。

game.py

# tkinterを使いたいよ、というお願い
import tkinter

# tkinterのTkクラスを使えるようにする（インスタンス化）
game = tkinter.Tk()
# ウィンドウに表示される名前を「おみくじゲーム」にする
game.title('おみくじゲーム')
# ウィンドウのサイズを800x600にする
game.geometry('800x600')
# ウィンドウのサイズを変更できないようにする
game.resizable(False, False)

# canvasという変数に、あなたは真っ黒なCanvasだよ、と教える
canvas = tkinter.Canvas(game, width=800, height=600, bg="black", highlightthickness=0)
# Canvasを配置する
canvas.pack()

# アプリが終了してしまわないようにしたりする
game.mainloop()

Windowsの場合

> python game.py

Macの場合

% python3 game.py

Canvasに画像を表示してみよう！

つづいて、Canvas《キャンバス》に画像《がぞう》を表示《ひょうじ》してみます。

game.py

# tkinterを使いたいよ、というお願い
import tkinter

# tkinterのTkクラスを使えるようにする（インスタンス化）
game = tkinter.Tk()
# ウィンドウに表示される名前を「おみくじゲーム」にする
game.title('おみくじゲーム')
# ウィンドウのサイズを800x600にする
game.geometry('800x600')
# ウィンドウのサイズを変更できないようにする
game.resizable(False, False)

# canvasという変数に、あなたは真っ黒なCanvasだよ、と教える
canvas = tkinter.Canvas(game, width=800, height=600, bg="black", highlightthickness=0)
# Canvasを配置する
canvas.pack()

# omikuji_imgという変数に、あなたはおみくじの画像だよ、と教える
omikuji_img = tkinter.PhotoImage(file = 'img/omikuji.png')
# おみくじの画像を表示する（tags='omikuji'で、タグをつけている）
canvas.create_image(400, 300, image=omikuji_img, tags='omikuji')

# アプリが終了してしまわないようにしたりする
game.mainloop()

Windowsの場合

> python game.py

Macの場合

% python3 game.py

Canvasにテキストを表示してみよう！

つづいて、Canvas《キャンバス》にテキストを表示《ひょうじ》してみます。

game.py

# tkinterを使いたいよ、というお願い
import tkinter

# tkinterのTkクラスを使えるようにする（インスタンス化）
game = tkinter.Tk()
# ウィンドウに表示される名前を「おみくじゲーム」にする
game.title('おみくじゲーム')
# ウィンドウのサイズを800x600にする
game.geometry('800x600')
# ウィンドウのサイズを変更できないようにする
game.resizable(False, False)

# canvasという変数に、あなたは真っ黒なCanvasだよ、と教える
canvas = tkinter.Canvas(game, width=800, height=600, bg="black", highlightthickness=0)
# Canvasを配置する
canvas.pack()

# omikuji_imgという変数に、あなたはおみくじの画像だよ、と教える
omikuji_img = tkinter.PhotoImage(file = 'img/omikuji.png')
# おみくじの画像を表示する（tags='omikuji'で、タグをつけている）
canvas.create_image(400, 300, image=omikuji_img, tags='omikuji')

# resultsに「大吉」と覚えておいてもらう
results='大吉'
# Canvasにテキストを表示する
canvas.create_text(400, 70, text=results, font=('ＭＳ 明朝', 100), fill='#ffffff', tags='text')

# アプリが終了してしまわないようにしたりする
game.mainloop()

Windowsの場合

> python game.py

Macの場合

% python3 game.py

画像をクリックしたときに、文字が表示されるようにしてみよう！

つづいて、おみくじの画像《がぞう》をクリックしたときに、「大吉《だいきち》」と表示《ひょうじ》されるようにしていきます。

game.py

# tkinterを使いたいよ、というお願い
import tkinter

# tkinterのTkクラスを使えるようにする（インスタンス化）
game = tkinter.Tk()
# ウィンドウに表示される名前を「おみくじゲーム」にする
game.title('おみくじゲーム')
# ウィンドウのサイズを800x600にする
game.geometry('800x600')
# ウィンドウのサイズを変更できないようにする
game.resizable(False, False)

# canvasという変数に、あなたは真っ黒なCanvasだよ、と教える
canvas = tkinter.Canvas(game, width=800, height=600, bg="black", highlightthickness=0)
# Canvasを配置する
canvas.pack()

# omikuji_imgという変数に、あなたはおみくじの画像だよ、と教える
omikuji_img = tkinter.PhotoImage(file = 'img/omikuji.png')
# おみくじの画像を表示する（tags='omikuji'で、タグをつけている）
canvas.create_image(400, 300, image=omikuji_img, tags='omikuji')

# テキストを表示するための関数
def display_text():
    # resultsに「大吉」と覚えておいてもらう
    results='大吉'
    # Canvasにテキストを表示する
    canvas.create_text(400, 70, text=results, font=('ＭＳ 明朝', 100), fill='#ffffff', tags='text')

# クリックされたときに呼ばれる関数
def click_event(e):
    display_text()

# おみくじの画像をクリックしたとき、click_event関数を呼び出す
canvas.tag_bind('omikuji', '<ButtonRelease-1>', click_event)

# アプリが終了してしまわないようにしたりする
game.mainloop()

Windowsの場合

> python game.py

Macの場合

% python3 game.py

おみくじの結果がランダムに表示されるようにしてみよう！

つづいて、おみくじの結果《けっか》がランダムに表示《ひょうじ》されるようにしていきましょう。

game.py

# tkinterを使いたいよ、というお願い
import tkinter
# randomを使いたいよ、というお願い
import random

# tkinterのTkクラスを使えるようにする（インスタンス化）
game = tkinter.Tk()
# ウィンドウに表示される名前を「おみくじゲーム」にする
game.title('おみくじゲーム')
# ウィンドウのサイズを800x600にする
game.geometry('800x600')
# ウィンドウのサイズを変更できないようにする
game.resizable(False, False)

# canvasという変数に、あなたは真っ黒なCanvasだよ、と教える
canvas = tkinter.Canvas(game, width=800, height=600, bg="black", highlightthickness=0)
# Canvasを配置する
canvas.pack()

# omikuji_imgという変数に、あなたはおみくじの画像だよ、と教える
omikuji_img = tkinter.PhotoImage(file = 'img/omikuji.png')
# おみくじの画像を表示する（tags='omikuji'で、タグをつけている）
canvas.create_image(400, 300, image=omikuji_img, tags='omikuji')

# テキストを表示するための関数
def display_text():
    # 0〜5までの数をランダムの数を、変数rndに覚えておいてもらう
    rnd = random.randrange(5)
    # おみくじの結果を、resultsに全部覚えておいてもらう
    results=['大吉','吉','中吉','小吉','末吉','凶']
    # Canvasにテキストを表示する
    canvas.create_text(400, 70, text=results[rnd], font=('ＭＳ 明朝', 100), fill='#ffffff', tags='text')

# クリックされたときに呼ばれる関数
def click_event(e):
    display_text()

# おみくじの画像をクリックしたとき、click_event関数を呼び出す
canvas.tag_bind('omikuji', '<ButtonRelease-1>', click_event)

# アプリが終了してしまわないようにしたりする
game.mainloop()

Windowsの場合

> python game.py

Macの場合

% python3 game.py

おみくじを振ったときの動きをつけてみよう！

最後《さいご》に、おみくじを振《ふ》ったときの動《うご》きをつけてみたいと思います。

game.py

# tkinterを使いたいよ、というお願い
import tkinter
# randomを使いたいよ、というお願い
import random

# tkinterのTkクラスを使えるようにする（インスタンス化）
game = tkinter.Tk()
# ウィンドウに表示される名前を「おみくじゲーム」にする
game.title('おみくじゲーム')
# ウィンドウのサイズを800x600にする
game.geometry('800x600')
# ウィンドウのサイズを変更できないようにする
game.resizable(False, False)

# canvasという変数に、あなたは真っ黒なCanvasだよ、と教える
canvas = tkinter.Canvas(game, width=800, height=600, bg="black", highlightthickness=0)
# Canvasを配置する
canvas.pack()

# omikuji_imgという変数に、あなたはおみくじの画像だよ、と教える
omikuji_img = tkinter.PhotoImage(file = 'img/omikuji.png')
# おみくじの画像を表示する（tags='omikuji'で、タグをつけている）
canvas.create_image(400, 300, image=omikuji_img, tags='omikuji')

# おみくじを振っているかどうかの変数
shaking_omikuji = False
# おみくじを振るときの、時間経過の変数
count = 0

# テキストを表示するための関数
def display_text():
    # 0〜5までの数をランダムの数を、変数rndに覚えておいてもらう
    rnd = random.randrange(5)
    # おみくじの結果を、resultsに全部覚えておいてもらう
    results=['大吉','吉','中吉','小吉','末吉','凶']
    # Canvasにテキストを表示する
    canvas.create_text(400, 70, text=results[rnd], font=('ＭＳ 明朝', 100), fill='#ffffff', tags='text')

# おみくじを振るための関数
def shake():
    # グローバル変数のshaking_omikujiの値を更新できるようにする
    global shaking_omikuji
    # グローバル変数のcountの値を更新できるようにする
    global count
    # おみくじを振っているとき
    if shaking_omikuji == True:
        # countの値によって、おみくじを移動
        if count == 1:
            canvas.move('omikuji', 10, 0)
        elif count == 2:
            canvas.move('omikuji', -20, 0)
        elif count == 3:
            canvas.move('omikuji', 10, 0)
        # countの値が10になったら、おみくじを振るのをやめて、テキストを表示する
        elif count == 10:
            shaking_omikuji = False
            display_text()
        # countに1ずつ足していく
        count += 1
        # 100経過するごとに、shake関数を呼び出す（ループ）
        game.after(100, shake)

# クリックされたときに呼ばれる関数
def click_event(e):
    # 表示しているテキストを削除
    canvas.delete('text')
    # グローバル変数のshaking_omikujiの値を更新できるようにする
    global shaking_omikuji
    # グローバル変数のcountの値を更新できるようにする
    global count
    # おみくじを振っていないとき
    if shaking_omikuji == False:
        # shaking_omikujiをTrueにする
        shaking_omikuji = True
        # countの値を0にする
        count = 0
        # shake関数を呼び出す
        shake()

# おみくじの画像をクリックしたとき、click_event関数を呼び出す
canvas.tag_bind('omikuji', '<ButtonRelease-1>', click_event)

# アプリが終了してしまわないようにしたりする
game.mainloop()

Windowsの場合

> python game.py

Macの場合

% python3 game.py

まとめ

今回《こんかい》はPython《パイソン》でおみくじゲームを作《つく》りました。

このシリーズの一覧はこちら

1. 小学生からのプログラミング入門。プログラミングってなぁに？
2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう！　小学生からのプログラミング入門
3. Scratchでじゃんけんゲームを作ろう！　小学生からのプログラミング入門
4. Scratchでシューティングゲームを作ろう！　小学生からのプログラミング入門
5. Scratchでピアノ鍵盤を作って音を鳴らそう！　小学生からのプログラミング入門
6. テキストエディタ（Visual Studio Code）をインストールしてみよう！　小学生からのプログラミング入門
7. Visual Studio Codeを日本語化してみよう！　小学生からのプログラミング入門
8. JavaScriptでおみくじを作ろう！　小学生からのプログラミング入門
9. JavaScriptで今月の残り日数を計算してみよう！　小学生からのプログラミング入門
10. JavaScriptで画像を表示してみよう！　小学生からのプログラミング入門
11. JavaScriptで画像を移動してみよう！　小学生からのプログラミング入門
12. 【JavaScript】キー入力でキャラを動かしてみよう！　小学生からのプログラミング入門
13. 【JavaScript】ファイルを分けて管理してみよう！　小学生からのプログラミング入門
14. 【JavaScript】オブジェクトを使ってみよう！　小学生からのプログラミング入門
15. 【JavaScript】ゲームのメインループを作ってみよう！　小学生からのプログラミング入門
16. 【JavaScript】キャラを決まった間隔ずつ動かす！　小学生からのプログラミング入門
17. HTML5とCanvasを使ってみよう！　小学生からのプログラミング入門
18. 【JavaScript】迷路やRPGで使えるマップを作ってみよう！　小学生からのプログラミング入門
19. 【JavaScript】マップでキャラを動かせるようにしよう！　小学生からのプログラミング入門
20. 【JavaScript】クラスの概念をしっかりと理解しよう！　小学生からのプログラミング入門
21. 【JavaScript】プログラム全体をクラスを使って作ってみよう！　小学生からのプログラミング入門
22. 【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門
23. 【JavaScript】改行と一文字ずつ画面に表示する方法！　小学生からのプログラミング入門
24. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法！　小学生からのプログラミング入門
25. JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方
26. webpackを使ってゲームエンジンを作ろう！（JSライブラリの作り方）
27. WindowsにPythonをインストールしてみよう！小学生からのPython入門
28. MacにPythonをインストールしてみよう！小学生からのPython入門
29. Pythonでじゃんけんゲームを作ってみよう！小学生からのPython入門
30. Pythonのtkinterを使って、ウィンドウを表示してみよう！
31. Pythonのtkinterで、画像つきのおみくじゲームを作ろう！

• Tweet
• Facebook
• はてブ
• Pocket