[編集モード] ルーレット

ルーレットで数字を表示します

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,,initial-scale=1.0">
<script type="module" src="https://pyscript.net/releases/2025.8.1/core.js"></script>

<body>
    <div><button mpy-click="start">ルーレットを回す</button></div>
    <div id="image_area">
        <img id="roulette" src="https://n3s.nadesi.com/image.php?f=696.png">
    </div>
    <div id="disp"></div>
</body>

<style>
body { text-align:center; }
#disp { font-size:8em; color:white; }
#image_area { padding-top: 100px; }
#roulette {
    width:500px;
    height:500px;
}
/* 回転アニメーションを定義　*/
@keyframes spin {
    from { transform: rotate(0deg); }
    to      { transform: rotate(360deg); }
}
</style>
<script type="mpy">
    import random
    from pyscript import document
    from js import setTimeout

# ボタンをクリックされたときに呼び出される関数
    def start(event):
        # dispの内容をクリア(前回の結果を消す)
        disp = document.getElementById("disp")
        disp.innerHTML = ""
        # ルーレットのアニメーションを開始
        roulette = document.getElementById("roulette")
        roulette.style.animation = "spin 2s linear infinite"
        # 2秒後にstop関数を呼び出す
        setTimeout(stop, 2000)

# ルーレットを止める関数
    def stop():
        # 0から36の乱数を得る
        r = random.randint(0,36)
        # ルーレットの色を判定する ---
        if r == 0:
            color = "green"
        elif r % 2 == 0:
            color ="black"
        else:
            color = "red"
        # id属性がdispのものを取得
        disp = document.getElementById("disp")
        # dispのテキストを更新
        disp.innerHTML = f"<div style='background-color:{color}'>{r}</div>"
        # アニメーションを止める
        roulette = document.getElementById("roulette")
        roulette.style.animation = "none"
</script>

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] ルーレット

素材のアップロード