ひっ算やってみよう by 最上（もがみ）

# -----------------------------------
# --- ひっ算やってみよう　version1.2
# --- 三桁までの足し算と引き算のひっ算をします。
# --- 手順を一つずつ書き足していきます、戻ることもできます。
# --- たしかめ算まで、がっつりやります。
# --- 計算画面と操作エリアのバランスを調整しました
# -----------------------------------

# 初期値
大=0 // 大文字用インデックス
小=1 // 小文字用インデックス
余白大=10
余白小=3
たて大=40
たて小=15
よこ大=30
よこ小=15
文字大=40
文字中=25
文字小=15
手順={}
手順数=0
TCNT=0 // タイマー呼び出し回数
OFFSET=200 // オフセットたしかめ算用


# 描画情報
上百位=[余白大*2+よこ大*1, 余白大*1+たて小*1+余白小*1+たて大*1]
上十位=[余白大*3+よこ大*2, 余白大*1+たて小*1+余白小*1+たて大*1]
上一位=[余白大*4+よこ大*3, 余白大*1+たて小*1+余白小*1+たて大*1]

演算記号=[余白大*1+よこ大*0, 余白大*2+たて小*1+余白小*1+たて大*2]

下百位=[余白大*2+よこ大*1, 余白大*2+たて小*1+余白小*1+たて大*2]
下十位=[余白大*3+よこ大*2, 余白大*2+たて小*1+余白小*1+たて大*2]
下一位=[余白大*4+よこ大*3, 余白大*2+たて小*1+余白小*1+たて大*2]

横棒=[  [余白大*1+よこ大*0,下百位[1]+余白大/2],
        [下一位[0]+よこ大*1,下百位[1]+余白大/2]]

答千位=[余白大*1+よこ大*0, 余白大*3+たて小*1+余白小*1+たて大*3]
答百位=[余白大*2+よこ大*1, 余白大*3+たて小*1+余白小*1+たて大*3]
答十位=[余白大*3+よこ大*2, 余白大*3+たて小*1+余白小*1+たて大*3]
答一位=[余白大*4+よこ大*3, 余白大*3+たて小*1+余白小*1+たて大*3]

百補助=[上十位[0]-余白大-よこ小,余白大*1+たて小*1]
十補助１=[上十位[0],余白大*1+たて小*1]
十補助２=[十補助１[0]+よこ小+余白小,十補助１[1]]
一補助=[上一位[0],余白大*1+たて小*1]

引き算矢印１=[[答一位[0]+よこ大+余白大, 答一位[1]-たて大/2], [OFFSET, 上一位[1]-たて大/2]]
引き算矢印２=[[下一位[0]+よこ大+余白大, 下一位[1]-たて大/2], [OFFSET, 下一位[1]-たて大/2]]
足し算矢印１=[[上一位[0]+よこ大+余白大, 上一位[1]-たて大/2], [OFFSET, 下一位[1]-たて大/2]]
足し算矢印２=[[下一位[0]+よこ大+余白大, 下一位[1]-たて大/2], [OFFSET, 上一位[1]-たて大/2]]

# --- 画面表示
「３けたまでの数字を入力して、計算開始ボタンをおしてね。」のラベル作成。改行作成。
「式：」のラベル作成。
空のエディタ作成して、上段エディタに代入。
["＋","－",]のセレクトボックス作成し、演算セレクトに代入。
演算セレクトに「"＋"」をテキスト設定
空のエディタ作成して、下段エディタに代入。改行作成。

// エディタサイズ調整
上段エディタに｛
    「width」:「100px」、
    ｝をDOMスタイル一括設定
下段エディタに｛
    「width」:「100px」、
    ｝をDOMスタイル一括設定

["自動","手動",]のセレクトボックス作成し、再生種類セレクトに代入。   
再生種類セレクトに「手動」をテキスト設定
「＜もどる」のボタン作成して、コマ戻りボタンに代入
「計算開始」のボタン作成して、計算開始ボタンに代入。
「すすむ＞」のボタン作成して、コマ送りボタンに代入。改行作成。

#-----------------
コマ戻りボタンをクリックした時には、
    もし、TCNT>0ならば
        TCNT=TCNT-1
        全描画クリア
        Nを0からTCNTまで繰り返す
            手順表示(手順[N])
        ここまで
    ここまで
ここまで

#-----------------
計算開始ボタンをクリックした時には、
    //「計算開始ボタンクリック」と表示
    
    // 入力チェック
    a=(上段エディタのテキスト取得を英数半角変換)*1
    b=(下段エディタのテキスト取得を英数半角変換)*1
    c=演算セレクトのテキスト取得

    もし、((a<0)または(a>999))ならば
        「最初の数は3桁までの自然数を入力してください」と言う。戻る。
    ここまで
    もし、((b<0)または(b>999))ならば
        「二つ目の数は3桁までの自然数を入力してください」と言う。戻る。
    ここまで
    もし、(c="－")ならば
        もし、(a<b)ならば
            「引き算できません」と言う。戻る。
        ここまで
    ここまで
    
    手順={}
    手順数=0
    a=上段エディタのテキスト取得
    b=下段エディタのテキスト取得
    f=演算セレクトのテキスト取得
    手順作成(0, a, b, f, "")。
    もし、f="－"ならば
        c=(aを英数半角変換)-(bを英数半角変換)
        手順作成(OFFSET, c, b, "＋", "引き算たしかめ" )。
    違えば
        // 入れ替えてたしかめる
        手順作成(OFFSET, b, a, f, "足し算たしかめ")。
    ここまで
    
    // 初期化
    全タイマー停止。
    TCNT=0
    全描画クリア
    
    もし、(再生種類セレクトのテキスト取得)="自動"ならば
        「自動表示」を1秒毎。
    違えば
        手順表示(手順[TCNT])
    ここまで
ここまで

#-----------------
コマ送りボタンをクリックした時には、
    //「コマ送り」と表示

    もし、TCNT<((手順の配列要素数)-1)ならば、
        TCNT=TCNT+1
        全描画クリア
        Nを0からTCNTまで繰り返す
            手順表示(手順[N])
        ここまで
    ここまで
ここまで

#---------------------------------------------
●手順作成(X, a, b, f, tasikame)
    // X:offset a:上の数 b:下の数 f:演算
    //「手順作成」と表示
    
    数字情報生成(a)
    上数字情報=それ
    数字情報生成(b)
    下数字情報=それ
    
    // 0 式表示                 [ x座標,    y座標  ]の位置に、　　　文字を表示　みたいな情報
    もし、X=0ならば
        手順["{手順数}"]=["はじめの式表示", X+上百位[0], 上百位[1], 上数字情報[2],
                                X+上十位[0], 上十位[1], 上数字情報[3],
                                X+上一位[0], 上一位[1], 上数字情報[4],
                                X+演算記号[0], 演算記号[1], f
                                X+下百位[0], 下百位[1], 下数字情報[2],
                                X+下十位[0], 下十位[1], 下数字情報[3],
                                X+下一位[0], 下一位[1], 下数字情報[4],
                                X+横棒[0][0], 横棒[0][1], X+横棒[1][0], 横棒[1][1]
                                ]
    違えば
        手順["{手順数}"]=["たしかめの式表示", X+上百位[0], 上百位[1], 上数字情報[2],
                                X+上十位[0], 上十位[1], 上数字情報[3],
                                X+上一位[0], 上一位[1], 上数字情報[4],
                                X+演算記号[0], 演算記号[1], f
                                X+下百位[0], 下百位[1], 下数字情報[2],
                                X+下十位[0], 下十位[1], 下数字情報[3],
                                X+下一位[0], 下一位[1], 下数字情報[4],
                                X+横棒[0][0], 横棒[0][1], X+横棒[1][0], 横棒[1][1],
                                tasikame
                                ]
    ここまで
    手順数 = (手順数+1)
        
    もし、(f="＋")ならば
        足し算手順(上数字情報, 下数字情報,X)
    違えば
        ans=(上数字情報[0]-下数字情報[0])
        引き算手順(上数字情報, 下数字情報,X)
    ここまで
    
ここまで

#---------------------------------------------
●足し算手順(a, b, X)
    //「足し算手順」と表示
    // 一の位
    tmp=a[4]*1+b[4]*1 // 数値として計算
    kuriagari = 0
    もし、tmpが10以上ならば
        もし、((a[3]="")かつ(b[3]=""))ならば // 一桁計算の場合　ここでおしまい
            手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], "1", 文字大]
            手順数 = (手順数+1)
            手順["{手順数}"]=["一の位計算", X+答一位[0], 答一位[1], (tmp-10), 文字大]
            手順数 = (手順数+1)
            戻る。
        違えば
            手順["{手順数}"]=["十の位補助２", X+十補助２[0], 十補助２[1], "1", 文字小]
            手順数 = (手順数+1)
            手順["{手順数}"]=["一の位計算", X+答一位[0], 答一位[1], (tmp-10), 文字大]
            手順数 = (手順数+1)
            kuriagari = 1
        ここまで
    違えば
        手順["{手順数}"]=["一の位計算", X+答一位[0], 答一位[1], tmp, 文字大]
        手順数 = (手順数+1)
        もし、((a[3]="")かつ(b[3]=""))ならば // 一桁計算の場合　ここでおしまい
            戻る。
        ここまで
    ここまで
    
    // 十の位
    tmp=a[3]*1+b[3]*1+kuriagari*1 // 数値として計算
    kuriagari = 0
    もし、tmpが10以上ならば
        もし、((a[2]="")かつ(b[2]=""))ならば // 二桁計算の場合　ここでおしまい
            手順["{手順数}"]=["百の位計算", X+答百位[0], 答百位[1], "1", 文字大]
            手順数 = (手順数+1)
            手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], (tmp-10), 文字大]
            手順数 = (手順数+1)
            戻る。
        違えば
            手順["{手順数}"]=["百の位補助", X+百補助[0], 百補助[1], "1", 文字小]
            手順数 = (手順数+1)
            手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], (tmp-10), 文字大]
            手順数 = (手順数+1)
            kuriagari = 1
        ここまで
    違えば
        手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], tmp, 文字大]
        手順数 = (手順数+1)
        もし、((a[2]="")かつ(b[2]=""))ならば // 二桁計算の場合　ここでおしまい
            戻る。
        ここまで
    ここまで
    
    // 百の位
    tmp=a[2]*1+b[2]*1+kuriagari*1 // 数値として計算
    kuriagari = 0
    もし、tmpが10以上ならば
        手順["{手順数}"]=["千の位表示", X+答千位[0], 答千位[1], "1", 文字大]
        手順数 = (手順数+1)
        手順["{手順数}"]=["百の位計算", X+答百位[0], 答百位[1], (tmp-10), 文字大]
        手順数 = (手順数+1)
        kuriagari = 1
    違えば
        手順["{手順数}"]=["百の位計算", X+答百位[0], 答百位[1], tmp, 文字大]
        手順数 = (手順数+1)
    ここまで
    
ここまで

#---------------------------------------------
●引き算手順(a, b, X)
    //「引き算手順」と表示
    
    // 一の位引き算
    tmp=a[4]*1-b[4]*1
    kurisagari10 = a[3]*1
    kurisagari100 = a[2]*1
    もし、tmp<0ならば
        // 十の位から繰り下がり
        kurisagari10 = kurisagari10 -1
        tmp = tmp + 10
        もし、kurisagari10<0ならば
            // さらに百の位から繰り下がり
            kurisagari100 = kurisagari100 -1
            kurisagari10 = kurisagari10 + 10
            手順["{手順数}"]=["百の位補助訂正あり", X+百補助[0], 百補助[1], kurisagari100, 文字小]
            手順数 = (手順数+1)
        ここまで
        
        手順["{手順数}"]=["十の位補助２訂正あり", X+十補助２[0], 十補助２[1], kurisagari10, 文字小]
        手順数 = (手順数+1)
        手順["{手順数}"]=["一の位補助", X+一補助[0], 一補助[1], "1", 文字小]
        手順数 = (手順数+1)
    ここまで
    手順["{手順数}"]=["一の位計算", X+答一位[0], 答一位[1], tmp, 文字大]
    手順数 = (手順数+1)
    もし、((kurisagari10=0)かつ(b[3]="")かつ(a[2]=""))ならば // 一桁計算の場合　ここでおしまい
        戻る。
    ここまで
    
    // 十の位
    tmp = kurisagari10*1 - b[3]*1
    もし、tmp<0ならば
        // 百の位から繰り下がり
        kurisagari100 = kurisagari100 -1
        手順["{手順数}"]=["百の位補助訂正あり", X+百補助[0], 百補助[1], kurisagari100, 文字小]
        手順数 = (手順数+1)
        手順["{手順数}"]=["十の位補助１", X+十補助１[0], 十補助１[1], "1", 文字小]
        手順数 = (手順数+1)
        tmp = tmp + 10
    ここまで
    手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], tmp, 文字大]
    手順数 = (手順数+1)
    もし、((a[2]="")かつ(b[2]=""))ならば // 一桁計算の場合　ここでおしまい
        戻る。
    ここまで
    
    // 百の位
    tmp = kurisagari100*1 - b[2]*1
    もし、tmp=0ならば
        戻る。// 0は書かない
    ここまで
    手順["{手順数}"]=["百の位計算", X+答百位[0], 答百位[1], tmp, 文字大]
    手順数 = (手順数+1)
ここまで

#---------------------------------------------
●数字情報生成(PRM)
    //「数字情報生成」と表示
    // 引数の文字数字を、桁ごとにばらばらにしたり、計算用に数値変換したりする
    // [0]:全体数値 [1]:千の位 [2]:百の位 [3]:十の位 [4]:一の位
    INF=["","","","",""]
    
    INF[0]=(PRMを英数半角変換)
        
    tmp=INF[0]を文字列分解
    Nを1から(tmpの配列要素数)まで繰り返す
        INF[5-N]=tmp[(tmpの配列要素数)-N]
    ここまで
    
    INFを戻すこと
ここまで

#---------------------------------------------
●式表示(PRM)
    //「式表示」と表示
    「rgba(0,0,255,.5)」に塗色設定。
    
    黒色に塗色設定。
    「{文字大}px sans-serif」に描画フォント設定。
    
    // 上の数字。
    [PRM[1], PRM[2]]へPRM[3]を文字描画。
    [PRM[4], PRM[5]]へPRM[6]を文字描画。
    [PRM[7], PRM[8]]へPRM[9]を文字描画。

    // 記号
    [PRM[10], PRM[11]]へPRM[12]を文字描画。
    
    // 下の数字
    [PRM[13], PRM[14]]へPRM[15]を文字描画。
    [PRM[16], PRM[17]]へPRM[18]を文字描画。
    [PRM[19], PRM[20]]へPRM[21]を文字描画。

    // 線
    [PRM[22], PRM[23]]から[PRM[24], PRM[25]]まで線描画。
    
ここまで



#---------------------------------------------
●自動表示とは
    もし、TCNT<(手順の配列要素数)ならば
        手順表示(手順[TCNT])
        TCNT=TCNT+1
    ここまで
    
ここまで

#---------------------------------------------
●手順表示(TEJUN)とは
    //「手順表示({TEJUN})」と表示。
    // 式表示,一の位計算,十の位計算,百の位計算,一の位補助,十の位補助１,十の位補助２,百の位補助,千の位表示
    
    もし、TEJUN[0]="はじめの式表示"ならば
        // 上百、上十、上一、演算記号、下百、下十、下一の数字を描画
        「{文字中}px sans-serif」に描画フォント設定。
        [余白大, 答千位[1]+たて大+余白大]へ"計算してみよう"を文字描画。
        式表示(TEJUN)
    違えば
        もし、TEJUN[0]="たしかめの式表示"ならば
            「{文字中}px sans-serif」に描画フォント設定。
            [OFFSET+余白大, 答千位[1]+たて大+余白大]へ"確認してみよう"を文字描画。
            // 矢印描画
            もし、TEJUN[26]="引き算たしかめ"ならば
                引き算たしかめ用矢印描画
            違えば
                足算たしかめ用矢印描画
            ここまで

            式表示(TEJUN)
        違えば
            「{TEJUN[4]}px sans-serif」に描画フォント設定。
            [TEJUN[1], TEJUN[2]]へTEJUN[3]を文字描画。
            もし、TEJUN[0]="百の位補助訂正あり"ならば
                百位訂正
            ここまで
            もし、TEJUN[0]="十の位補助２訂正あり"ならば
                十位訂正
            ここまで
        ここまで
    ここまで
    

ここまで

#---------------------------------------------
●百位訂正
    [上百位[0], 上百位[1]-たて大*4/5]から[上百位[0]+よこ大, 上百位[1]]まで線描画。
ここまで

#---------------------------------------------
●十位訂正
    [上十位[0], 上十位[1]-たて大*4/5]から[上十位[0]+よこ大, 上十位[1]]まで線描画。
ここまで


#---------------------------------------------
●足算たしかめ用矢印描画
    足し算矢印１[0]から[足し算矢印１[0][0]+10, 足し算矢印１[0][1]]まで線描画。
    [足し算矢印１[0][0]+10, 足し算矢印１[0][1]]から[足し算矢印１[1][0]-10, 足し算矢印１[1][1]]まで線描画。
    [足し算矢印１[1][0]-10, 足し算矢印１[1][1]]から足し算矢印１[1]まで線描画。
    [足し算矢印１[1][0]-5, 足し算矢印１[1][1]-5]から足し算矢印１[1]まで線描画。
    [足し算矢印１[1][0]-5, 足し算矢印１[1][1]+5]から足し算矢印１[1]まで線描画。
    
    足し算矢印２[0]から[足し算矢印２[0][0]+10, 足し算矢印２[0][1]]まで線描画。
    [足し算矢印２[0][0]+10, 足し算矢印２[0][1]]から[足し算矢印２[1][0]-10, 足し算矢印２[1][1]]まで線描画。
    [足し算矢印２[1][0]-10, 足し算矢印２[1][1]]から足し算矢印２[1]まで線描画。
    [足し算矢印２[1][0]-5, 足し算矢印２[1][1]-5]から足し算矢印２[1]まで線描画。
    [足し算矢印２[1][0]-5, 足し算矢印２[1][1]+5]から足し算矢印２[1]まで線描画。
ここまで

#---------------------------------------------
●引き算たしかめ用矢印描画
    引き算矢印１[0]から[引き算矢印１[0][0]+10, 引き算矢印１[0][1]]まで線描画。
    [引き算矢印１[0][0]+10, 引き算矢印１[0][1]]から[引き算矢印１[1][0]-10, 引き算矢印１[1][1]]まで線描画。
    [引き算矢印１[1][0]-10, 引き算矢印１[1][1]]から引き算矢印１[1]まで線描画。
    [引き算矢印１[1][0]-5, 引き算矢印１[1][1]-5]から引き算矢印１[1]まで線描画。
    [引き算矢印１[1][0]-5, 引き算矢印１[1][1]+5]から引き算矢印１[1]まで線描画。
    
    引き算矢印２[0]から[引き算矢印２[0][0]+10, 引き算矢印２[0][1]]まで線描画。
    [引き算矢印２[0][0]+10, 引き算矢印２[0][1]]から[引き算矢印２[1][0]-10, 引き算矢印２[1][1]]まで線描画。
    [引き算矢印２[1][0]-10, 引き算矢印２[1][1]]から引き算矢印２[1]まで線描画。
    [引き算矢印２[1][0]-5, 引き算矢印２[1][1]-5]から引き算矢印２[1]まで線描画。
    [引き算矢印２[1][0]-5, 引き算矢印２[1][1]+5]から引き算矢印２[1]まで線描画。
ここまで