一大碗油茶

2017-12-08 09:44

碰壁反弹小游戏

本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载

利用碰壁反弹写的小游戏,可以积分,用左右键控制移动 由于小球是用border-radius写的,所以碰到边的时候可能会有一点问题 体验链接如下:http://www.qdfuns.com/notes/45682/28c4076859bdd0368bc2a5ef50176f63.html 喜欢的可以关注下哦!!!

具体代码如下

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title> 
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
        .outer{width:300px;height:450px;border:3px solid black;float:left;}
        #box{width:70px;height:15px;background-color:#52C6F3;position: absolute;bottom:5px;left:110px;}
        .ball{width:20px;height:20px;border-radius:10px;border:1px solid #A5E642;background-color: #A5E642;display: none}
        .outer{position: relative;}
        .ball{position: absolute;}
        .kongzhi{height:450px;width:110px;float:left;margin-left:10px;}
        button{border-radius: 10px;height: 25px;width:60px;}
        #df{position: absolute;top:150px;width:300px;display: none}
        h1{background-color: black;color:white;text-align: center;}
        #df h3{text-align: center;color:red;}
    </style>
</head>
<body>
    <div id="outer" class="outer">
        <div id="ball" class="ball"></div>
        <div id="box"></div>
        <div id="df">
            <h1>Game Over</h1>
            <h3 id="ff">得分:</h3>
        </div>

    </div>
    <div class="kongzhi">
        <button id="start">开始</button>
        <p style="color:skyblue">左右控制移动点击开始</p>
        <h2>得分:</h2>
        <h2 id="fs"></h2>
    </div>
<script>
    var z,y,n=0;
    var outer=document.getElementById('outer');
    var ball=document.getElementById('ball');
    var start=document.getElementById('start');
    var ff=document.getElementById('ff');
    var df=document.getElementById('df');
    var fs=document.getElementById('fs');
    var box=document.getElementById("box");
    var posX=150;
    var posY=0;
    var moveX=true;
    var moveY=true;
    var timer=null;
    var timer1,timer2;
    function clear(){
        clearInterval(timer);
        clearInterval(timer1);
        clearInterval(timer2);
    }
    window.onload=pos;
    function pos(){
        ball.style.left=posX+'px';
        ball.style.left=posY+'px';
    }
    start.onclick=function(){
        clear();
        ball.style.display="block";
        df.style.display="none";
        timer=setInterval(move,5);
        timer2=setInterval(function(){
            n=n+1;
            fs=n;
        },100)
        key();
        x=Math.round(Math.random()*300);//从第二次开始小球的位置随机开始
        posX=x;
        posY=0;
    }
    function move(){//小球的移动
        if(moveX){
            if(posX>0){
                posX--;
                ball.style.left=posX+'px';
            }else{
                moveX=false;
            }
        }
        else{
            if(posX<outer.clientWidth-ball.offsetWidth){
                posX++;
                ball.style.left=posX+'px';
            }else{
                moveX=true;
            }
        }
        if(moveY){
            if(posY>0){
                posY--;
                ball.style.top=posY+'px';
            }else{
                moveY=false;
            }
        }
        else{
            if(posY<outer.clientHeight-ball.offsetHeight-15){
                posY++;
                ball.style.top=posY+'px';
            }else{
                if(box.offsetLeft > ball.offsetLeft || (box.offsetLeft + box.offsetWidth) < ball.offsetLeft){
                    clear();
                    df.style.display="block";
                    ff="得分:"+n;
                    n=0;//判断小条是否接到小球,否,游戏结束
                }
                moveY=true;
            }
        }
    }

    function key(){
        document.onkeydown=function(ev) {
            var ev=ev||window;
            switch(ev.keyCode){
                case 37:
                        z=true;
                        break;
                case 39:
                        y=true;
                        break;
            }
        }
        document.onkeyup=function(ev) {
            var ev=ev||window;
            switch(ev.keyCode){
                case 37:
                        z=false;
                        break;
                case 39:
                        y=false;
                        break;
            }
        }
        timer1=setInterval(function() {
            if(z){
                if(box.offsetLeft > 0){
                    box.style.left = (box.offsetLeft-2 < 0? 0 : box.offsetLeft-2)+"px";
                }
            }
            if(y){
                if(box.offsetLeft < 230){
                    box.style.left = (box.offsetLeft+2 > 400? 400 : box.offsetLeft+2)+"px";
                    }
            }
        },10);//左右移动的小条
    }

</script>
</body>
</html>
1条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。