碰壁反弹小游戏

本文作者: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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏walterlv - 吕毅的博客

分享一个算法,计算能在任何背景色上清晰显示的前景色

发布于 2017-11-04 14:51 更新于 2018-02...

8310
来自专栏web前端

JavaScript基础学习--03图片翻转

一、利用纯js编写,兼容IE9以及IE9以上       1、两张图片重合排放,并且背面的图片display(none)。         2、点击事件中让正面...

25750
来自专栏糊一笑

那些年下过的大雨

想了解一下用纯CSS和JS怎么实现一段下雨的动画,于是去CodePen上面搜了一下,发现了很多很有意思的东西。有空可以常去上面逛逛,在对技术产生敬畏的同时也能学...

35650
来自专栏企鹅号快讯

为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。 特别是如果将CSS Grid与...

30960
来自专栏游戏杂谈

社交应用动态九宫格图片的规则

iPhone6以下的设备(5s、SE、4s),判断条件同上,只是将512px改为200px

17410
来自专栏Young Dreamer

针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析

  最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr...

29750
来自专栏华章科技

PPT装逼指南

虽然不是所有人都有大型演讲的机会,但混迹职场Presentation谁都会轮到几次吧。

15930
来自专栏企鹅号快讯

技术干货:前端图形化技术简介(上)

Canvas与SVG 前端图形化技术,主要包括Canvas绘图和SVG绘图两类。 ? Canvas早在十几年前就被火狐浏览器引入。Canvas通过Canvas....

24570
来自专栏数据小魔方

R语言信息可视化——文字云

这一篇跟大家分享R语言信息可视化——文字云。 R语言可以轻松处理信息可视化,并且很早就有专用的信息可视化包——WordCloud。 可是这个第一版的文字云工具,...

42780
来自专栏技术总结

Swift3.1动画(一)

26050

扫码关注云+社区

领取腾讯云代金券