html css js实现快递单打印_使用html+css+js实现弹球游戏

a7aeb1a31e343ac14f5e179d66ad1afd.png

php中文网最新课程

每日17点准时技术干货分享

530e4724a1782a194d02c55d3e82c3bc.png

5c27aea987dcbe16075a9f58c3c3bc14.gif

使用html+css+js实现弹球游戏

7ba8df6b99e8f442ff82efa0234a983b.png

代码如下,复制即可使用:
<head>    <style type="text/css">        .panel{            position: relative;            z-index: 0;            top:0px;            left: 400px;            width: 300px;            height: 500px;        }        .console{            position: absolute;            z-index: 1;            top:0;            left:0;            width:100%;            height: 40px;            background-color: #bbb;        }        .message{            position: absolute;            z-index: 1;            top:40px;            left:0;            width:100%;            height: 460px;            color: white;            font-size: 50px;            text-align: center;            line-height: 460px;            background-color: #999;        }        .start,.score,.pause{            position: absolute;            z-index: 2;            top: 0;            width: 100px;            height: 100%;            font-size: large;            color: white;            text-align: center;            line-height: 40px;            background: -webkit-linear-gradient(top,#4ca8ff,yellow);        }        .start{            left: 0px;        }        .score{            left:100px;            background-color: red;        }        .pause{            left:200px;        }        .start:after,.pause:before{            content: "";            position: absolute;            z-index: 2;            top: 0;            width: 3px;            height: 100%;            background: -webkit-linear-gradient(top,#666,#999);        }        .start:after{            left: 97px;        }        .pause:before{            left: 0px;        }        .start:hover,.pause:hover{            cursor: pointer;            background: -webkit-linear-gradient(top,#4ca8ff,red);        }        .panel span{            position: absolute;            z-index: 0;            top:50%;            left: 50%;            font-size: 50px;            color: blue;        }        .ball,.secondBall{            position:absolute;            z-index: 2;            border-radius:50%;            width: 20px;            height: 20px;        }        .ball{            top: 460px;            left:140px;            background-color: red;        }        .secondBall{            top: 40px;            left:140px;            background-color: red;        }        .plate{            position: absolute;            top:480px;            left: 100px;            z-index: 2;            width: 100px;            height: 20px;            background-color: #e5e5e5;        }        .promte{            margin-top: 20px;            text-align: center;        }style>head><body>    <div id="panel" class="panel">        <div class="console">            <div id="start" class="start">开始div>            <div id="score" class="score">0div>            <div id="pause" class="pause">暂停div>        div>        <div id="message" class="message">div>        <div id="ball" class="ball">div>        <div id="plate" class="plate">div>    div>    <div class="promte">提示:键盘左右箭头控制滑板div>    <script     type="text/javascript">        (function(){            document.onkeydown = function(e){                var e = e || window.event;                if(e.keyCode == 37){                    //键盘向左键                    plateMove("left");                }else if(e.keyCode == 39){                    //键盘向右键                    plateMove("right");                }            }        })();        var panel = document.getElementById("panel"),            message = document.getElementById("message"),            plate = document.getElementById("plate"),            ball = document.getElementById("ball"),            start = document.getElementById("start"),            score = document.getElementById("score"),            pause = document.getElementById("pause"),            secondBall;        var startGame, x = x2 = -1, y = y2 = -1, speed = 1, positionArr = [], pauseActive = false,            //一个标志:表示难度是否还能增加            flag = true,            //球的起始位置            ballX, ballY, secondBallX, secondBallY,            //边界            minX = 0,            maxX = panel.offsetWidth - ball.offsetWidth,            minY = 40;            maxY = panel.offsetHeight - ball.offsetHeight - plate.offsetHeight;        window.onload = function(){            if(window.addEventListener){                start.addEventListener("click",startClick,false);                pause.addEventListener("click",pauseClick,false);            }else if(window.attachEvent){                start.attachEvent("onclik",startClick);                pause.attachEvent("onclik",pauseClick);            }else{                start.onclik = startClick;                pause.onclik = pauseClick;            }        }                 function plateMove(direction){            if(direction == "left"){                if(plate.offsetLeft > 0){                    plate.style.left = (plate.offsetLeft-30 < 0? 0 : plate.offsetLeft-30)+"px";                }            }            if(direction == "right"){                if(plate.offsetLeft < 200){                    plate.style.left = (plate.offsetLeft+30 > 200? 200 : plate.offsetLeft+30)+"px";                }            }        }        function startClick(){            if(!pauseActive){                resetGame();            }else{                pauseActive = !pauseActive;            }            startGame = setInterval(function(){                //console.log(ballX+"======"+ballY);                positionArr = setPosition(ballX,ballY,true);                if(positionArr == "GAMEOVER"){                    return;                }                ballX = positionArr[0];                ballY = positionArr[1];                //设置球的位置                ball.style.left = ballX+"px";                ball.style.top = ballY+"px";                if(!flag){                    positionArr = setPosition(secondBallX,secondBallY,false);                    secondBallX = positionArr[0];                    secondBallY = positionArr[1];                    secondBall.style.left = secondBallX+"px";                    secondBall.style.top = secondBallY+"px";                }else{                    addDifficulty();                }            },30);        }        function pauseClick(){            pauseActive = true;            clearInterval(startGame);        }         function resetGame(){            clearInterval(startGame);            message.innerHTML="";            score.innerHTML="0";            ball.style.left = "140px";            ball.style.top = "460px";            plate.style.left = "100px";            plate.style.top = "480px";            ballX = ball.offsetLeft;            ballY = ball.offsetTop;            speed = 1;            flag = true;            //第二个球设置隐藏            if(secondBall){                secondBall.style.display="none";                secondBall.style.left = "140px";                secondBall.style.top = "40px";            }        }         function addDifficulty(){            if(parseInt(score.innerHTML) > 500 && parseInt(score.innerHTML) < 2000){                speed = 1.2;            }else if(parseInt(score.innerHTML) > 2000 && parseInt(score.innerHTML) < 5000){                speed = 1.5;            }else if(parseInt(score.innerHTML) > 5000){                if(typeof secondBall != "undefined"){                    secondBall.style.display="";                }else{                    secondBall = document.createElement('div');                }                                 secondBall.className = 'secondBall';                panel.appendChild(secondBall);                secondBallX = secondBall.offsetLeft;                secondBallY = secondBall.offsetTop;                flag = false;            }        }        function setPosition(_x,_y,firstball){            if(_x == minX || _x == maxX){                //x*=-1;                firstball? x*=-1 : x2*=-1;            }            if(_y == minY || _y == maxY){                //y*=-1;                firstball? y*=-1 : y2*=-1;            }            if(_y == maxY){                //判断挡板的位置是不是在球的范围内                if(plate.offsetLeft > _x || (plate.offsetLeft + plate.offsetWidth) < _x){                    clearInterval(startGame);                    message.innerHTML="GAMEOVER";                    return "GAMEOVER";                }            }            if(firstball){                _x+=4*x*speed;                _y+=5*y*speed;            }else{                _x+=4*x2*speed;                _y+=5*y2*speed;            }                         //边界处理            _x = _x < minX? minX : _x;            _x = _x > maxX? maxX : _x;                         _y = _y < minY? minY : _y;            _y = _y > maxY? maxY : _y;            //设置分数            score.innerHTML=parseInt(score.innerHTML)+10*speed;            return [_x,_y];        }script>body>html>

如果您有更好的方法或更多的功能,可以和我们大家一起分享,如有错误,欢迎联系我改正,非常感谢!!!

d471bab9349ca7169a12203287b05358.png

704f2139495213033c637928d5ccaa3e.png

4d4387adc7ef8526455830faa31959fd.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值