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

中学生、高校生として数学で様々なグラフを学びます。楽しみながら数学のグラフを学習できるようゲーム化してみました。＜開発環境：なでしこ３、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 ここまで ここまで # メインループの開始 「メインループ」を画面更新時実行