JavaScript で小学生の通過算を解いてみた！

はじめに

こんにちは。私は普段ある教育大学に通わせていただいているのですが、講義の課題で以下のようなものが出ました🤔

1両20ｍで10両編成、時速72Kmで走る上り電車と、1両20mで8両編成、時速90Kmで走る下り電車がすれ違います。すれ違い始めてからすれ違い終わるまでにかかる時間は何秒でしょうか。

これを面白く解いてみてください！とのことでした！
よく見かけるちょっと応用的な問題だな〜と感じながら、ちょうどJavaScriptのCanvasを使ってみたかったので、そちらで解いてみました！

実際の動作

コード

HTML

<div>
    <h3>問題3</h3>
    <p>1両20ｍで10両編成、時速72Kmで走る上り電車と、1両20mで8両編成、時速90Kmで走る下り電車がすれ違います。すれ違い始めてからすれ違い終わるまでにかかる時間は何秒でしょうか。</p>
    <h3>回答</h3>
    <div>
        <p>
            車両1：
            <input id="train1" value="10">
            <input type="hidden" id="train3" value="10">
            両編成　
            時速：
            <input id="speed1" value="72">
            Km
        </p>
        <p>
            車両2：
            <input id="train2" value="8">
            <input type="hidden" id="train4" value="8">
            両編成　
            時速：
            <input id="speed2" value="90">
            Km
        </p>
        <canvas width="500" height="100" id="canvas4">
            Canvas not supported.
        </canvas>
    </div>
</div>

JavaScript

//問3

let t = 0;
let s = 0;
let u = 0;

function Train1() {

    // 車両1の秒速
    var speed1 = document.getElementById('speed1');
    speed1 = parseInt(speed1.value);
    speed1 = speed1 / 100;

    // 車両2の秒速
    var speed2 = document.getElementById('speed2');
    speed2 = parseInt(speed2.value);
    speed2 = speed2 / 100;

    const canvas = document.getElementById('canvas4');
    var train1 = document.getElementById('train1');
    train1 = parseInt(train1.value);
    var train2 = document.getElementById('train2');
    train2 = parseInt(train2.value);
    var train3 = document.getElementById('train3');
    train3 = parseInt(train3.value);
    var train4 = document.getElementById('train4');
    train4 = parseInt(train4.value);
    if (typeof canvas.getContext === 'undefined') {
        return;
    }
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    var distance = 0;

    for(var i = 1; i <= train1; i ++){
        // 車体
        ctx.fillStyle = 'green';
        ctx.fillRect(20*(i)+2*(i-1)-10 + t, 10, 20, 10);
        // タイヤ
        ctx.beginPath();
        ctx.arc(15 + (i - 1)*22 + t, 20, 2, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(25 + (i - 1)*22 + t, 20, 2, 0, 2 * Math.PI);
        ctx.stroke();
        distance = 25 + (i - 1)*22;
    }

    for(var i = 1; i <= train2; i ++){
        // 車体
        ctx.fillStyle = 'orange';
        ctx.fillRect(distance+20*(i)+2*(i-1)-10 - s, 30, 20, 10);
        // タイヤ
        ctx.beginPath();
        ctx.arc(distance+15 + (i - 1)*22 - s, 40, 2, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(distance+25 + (i - 1)*22 - s, 40, 2, 0, 2 * Math.PI);
        ctx.stroke();
    }

    for(var i = 1; i <= train3; i ++){
        // 車体
        ctx.fillStyle = 'red';
        ctx.fillRect(20*(i)+2*(i-1)-10, 50, 20, 10);
        // タイヤ
        ctx.beginPath();
        ctx.arc(15 + (i - 1)*22, 60, 2, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(25 + (i - 1)*22, 60, 2, 0, 2 * Math.PI);
        ctx.stroke();
        distance = 25 + (i - 1)*22;
    }

    for(var i = 1; i <= train4; i ++){
        // 車体
        ctx.fillStyle = 'blue';
        ctx.fillRect(distance+20*(i)+2*(i-1)-10 - u, 70, 20, 10);
        // タイヤ
        ctx.beginPath();
        ctx.arc(distance+15 + (i - 1)*22 - u, 80, 2, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(distance+25 + (i - 1)*22 - u, 80, 2, 0, 2 * Math.PI);
        ctx.stroke();
    }

    t = t + speed1;
    s = s + speed2;
    u = u + speed1 + speed2;
    setTimeout(Train1, 30);
}

function Train2() {
    // 車両1の長さ
    var train1 = document.getElementById('train1');
    train1 = parseInt(train1.value);

    // 車両1の秒速
    var speed1 = document.getElementById('speed1');
    speed1 = parseInt(speed1.value);
    speed1 = speed1 * 1000;
    speed1 = speed1 / 3600;

    // 車両1の長さ
    var train2 = document.getElementById('train2');
    train2 = parseInt(train2.value);

    // 車両2の秒速
    var speed2 = document.getElementById('speed2');
    speed2 = parseInt(speed2.value);
    speed2 = speed2 * 1000;
    speed2 = speed2 / 3600;

    console.log('車両1の長さ' + train1 * 20 + 'm');
    console.log('車両1の秒速' + speed1 + 'm/s');
    console.log('車両2の長さ' + train2 * 20 + 'm');
    console.log('車両2の秒速' + speed2 + 'm/s');

    var distance = train1 * 20 + train2 * 20;
    var speed = speed1 + speed2;

    var second = distance / speed;
    console.log('すれ違う時間' + second + '秒');
    document.write("<p>すれ違う時間" + String(second) + "秒</p>");
}

Train1();
Train2();

コードはただ書き出しただけなので汚いです💦
実際の電車を表しているCanvasも同じくらいの時間ですれ違うようになっています。
→整合性が取れていなかったら、教えてください🙇‍♂️

最後に

小学校で、こんな感じの算数の授業をしたら面白いと思ってくれるでしょうか😄
算数・数学が好きな子が増えてくれたら嬉しいです！！！