案例十四、游戏

于 2017-05-03 16:43:54 发布
阅读量575 收藏
点赞数
文章标签： html css 老虎机小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn_zsdf/article/details/71125212
版权

这里写图片描述

玩法就是，点击右边的摇杆，上面的水果图片就会一直不停的滚动，再点击右边的摇杆，就会停止滚动，此时就会判断三个图片是否一样，一样的话就会提示你赢了，否则提示继续加油！

首先利用html和css进行布局：

    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    #title{
        margin: 0 auto;
        width: 446px;
        height: 110px;
        background-image: url(./images/title.png);
    }

    #content {
            width:1024px;
            height:500px;
            background:url('./images/jiqi.png') no-repeat;
            background-position:70% 50%;
            position:relative;
    }

    #content #scroll1,#content #scroll2,#content #scroll3{
        width: 58px;
        height: 90px;
        position: absolute;
    }

      #content #scroll1{
            left:560px;
            top:212px;
            overflow:hidden;

        }
        #content #scroll2{
            left:626px;
            top:212px;
            overflow:hidden;
        }
        #content #scroll3{
            left:692px;
            top:212px;
            overflow:hidden;
        }
        ul{
            list-style:none;
        }

        ul img{
            width:58px;
            height:90px;
        }

        #content #yaogan{
            width: 107px;
            height: 243px;

            left: 770px;
            top:180px;
            position: absolute;
        }

        #content #yaogan button{
            width: 50px;
            height: 120px;
            background:url('./images/yaogan1.png') no-repeat;
            border:none;
            background-size:100% 100%;
        }


    </style>

<body>
<div id = "title">
</div>
<div id = "content">
    <div id = "scroll1">
        <ul id = "scroll1_ul">
            <li><img src="./images/p01.jpg"></li>
            <li><img src="./images/p02.jpg"></li>
            <li><img src="./images/p03.jpg"></li>
            <li><img src="./images/p04.jpg"></li>
            <li><img src="./images/p05.jpg"></li>
            <li><img src="./images/p06.jpg"></li>
            <li><img src="./images/p07.jpg"></li>
            <li><img src="./images/p08.jpg"></li>
            <li><img src="./images/p09.jpg"></li>
            <li><img src="./images/p10.jpg"></li>
        </ul>
    </div>

        <div id = "scroll2">
        <ul id = "scroll2_ul">
            <li><img src="./images/p01.jpg"></li>
            <li><img src="./images/p02.jpg"></li>
            <li><img src="./images/p03.jpg"></li>
            <li><img src="./images/p04.jpg"></li>
            <li><img src="./images/p05.jpg"></li>
            <li><img src="./images/p06.jpg"></li>
            <li><img src="./images/p07.jpg"></li>
            <li><img src="./images/p08.jpg"></li>
            <li><img src="./images/p09.jpg"></li>
            <li><img src="./images/p10.jpg"></li>
        </ul>
    </div>

        <div id = "scroll3">
        <ul id = "scroll3_ul">
            <li><img src="./images/p01.jpg"></li>
            <li><img src="./images/p02.jpg"></li>
            <li><img src="./images/p03.jpg"></li>
            <li><img src="./images/p04.jpg"></li>
            <li><img src="./images/p05.jpg"></li>
            <li><img src="./images/p06.jpg"></li>
            <li><img src="./images/p07.jpg"></li>
            <li><img src="./images/p08.jpg"></li>
            <li><img src="./images/p09.jpg"></li>
            <li><img src="./images/p10.jpg"></li>
        </ul>
    </div>

    <div id="yaogan">
        <button type="button"  id="mybu" onclick="action()"></button>
    </div>
</div>
</body>

先让图片滚动起来：

全局变量speed1、speed2、speed3分别产生三个随机的速度。
全局变量 time1、time2、time3分别产生三个随机的时间间隔。用来控制每个窗口图片滚动的时间间隔。
全局变量t1、 t2、 t3用来记录每个setInterval()的状态
全局变量pos1、pos2、pos3为距离图片顶部的高度
布尔变量bool用来确定是否是首次按下摇杆。

要使图片滚动起来：

//设置ul的滚动方式
    function scroll(){
        //设置每一个ul的随机速度
        speed1 = Math.floor(Math.random() * 10 + 3);
        speed2 = Math.floor(Math.random() * 10 + 3);
        speed3 = Math.floor(Math.random() * 10 + 3);

        //设置每一个ul的滚动时间
        time1 = Math.floor(Math.random() * 10 + 5);
        time2 = Math.floor(Math.random() * 10 + 5);
        time3 = Math.floor(Math.random() * 10 + 5);

        //通过计时器去调用方法，使得ul中的li可以有随机滚动的  时间间隔和速度
        t1 = setInterval("rotate1()", time1);
        t2 = setInterval("rotate2()", time2);
        t3 = setInterval("rotate3()", time3);
    }

   //图片进行滚动
    function rotate1(){
        pos1 -= speed1;
document.getElementById("scroll1_ul").style.marginTop=pos1+"px";
        if(pos1<=-900){
            pos1=0;
        }
    }

    function rotate2(){
        pos2 -= speed2;
        document.getElementById("scroll2_ul").style.marginTop=pos2+"px";
        if(pos2<=-900){
            pos2=0;
        }
    }

    function rotate3(){
        pos3 -= speed3;
         document.getElementById("scroll3_ul").style.marginTop=pos3+"px";
        if(pos3<=-900){
            pos3=0;
        }
    }

有了图片的滚动方式，现在就是怎样去调用。

在点击了摇杆之后，要判断是否是刚进来，还是要停止，就要用到全局的布尔变量。默认值为false；

function changgesetImg(){
document.getElementById("mybu").style.backgroundImage = "url(./images/yaogan1.png)";

    //bool默认只为false，如果满足if(bool)说明已经点击了摇杆，此时再点击时，就要停止图片的滚动，并进行判断

        if(bool){
            //先清空定时器
            clearInterval(t1);
            clearInterval(t2);
            clearInterval(t3);

            var pos_1 = Math.floor(pos1 * 95) / 95;
            var pos_2 = Math.floor(pos2 * 95) / 95;
            var pos_3 = Math.floor(pos3 * 95) / 95;
                        document.getElementById("scroll1_ul").style.marginTop = pos_1 + 'px';
            document.getElementById("scroll2_ul").style.marginTop = pos_2 + 'px';
            document.getElementById("scroll3_ul").style.marginTop = pos_3 + 'px';

            if(pos_1 == pos_2 && pos_1 == pos_3){
                alert("很棒哦!");
            }

            else{
                alert("继续加油!");
            }

        }

    //不满足的话，就说明是首次点击摇杆，那么就要进行图片的切换滚动。调用scroll()函数
    else{
            scroll();
        }

        bool = !bool;
}

点击了摇动杆之后，图片以自己的随机速度和随机时间进行切换
这里写图片描述

再次点击摇动杆，图片停止滚动，并进行判断
这里写图片描述

最后附上完整的源码

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
    <title>老虎机</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    #title{
        margin: 0 auto;
        width: 446px;
        height: 110px;
        background-image: url(./images/title.png);
    }

    #content {
            width:1024px;
            height:500px;
            background:url('./images/jiqi.png') no-repeat;
            background-position:70% 50%;
            position:relative;
    }

    #content #scroll1,#content #scroll2,#content #scroll3{
        width: 58px;
        height: 90px;
        position: absolute;
    }

      #content #scroll1{
            left:560px;
            top:212px;
            overflow:hidden;

        }
        #content #scroll2{
            left:626px;
            top:212px;
            overflow:hidden;
        }
        #content #scroll3{
            left:692px;
            top:212px;
            overflow:hidden;
        }
        ul{
            list-style:none;
        }

        ul img{
            width:58px;
            height:90px;
        }

        #content #yaogan{
            width: 107px;
            height: 243px;

            left: 770px;
            top:180px;
            position: absolute;
        }

        #content #yaogan button{
            width: 50px;
            height: 120px;
            background:url('./images/yaogan1.png') no-repeat;
            border:none;
            background-size:100% 100%;
        }


    </style>
</head>
<body>

<div id = "title">
</div>
<div id = "content">
    <div id = "scroll1">
        <ul id = "scroll1_ul">
            <li><img src="./images/p01.jpg"></li>
            <li><img src="./images/p02.jpg"></li>
            <li><img src="./images/p03.jpg"></li>
            <li><img src="./images/p04.jpg"></li>
            <li><img src="./images/p05.jpg"></li>
            <li><img src="./images/p06.jpg"></li>
            <li><img src="./images/p07.jpg"></li>
            <li><img src="./images/p08.jpg"></li>
            <li><img src="./images/p09.jpg"></li>
            <li><img src="./images/p10.jpg"></li>
        </ul>
    </div>

        <div id = "scroll2">
        <ul id = "scroll2_ul">
            <li><img src="./images/p01.jpg"></li>
            <li><img src="./images/p02.jpg"></li>
            <li><img src="./images/p03.jpg"></li>
            <li><img src="./images/p04.jpg"></li>
            <li><img src="./images/p05.jpg"></li>
            <li><img src="./images/p06.jpg"></li>
            <li><img src="./images/p07.jpg"></li>
            <li><img src="./images/p08.jpg"></li>
            <li><img src="./images/p09.jpg"></li>
            <li><img src="./images/p10.jpg"></li>
        </ul>
    </div>

        <div id = "scroll3">
        <ul id = "scroll3_ul">
            <li><img src="./images/p01.jpg"></li>
            <li><img src="./images/p02.jpg"></li>
            <li><img src="./images/p03.jpg"></li>
            <li><img src="./images/p04.jpg"></li>
            <li><img src="./images/p05.jpg"></li>
            <li><img src="./images/p06.jpg"></li>
            <li><img src="./images/p07.jpg"></li>
            <li><img src="./images/p08.jpg"></li>
            <li><img src="./images/p09.jpg"></li>
            <li><img src="./images/p10.jpg"></li>
        </ul>
    </div>

    <div id="yaogan">
        <button type="button"  id="mybu" onclick="action()"></button>
    </div>
</div>

<script type="text/javascript">

    var t1, t2, t3, 
        speed1, speed2, speed3, 
        time1, time2, time3, 
        pos1 = 0, 
        pos2 = 0, 
        pos3 = 0,
        bool = false;

    function action() {
        setTimeout("changeImg()", 200);
    }

    function changeImg(){
        document.getElementById('mybu').style.backgroundImage = "url(./images/yaogan2.png)";
        setTimeout("changesetImg()", 400);
    }


    //设置ul的滚动方式
    function scroll(){

        //设置每一个ul的随机速度
        speed1 = Math.floor(Math.random() * 10 + 3);
        speed2 = Math.floor(Math.random() * 10 + 3);
        speed3 = Math.floor(Math.random() * 10 + 3);

        //设置每一个ul的滚动时间
        time1 = Math.floor(Math.random() * 10 + 5);
        time2 = Math.floor(Math.random() * 10 + 5);
        time3 = Math.floor(Math.random() * 10 + 5);

        //通过计时器去调用方法，使得ul中的li可以滚动
        t1 = setInterval("rotate1()", time1);
        t2 = setInterval("rotate2()", time2);
        t3 = setInterval("rotate3()", time3);

    }

    function rotate1(){
        pos1 -= speed1;
         document.getElementById("scroll1_ul").style.marginTop=pos1+"px";
        if(pos1<=-900){
            pos1=0;
        }
    }

    function rotate2(){
        pos2 -= speed2;
         document.getElementById("scroll2_ul").style.marginTop=pos2+"px";
        if(pos2<=-900){
            pos2=0;
        }
    }

    function rotate3(){
        pos3 -= speed3;
         document.getElementById("scroll3_ul").style.marginTop=pos3+"px";
        if(pos3<=-900){
            pos3=0;
        }
    }


    function changesetImg(){
        document.getElementById("mybu").style.backgroundImage = "url(./images/yaogan1.png)";

        if(bool){
            //先清空定时器
            clearInterval(t1);
            clearInterval(t2);
            clearInterval(t3);

            var pos_1 = Math.floor(pos1 * 95) / 95;
            var pos_2 = Math.floor(pos2 * 95) / 95;
            var pos_3 = Math.floor(pos3 * 95) / 95;

            document.getElementById("scroll1_ul").style.marginTop = pos_1 + 'px';
            document.getElementById("scroll2_ul").style.marginTop = pos_2 + 'px';
            document.getElementById("scroll3_ul").style.marginTop = pos_3 + 'px';

            if(pos_1 == pos_2 && pos_1 == pos_3){
                alert("很棒哦!");
            }

            else{
                alert("继续加油!");
            }

        }
        else{
            scroll();
        }

        bool = !bool;

    }
</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值