赌马小游戏

根据自己所想思路写出来的小游戏，原生所写，代码略微臃肿，不过也容易看懂
HTML代码

    

    

    

    

    

    开始赛马

css代码

#paochang {
    height: 500px;
    width: 1000px;
    margin: 0 auto;
    border: 5px solid black;
    background: seagreen;
    position: relative;
}
            
#ma1 {
    width: 10px;
    height: 10px;
    background-color: deeppink;
    position: absolute;
    top: 50px;
    left: 0;
}
                
#ma2 {
    width: 10px;
    height: 10px;
    background-color: deepskyblue;
    position: absolute;
    top: 150px;
    left: 0;
}
            
#ma3 {
    width: 10px;                
        height: 10px;
    background-color: cadetblue;
    position: absolute;
    top: 250px;
    left: 0;
}
            
#ma4 {
    width: 10px;
    height: 10px;
    background-color: gold;
    position: absolute;
    top: 350px;
    left: 0;
}
            
#ma5 {
    width: 10px;
    height: 10px;
    background-color: gray;
    position: absolute;
    top: 450px;
    left: 0;
}
            
#go {
    position: absolute;
    top: 500px;
    left: 500px;
}

js代码

        var ma1 = document.getElementById('ma1');
        var ma2 = document.getElementById('ma2');
        var ma3 = document.getElementById('ma3');
        var ma4 = document.getElementById('ma4');
        var ma5 = document.getElementById('ma5');
        var go = document.getElementById('go');
        var bool = false;

        function random() {
            return Math.random() * (10 - 1) + 1;
        }
        
        go.onclick = function(){
            if(bool == false){
                bool = true;
                start();
            }
        }

        function start() {
            var timer = setInterval(function() {
                var ma1_left = ma1.offsetLeft;
                var ma2_left = ma2.offsetLeft;
                var ma3_left = ma3.offsetLeft;
                var ma4_left = ma4.offsetLeft;
                var ma5_left = ma5.offsetLeft;
                ma1_left += random();
                ma2_left += random();
                ma3_left += random();
                ma4_left += random();
                ma5_left += random();
                ma1.style.left = ma1_left + 'px';
                ma2.style.left = ma2_left + 'px';
                ma3.style.left = ma3_left + 'px';
                ma4.style.left = ma4_left + 'px';
                ma5.style.left = ma5_left + 'px';
                console.log(ma1_left);
                if(ma1_left >= 1000) {
                    alert('马1胜利');
                    window.location.reload();
                }
                if(ma2_left >= 1000) {
                    alert('马2胜利');
                    window.location.reload();
                }
                if(ma3_left >= 1000) {
                    alert('马3胜利');
                    window.location.reload();
                }
                if(ma4_left >= 1000) {
                    alert('马4胜利');
                    window.location.reload();
                }
                if(ma5_left >= 1000) {
                    alert('马5胜利');
                    window.location.reload();
                }
            }, 50)
        }

提一下所用到的几个要点
开始按钮，如果开始之后继续按失去效果
封装2个函数:随机函数，开始按钮函数
当判断出其中一匹马到终点之后弹出结果框，刷新页面
嗯，随心写的一个小游戏，有意见可提出 谢谢