1. HOME»
  2. プログラミング・Web»
  3. Python»
  4. Pythonのtkinterで、画像つきのおみくじゲームを作ろう!

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

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

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

山田

てやんでぇ……

アル

先生、どうしたの?
こわかおして

山田

うむ。グッバイキティちゃんが男らしい人が好きだといっていたべから、男らしくしているんだべ……だぜ

りこ

あ、ちょっとかっこいい

アル

似合にあわないよ

グッバイキティ

こんにちはどすー
山田先生、今日もプログラミングおしえてくれはりますかー?
ウチ、ほんま先生の授業じゅぎょうたのしみなんどす

山田

ふっふっふ
わたすが教えてあげようだべ……だぜ

今日はおみくじゲームを作るべ……だぜ

グッバイキティ

先生は、かわええどすなぁ

目次
  1. 今回、tkinterで作るおみくじゲームについて
  2. tkinterでおみくじゲームを作るための準備
  3. tkinterでウィンドウを表示してみよう!
  4. ウィンドウのサイズを固定してみよう!
  5. tkinterでCanvasを使ってみよう!
  6. Canvasに画像を表示してみよう!
  7. Canvasにテキストを表示してみよう!
  8. 画像をクリックしたときに、文字が表示されるようにしてみよう!
  9. おみくじの結果がランダムに表示されるようにしてみよう!
  10. おみくじを振ったときの動きをつけてみよう!
  11. まとめ

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

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

山田

これが今回作るおみくじゲームだべ……だぜ

りこ

わぁ、おみくじだー

山田

おみくじ画像がぞうをクリックすると、おみくじが引ける、というものを作っていくんだべ……だぜ

アル

もういいよ、そのしゃべり方

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

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

山田

まずはおみくじゲームを作るための準備として、フォルダ構成こうせい確認かくにんしておくべ

グッバイキティ

フォルダ構成ってなんどすかー?

りこ

どこに、どうフォルダを作るか、ってことよ

グッバイキティ

なるほどー。りこはんはかしこいどすなぁ

山田

今回こんかいは、こんなふうにフォルダを作って、作業さぎょうをしていくべよ

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

omikujiフォルダにgame.pyとimgフォルダがあって、imgフォルダにomikuji.pngが入ってるんだね

山田

omikuji.pngは、この画像がぞう使つかってほしいんだべ

グッバイキティ

自由じゆうに使っていいんどすえ?

山田

うむ
このおみくじ画像は、「自分が作った」と言わないかぎり、自由に使ってかまわないべ

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

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

山田

では、前回のおさらいもねて、ウィンドウを表示してみるべ

グッバイキティ

もういちどおしえてくれはるんどすなぁ
先生、やさしいどすー

山田

ふっふっふ
では、game.pyに、こんなふうに書いていくべ

game.py

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

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

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

実行じっこうするときは、下のコマンドを、コマンドプロンプトかターミナルに入力するべ!

Windowsの場合

> python game.py

Macの場合

% python3 game.py
りこ

ここまでが、前回の復習ふくしゅうだね!

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

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

山田

やっぱりゲームでは、ウィンドウのサイズをあらかじめめておいて、変更へんこうできないようにしておいた方がいいべな

アル

そのほうがあそびやすいよね

山田

そこで、game.pyにこんなふうに追加ついかするんだべ

game.py

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

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

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

game.geometry('800x600')というので、ウィンドウのサイズを、横幅よこはばが800、縦幅たてはばが600に設定せっていしているんだべ

りこ

ふむふむ

山田

また、game.resizable(False, False)では、横幅と縦幅の変更へんこうができないようにしているんだべよ

グッバイキティ

ウィンドウのサイズが固定こていされるんどすなー

山田

そして、このコマンド実行じっこうするべ!

Windowsの場合

> python game.py

Macの場合

% python3 game.py
アル

あ、マウスでウィンドウのサイズをえようとしても、できなくなったね

tkinterでCanvasを使ってみよう!

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

山田

では、tkinterのCanvasを使ってみるべよ

アル

あ、Canvasって、JavaScriptジャバスクリプトのときもやったよね

山田

うむ。でも使つかかたはぜんぜんちがうから、ちょっとおぼえなおさなくちゃいけないところもあるべ

りこ

そうなんだ……

山田

とにかく、やってみるべ
じゃあ、ウィンドウのサイズに合わせて、横幅よこはば800、縦幅たてはば600の、くろな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言うんはどないなものなんどすかー?

りこ

油絵あぶらえの、くためのぬの(キャンバス)とおなじことなんだって

山田

うむ。JavaScriptジャバスクリプトでやったときと同じように、Canvas上に図形ずけいをかいたり、画像がぞう表示ひょうじしたり、それを動かしたりできるんだべ

ちなみに、油絵ではかみじゃなくて布に描くべよ!

グッバイキティ

ふむふむ。絵を描くときの紙のようなものなんどすなぁ

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

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

山田

つぎは、Canvasにおみくじの画像を表示してみるべ!

アル

やったぁ

山田

では、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')

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

19行目で、変数へんすうomikuji_imgに、どの画像を使つかいたいかをおぼえておいてもらって、21行目でその画像を表示しているんだべ
そしてこのとき、tags='omikuji'というふうにして、画像に「omikuji」というタグをつけていることを、気にしておいてほしいんだべ

アル

なるほどー。タグをつけているんだね

山田

うむ。そして、実行じっこうしてみるべ!

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=('MS 明朝', 100), fill='#ffffff', tags='text')

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

24行目で、result変数へんすうに「大吉だいきち」とおぼえておいてもらって、26行目でそれを表示しているべ

あとここで、「text」というタグをつけていることも気にしておくんだべ

りこ

さっきも画像がぞう表示ひょうじしたときにタグをつけたよね。なにに使つかうんだろう……

山田

あとで分かるから、もうちょっとつべよ

りこ

うん

山田

あと、このプログラムはすこし問題もんだいがあるべ
というのも、26行目の「MS 明朝」というのは、Windowsウィンドウズのフォントなんだべ……

りこ

え、じゃあ私はどうすればいいの?

グッバイキティ

ウチもMacマックやさかい、どないしましょうなぁ……

山田

だから、Macな人は「MS 明朝」の部分ぶぶんを「ヒラギノ明朝 ProN」などに変更へんこうするんだべ

グッバイキティ

ふむふむ。それぞれのコンピュータに入っているフォントをえら必要ひつようがある、いうことどすなぁ

山田

そうなんだべよ
そして、実行じっこうしてみるべ!

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=('MS 明朝', 100), fill='#ffffff', tags='text')

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

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

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

まず、35行目に注目ちゅうもくだべ
ここではtag_bind()というものを使って、omikujiというタグがつけられた画像がクリックされたときに、click_eventという関数かんすうすためのおねがいをしているんだべ

りこ

click_event関数は……あ、31〜32行目ね
そして、32行目ではdisplay_text()を呼び出してる

アル

なんで2回に分けて呼び出したの?

山田

まず、display_textという関数かんすうめいは、テキストを表示する、という意味いみでつけたものだべ

でも、クリックしたときにおこないたいのは、テキストの表示だけとはかぎらないべ
クリックされたとき、いきなりdisplay_textを呼び出してしまったら、今後こんご、もっといい機能きのうおもいついてしまったときに、関数名を考え直したり、べつ関数を呼び出すように変更へんこうしたりと、大変たいへんになるべ

グッバイキティ

今後こんごのことも考えてはるいうことどすなぁ

山田

では、実行じっこうしてみるべ!

Windowsの場合

> python game.py

Macの場合

% python3 game.py
りこ

あ、おみくじの画像がぞう表示ひょうじされてるね!

グッバイキティ

このおみくじ画像をクリックするんどすかー?

山田

そうだべよ

グッバイキティ

ポチッとなどすえ

グッバイキティ

大吉、出てきました

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

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

山田

つぎはおみくじの結果けっかをランダムに表示できるようにしていくべよ!

グッバイキティ

ランダムってなんどすえ?

山田

大吉だいきちだったり、中吉ちゅうきちだったり、というふうに、どれが出るか分からない、ってことだべ

グッバイキティ

それはもう、ほんまのおみくじになりますなぁ

山田

そしてそれには、random使つかいたいべ、というおねがいをする必要ひつようがあるんだべ

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=('MS 明朝', 100), fill='#ffffff', tags='text')

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

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

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

まず、3行目で、ramdamを使うためのおねがいをしているべ
さらに28行目で、0〜5までのランダムな数を作って、その数字によっておみくじの結果けっかを、32行目で表示ひょうじしているべ

りこ

30行目で、変数へんすうresultsにおみくじの結果を全部ぜんぶ代入だいにゅうしてるから、32行目のresults[rnd]で、そのなかのどれかひとつが表示されるようになっているのね!

山田

そうなんだべ。それでは、実行じっこうしてみるべ!

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=('MS 明朝', 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()
山田

まず、66行目で、表示ひょうじしている文字もじ削除さくじょしているべ。このときの「text」というのは、さきほどテキストにつけたtextというタグのことだべ

りこ

あ、37行目の部分ね!
そっか。削除するときのためにタグをつけておいたんだ!

山田

うむ
そして25〜28行目では、グローバル変数へんすうつくっているべ
グローバル変数へんすうっていうのは、どこからでも使つかえる変数のことだべ

そして、このグローバル変数あたいきかえるためには、41〜44行目や、67〜70行目のように、globalを使う必要ひつようがあるんだべ

アル

そっか。JavaScriptジャバスクリプトみたいに、そのままは使えないんだね

山田

そして71〜78行目を見るべ
これは、おみくじをっていないときだけ、変数shaking_omikujiTrueにして、countにし、関数かんすうshakeしているんだべ

りこ

ふむふむ。関数shakeは40行目で……あ、おみくじを振るための関数かぁ

山田

うむ。このshakeでは、変数countの値によって、おみくじを振っているように画像を動かしているんだべ

この、画像を動かすためのおねがいが、49、51、53行目の、canvas.move()というものだべ

りこ

でも待って。関数shakeは、画像がクリックされたときに1回しか呼ばれないはずだよ!
なんでcountの値が順番じゅんばんえていくの?

山田

その秘密ひみつが、61行目だべ
game.after(100, shake)というふうにして、関数かんすうshake、つまり自分自身じぶんじしんを何度も呼び出しているんだべ

グッバイキティ

ほう。つまり関数shakeは、ループしてはる言うことどすか?

山田

その通りだべ!
だからcountの値が順番に増えていって、その値によって画像を動かすことができるんだべ!

アル

そういうことだったんだ!

山田

では、実行じっこうしてみるべ!

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で、画像つきのおみくじゲームを作ろう!
オリジナルゲーム.com