赛跑游戏半成品

最新推荐文章于 2024-07-20 18:16:53 发布

是吃货不是贝爷

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量148

点赞数

分类专栏： javascript 文章标签：新手前端小游戏赛跑

本文链接：https://blog.csdn.net/q4451728/article/details/89250355

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>赛跑小游戏</title>
        <link rel="shortcut icon" href="favicon.ico">
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            #div1{
                box-shadow: 1px 1px 5px grey;
                border :2px solid grey;
                border-radius: 5px 5px;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 10px;
                top: 10px;
                z-index: 1;
            }
            #div2{
                box-shadow: 1px 1px 5px green;
                border :2px solid green;
                border-radius: 5px;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 10px;
                top: 120px;
                z-index: 1;
            }
            #div3{
                box-shadow: 1px 1px 5px red;
                border :2px solid red;
                border-radius: 5px;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 10px;
                top: 230px;
                text-align: center;
                z-index: 1;
            }
            #div4{
                box-shadow: 1px 1px 5px aqua;
                border :2px solid aqua;
                border-radius: 5px;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 10px;
                top: 340px;
                z-index: 1;
            }
            #div5{
                width: 0px; 
                height: 1000px; 
                border-left: 1px solid black; 
                position: absolute;
                left: 1000px;
            }
            #div6{
                position: absolute;
                left: 25px;
                top: 460px;
            }
            #btn1{
                position: relative;
                top: 35px;
            }
        </style>
        <script>
            window.onload = function(){
                var Hero = [10,20,30,40];
                var speed = Hero[Math.floor(Math.random()*(Hero.length-1))];
                var labi = document.getElementById("div1");
                var suolong = document.getElementById("div2");
                var tongku = document.getElementById("div3");
                var paojie = document.getElementById("div4");
                var btn01 = document.getElementById("btn01");
                btn01.addEventListener("click",function(){onclickEvent(labi);});
                btn01.addEventListener("click",function(){onclickEvent(suolong);});
                btn01.addEventListener("click",function(){onclickEvent(tongku);});
                btn01.addEventListener("click",function(){onclickEvent(paojie);});
                var game;
                function onclickEvent(obj){
                    clearInterval(game);
                    game = setInterval(function(){
                        var formerLeft = obj.offsetLeft;
                        var nowLeft = parseInt(formerLeft) + speed;
                        obj.style.left = nowLeft + "px";
                        if(nowLeft > 950){
                            nowLeft = 950;
                        }
                        if(nowLeft == 950){
                            clearInterval(game);
                            alert("游戏结束");
                        }
                    },30)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <img src="labixiaoxin.jpg" width="100px" height="100px" alt="蜡笔小新">
        </div>
        <div id="div2">
            <img src="suolong.jpg" width="100px" height="100px" alt="索隆">
        </div>
        <div id="div3">
            <img src="nvwang.jpg" width="100px" height="100px" alt="痛苦女王"> 
        </div>
        <div id="div4">
            <img src="paojie.jpg" width="100px" height="100px" alt="炮姐">
        </div>
        <div id="div5">
        </div>
        <div id="div6">
            <button id="btn01">开始赛跑！</button>
        </div>     
    </body>
</html>

本来想制作一个赛跑游戏，但是在绑定按钮事件时候出现了问题。
一个按钮绑定多个事件（这个事件的参数值不同）时，前面的会被后面的覆盖
找了一下午仍然找不到方法
只能先将这个放着
如果有博友知道的希望能帮忙解答下，Thanks♪(･ω･)ﾉ
没有的话只能看之后能不能了解到什么方法。

是吃货不是贝爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
赛跑游戏半成品

<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>赛跑小游戏</title> <link rel="shortcut icon" href="favicon.ico">...
复制链接

扫一扫