数学の関数に従い移動する星をマウスクリックで撃つゲーム

中学生、高校生として数学で様々なグラフを学びます。楽しみながら数学のグラフを学習できるようゲーム化してみました。＜開発環境：なでしこ３、Win11、なでしこ３用に教育したChatGPT4o＞

エディタ

プログラム

#------------------------------------------------------------------------------ 
# MoonWolf（むーんうるふ） なでしこ３ チャレンジ　2024.8
# 数学の関数に従い星が動き、その星をマウスで撃つゲーム Ver. 0.20
# (c)2024 MoonWolf / MITライセンス
# 「数学の関数グラフは、楽しみながら覚えるもの」
# 操作方法：星の動きを予測して、マウスで撃つ
#
# 本プログラムはPCでの実行が望ましい
# キャンパス 600x500 (実行時に自動設定 by DOM属性設定)
#
# 関連書籍：
#『MoonWolfと学ぶ 日本語プログラム開発 なでしこ 第３巻 ゲーム開発 応用編』
# Amazon Kindle    ：https://www.amazon.co.jp/dp/B0DCFZQ456
# Amazon Paoerback : https://www.amazon.co.jp/dp/B0DCS1L6BF
# ※本ゲームの詳しい説明は上記書籍をご参照ください。
# ※MITライセンスです。本プログラムをどうぞご自由にお使いください。
#
# 本ゲームは300行の数学の応用プログラムです。初心者向けの説明も準備してます。
# 『MoonWolfと学ぶ 日本語プログラム開発 なでしこ 第１巻 超入門編』
# 『MoonWolfと学ぶ 日本語プログラム開発 なでしこ 第２巻 ゲーム開発 基礎練習編』
#  興味のある方は、Amazonで「MoonWolfと学ぶ」と検索。
#　YouTubeでの「なでしこ」紹介動画：https://www.youtube.com/shorts/HAJZMdYiQ3k
#------------------------------------------------------------------------------

# カラーパレットの設定
描画中キャンバスの「幅」に600をDOM属性設定。
描画中キャンバスの「高さ」に500をDOM属性設定。

# 初期設定
黒色に塗色設定。
[0, 0, 600, 500]に四角描画。
描画中 = オン
BulletActivate = 0
クリックX = 0
クリックY = 0
弾半径 = 200
弾回転角度 = 0
スコア = 0
当たり判定距離 = 30
ヒットフレーム = 0
ヒットX = 0
ヒットY = 0
星移動速度 = 1.3
GameOverFlag = 0
星残像 = [] # 星の残像用配列の初期化

# 各種定数の設定
星半径 = 25
数学的X = -300
グローバル関数番号 = 1

# 変数の初期設定
クリック地点X = 0
クリック地点Y = 0

# X軸とY軸の描画関数
●軸描画とは
    白色に線色設定。
    # X軸
    [0, 250]から[600, 250]まで線描画。
    # X軸の矢印
    [590, 240]から[600, 250]まで線描画。
    [590, 260]から[600, 250]まで線描画。
    # Y軸
    [300, 0]から[300, 500]まで線描画。
    # Y軸の矢印
    [290, 10]から[300, 0]まで線描画。
    [310, 10]から[300, 0]まで線描画。
    # 軸のラベル
    「24px sans-serif」に描画フォント設定
    白色に塗り色設定
    [565, 275]に「X」を文字描画。
    [310, 30]に「Y」を文字描画。
    [275, 275]に「O」を文字描画。

# グリッドの描画
    1に線太設定 #グリッドだけ細い線で描きたい
    灰色に塗り色設定
    # 縦線グリッド
    [100, 0]から[100, 500]まで線描画。
    [200, 0]から[200, 500]まで線描画。
    [400, 0]から[400, 500]まで線描画。
    [500, 0]から[500, 500]まで線描画。
    # 横線グリッド
    [0, 50]から[600, 50]まで線描画。
    [0, 150]から[600, 150]まで線描画。
    [0, 350]から[600, 350]まで線描画。
    [0, 450]から[600, 450]まで線描画。

5に線太設定 #ゲーム中の線の太さに戻す
ここまで

# 五芒星を描く関数
●(中心X, 中心Y, 半径)五芒星とは
    黄色に線色設定。
    頂点は[
        [中心X, 中心Y - 半径], # 1: 上
        [中心X + 半径 * SIN(PI * 72 / 180), 中心Y - 半径 * COS(PI * 72 / 180)], # 2: 右上
        [中心X + 半径 * COS(PI * 54 / 180), 中心Y + 半径 * SIN(PI * 54 / 180)], # 3: 右下
        [中心X - 半径 * COS(PI * 54 / 180), 中心Y + 半径 * SIN(PI * 54 / 180)], # 4: 左下
        [中心X - 半径 * SIN(PI * 72 / 180), 中心Y - 半径 * COS(PI * 72 / 180)] # 5: 左上
    ]
    [頂点[0][0], 頂点[0][1]]から[頂点[2][0], 頂点[2][1]]まで線描画。 # 1 -> 3
    [頂点[2][0], 頂点[2][1]]から[頂点[4][0], 頂点[4][1]]まで線描画。 # 3 -> 5
    [頂点[4][0], 頂点[4][1]]から[頂点[1][0], 頂点[1][1]]まで線描画。 # 5 -> 2
    [頂点[1][0], 頂点[1][1]]から[頂点[3][0], 頂点[3][1]]まで線描画。 # 2 -> 4
    [頂点[3][0], 頂点[3][1]]から[頂点[0][0], 頂点[0][1]]まで線描画。 # 4 -> 1
ここまで。

# 座標変換の関数
●(数学的X, 数学的Y)座標変換とは
    画面X = 数学的X + 300 # 画面の中央を原点とする
    画面Y = 250 - 数学的Y # Y軸を逆転させる
    [画面X, 画面Y]を戻す
ここまで

# 関数名を取得する関数
●関数名取得とは
    関数名 = ""
    もし グローバル関数番号 = 1 ならば
        関数名 = "関数：Y = - 3500 * 1 / X"
    違えば もし グローバル関数番号 = 2 ならば
        関数名 = "関数：Y = | 0.3X + 30 |"
    違えば もし グローバル関数番号 = 3 ならば
        関数名 = "関数：Y = 3500 * 1 / X"
    違えば もし グローバル関数番号 = 4 ならば
        関数名 = "関数：Y = - 0.003 * X ^2"
    違えば もし グローバル関数番号 = 5 ならば
        関数名 = "関数：Y = 0.007 * ( X - 50 )^2 - 150"
    違えば もし グローバル関数番号 = 6 ならば
        関数名 = "関数：Y = -0.006 * ( X + 70 )^2 + 200"
    違えば もし グローバル関数番号 = 7 ならば
        関数名 = "関数：Y = 120 * sin( X * 0.05 )"
    違えば もし グローバル関数番号 = 8 ならば
        関数名 = "関数：Y = 10 * tan( X * 0.0098 )"
    違えば もし グローバル関数番号 = 9 ならば
        関数名 = "関数：Y = X * sin( X * 0.05 )"
    違えば もし グローバル関数番号 = 10 ならば
        関数名 = "関数：Y = 5000 / X * sin( X * 0.05 )"
    ここまで
    関数名を戻す
ここまで

# 星のY座標を計算する関数
●Y座標計算とは
    もし グローバル関数番号 = 1 ならば
        もし (数学的X != 0)かつ(ABS(数学的X)>1)ならば
            Y = 整数変換( 3500 * 1 / 数学的X ) * (-1)
        違えば
            Y=5000 #警告回避策
        ここまで
    違えば もし グローバル関数番号 = 2 ならば
        Y = ABS( 整数変換( 0.3 * 数学的X + 30 ) )
    違えば もし グローバル関数番号 = 3 ならば
        もし (数学的X != 0) かつ(ABS(数学的X)>1)ならば
            Y = 整数変換( 3500 * 1 / 数学的X )
        違えば
            Y=5000 #警告回避策
        ここまで
    違えば もし グローバル関数番号 = 4 ならば
        Y = 整数変換( 0.003 * 数学的X * 数学的X ) * (-1)
    違えば もし グローバル関数番号 = 5 ならば
        Y = 整数変換( 0.007 * ( 数学的X - 50 ) * ( 数学的X - 50 ) - 150 )
    違えば もし グローバル関数番号 = 6 ならば
        Y = 整数変換( 0.006 * ( 数学的X + 70 ) * ( 数学的X + 70 ) - 200 ) * (-1)
    違えば もし グローバル関数番号 = 7 ならば
        Y = 整数変換( 120 * SIN( 数学的X * 0.05 ) )
    違えば もし グローバル関数番号 = 8 ならば
        Y = 整数変換( 10 * TAN( 数学的X * 0.0098 ) )
    違えば もし グローバル関数番号 = 9 ならば
        Y = 整数変換( 数学的X * SIN( 数学的X * 0.05 ) )
    違えば もし グローバル関数番号 = 10 ならば
        もし (数学的X != 0) かつ(ABS(数学的X)>1)ならば
            Y = 整数変換( 5000 / 数学的X * SIN( 数学的X * 0.05 ) )
        違えば
            Y=5000 #警告回避策
        ここまで
    ここまで
    Yを戻す
ここまで

# 星の動きを更新する関数
●星更新とは
    数学的Y = Y座標計算
    変換結果 = 座標変換(数学的X, 数学的Y)
    画面X = 変換結果[0]
    画面Y = 変換結果[1]
    五芒星(画面X, 画面Y, 星半径)

# 残像を保存
    残像 = { "残像X": 画面X, "残像Y": 画面Y }
    星残像に残像を配列追加

# 関数名を画面の左下に表示
    関数名 = 関数名取得()
    「24px sans-serif」に描画フォント設定
    白色に塗り色設定
    [10, 445]に関数名を文字描画。

# 星の座標を画面の左下に表示
    数学的X整数 = 数学的Xを整数変換
    数学的Y整数 = 数学的Yを整数変換
    座標テキスト = "星の座標（" & 数学的X整数 & " , " & 数学的Y整数 & " )"
    [10, 485]に座標テキストを文字描画

数学的X = 数学的X + 星移動速度
    もし 数学的X >= 300 ならば
        数学的X = -300
        グローバル関数番号 = グローバル関数番号 + 1
        星残像 = [] # 残像をリセット
        もし グローバル関数番号 > 10 ならば
            GameOverFlag = 1
        ここまで
    ここまで
ここまで

# 弾の動きを更新する関数
●弾更新とは
    5に線太設定
    もし、BulletActivate = 1ならば
        # 正六角形の描画と縮小
        角度 = 弾回転角度
        頂点 = []
        6回繰り返す
            ラジアン = 角度 * (PI / 180)
            頂点X = クリックX + 弾半径 * COS(ラジアン)
            頂点Y = クリックY + 弾半径 * SIN(ラジアン)
            頂点に[頂点X, 頂点Y]を追加
            角度 = 角度 + 60
        ここまで

# 頂点を結んで描画
        赤色に線色設定
        I = 0
        6回繰り返す
            [頂点[I][0], 頂点[I][1]]から[頂点[(I + 1) % 6][0], 頂点[(I + 1) % 6][1]]まで線描画
            I = I + 1
        ここまで

弾半径 = 弾半径 - 6
        弾回転角度 = 弾回転角度 + 5

もし、弾半径 <= 0ならば
            # 当たり判定
            当たり判定()
            BulletActivate = 0
            クリック地点X = 0
            クリック地点Y = 0
        ここまで
    ここまで
ここまで

# 当たり判定の関数
●当たり判定とは
    星位置 = 座標変換(数学的X, Y座標計算)
    距離X = ABS(クリック地点X - 星位置[0])
    距離Y = ABS(クリック地点Y - 星位置[1])
    距離 = SQRT(距離X^2 + 距離Y^2)
    もし 距離 <= 当たり判定距離 ならば
        スコア = スコア + 100
        ヒットX = 星位置[0]
        ヒットY = 星位置[1]
        ヒットフレーム = 50
    ここまで
ここまで

# メインループ関数
●メインループとは
    もし GameOverFlag = 0 ならば
        #全般的な線の太さ
        5に線太設定

# 画面をクリア
        黒色に塗色設定
        [0, 0, 600, 500]に四角描画

# X軸とY軸の描画
        軸描画

# 星の更新
        星更新

# 星残像の描画
        黄色に線色設定
        白色に塗り色設定
        1に線太設定
        星残像を反復
            [対象["残像X"], 対象["残像Y"]]へ3の円描画
        ここまで
        5に線太設定

# スコア表示
        「24px sans-serif」に描画フォント設定
        白色に塗り色設定
        スコアテキスト = "Score=" & スコア
        [10, 30]にスコアテキストを文字描画

# クリックした地点に＋マークを描く
        もし、BulletActivate = 1ならば
            白色に線色設定
            [クリック地点X - 10, クリック地点Y]から[クリック地点X + 10, クリック地点Y]まで線描画
            [クリック地点X, クリック地点Y - 10]から[クリック地点X, クリック地点Y + 10]まで線描画
        ここまで

# 弾の更新
        弾更新

# ヒットメッセージ表示
        もし ヒットフレーム > 0 ならば
            「24px sans-serif」に描画フォント設定
            白色に塗り色設定
            [ヒットX, ヒットY]に「Nice Hit!!」を文字描画
            ヒットY = ヒットY + 2
            ヒットフレーム = ヒットフレーム - 1
        ここまで

# 次のフレームの実行を予約
        もし、描画中ならば
            「メインループ」を画面更新時実行
        ここまで
    違えば
        # Game Overの表示
        「40px sans-serif」に描画フォント設定
        黄色に塗り色設定
        [180, 120]に「Game Over」を文字描画
        [150, 200]に「Your Score = {スコア}」を文字描画
    ここまで
ここまで

# クリックイベントの設定
描画中キャンバスをマウス押した時には
    もし、BulletActivate = 0ならば
        BulletActivate = 1
        クリックX = マウスX
        クリックY = マウスY
        クリック地点X = クリックX
        クリック地点Y = クリックY
        弾半径 = 200
        弾回転角度 = 0
    ここまで
ここまで

# メインループの開始
「メインループ」を画面更新時実行

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ