JavaScript实现的躲避球小游戏

最新推荐文章于 2018-07-19 09:21:07 发布

chulei9575

最新推荐文章于 2018-07-19 09:21:07 发布

阅读量409

点赞数

文章标签：游戏 javascript ViewUI

原文链接：https://my.oschina.net/u/1991426/blog/295870

版权

自己搜集了很多资料，看了很多视频，写了一个躲避球的游戏，本人还在学习阶段，写次文章也算是对自己所学的再一次领悟吧，请大神勿喷。

好了，话不多说了，直接进入主题。

首先创建一个游戏画面，当然本人只为实现功能，没有注重美观。

<body>
    <div id="big">
        <ul id="start">
            开始
        </ul>
        <ul id="again">
            再玩一次
        </ul>
     </div>
</body>

<style type="text/css">
*{
    margin: 0px;
    padding: 0px;
 }
#big{
    width: 800px;
    height:500px;
    background: #000;
    margin: 0px auto;
    position: absolute;
    overflow: hidden;
 }
#start{
    width: 100px;
    height: 40px;
    background: #ff0000;
    position: absolute;
    top: 500px;
    left: 350px;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    color: #aaa;
    z-index: 2;
    cursor: pointer;
 }
#again{
    width: 100px;
    height: 40px;
    background: #ff0000;
    position: absolute;
    top: 500px;
    left: 350px;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    color: #aaa;
    z-index: 3;
    cursor: pointer;
 }
</style>

另外还需要从<head>标签里引入一个animate的脚本文件,自己把路径改了就行。http://yun.baidu.com/share/link?shareid=1591801040&uk=522145410 可以去网盘里下载。

<head>
    <script src="animate.js"></script>
</head>

下面就开始写我们的脚本了，我直接把注释写在页面里了，大家可以根据注释学习

<script>
    window.onload = function(){
        var big = document.getElementById('big');
        var start = document.getElementById('start');
        var again = document.getElementById('again');
        //myAnimate是写在animate.js里的
        myAnimate(start,{top:(big.offsetHeight-start.offsetHeight)/2},400);//设置开始按钮的位置
        again.onclick=start.onclick = function(){//开始按钮和再玩一次调用同一个函数
            myAnimate(start,{top:big.offsetHeight},400);//点击开始按钮后，开始按钮回到游戏框的下方。
            myAnimate(again,{top:big.offsetHeight},400);//点击再玩一次按钮，同样的效果。
            var alldivs = big.getElementsByTagName('div');//将游戏角色和障碍物放在一个数组里
            var length = alldivs.length;//数组的长度
            if(lenth>0){//数组的长度大于0，说明游戏窗体里有存在的div
                for(var i =0;i<length;i++){
                    big.removeChild(alldivs[0]);//清楚游戏窗体的div（此处是游戏结束时发生的）
                }
            }
            //创建游戏角色
            var target = document.createElement('div');
            big.appendChild(target);
            //设置游戏角色的样式
            css(target,"width",25);
            css(target,"height",25);
            css(target,"backgroundColor","#ff0000");
            css(target,"position","absolute");
            css(target,"top",(big.offsetHeight-target.offsetHeight)/2);
            css(target,"left",(big.offsetWidth-target.offsetWidth)/2);
            //创建障碍物，并让障碍物运动起来
            function create(){
                var arr = [];//创建一个数组，为了将障碍物都放进去
                var arrl = [];//设置障碍物的offsetLeft
                var arrt = []；//设置障碍物的offsetTop
                //创建游戏窗体左右两边的障碍物
                for(var i=0;i<=30;i++){
                    var attr1 = [0,800];//800是游戏窗体的width
                    var attr1index = Math.floor(Math.random()*attr1.length);//生成随机数
                    var l = attr1[attr1index];//取出随机数
                    var divs = document.createElement('div');
                    big.appendChild(divs);
                    //设置障碍物的样式
                    css(divs,"width",(1+Math.random())*4);
                    css(divs,"height",(1+Math.random())*4);
                    css(divs,"backgroundColor",randcolor());
                    css(divs,"position","absolute");
                    css(divs,"top",big.offsetHeight*Math.random());
                    判断游戏窗体的左右
                    if(l==0){
                        css(divs,"left",l-Math.random()*20);//此处的20随便更改
                    }else{
                        css(divs,"left",l+Math.random()*20);
                    }
                    arr.push(divs);
                    arrl.push(divs.offsetLeft);
                    arrt.push(divs.offsetTop);
                }
                //创建游戏窗体上下的障碍物
                for(var i=0;i<=30;i++){
                    var attr2 = [0,500];
                    var attr2index = Math.floor(Math.random()*attr2.length);//生成随机数
                    var l = attr2[attr2index];//取出随机数
                    var divs = document.createElement('div');
                    big.appendChild(divs);
                    css(divs,"width",(1+Math.random())*4);
                    css(divs,"height",(1+Math.random())*4);
                    css(divs,"backgroundColor",randcolor());
                    css(divs,"position","absolute");
                    css(divs,"left",big.offsetWidth*Math.random());
                    判断游戏窗体的上下
                    if(t==0){
                        css(divs,"top",t-Math.random()*20);
                    }else{
                        css(divs,"top",t+Math.random()*20);
                    }
                    arr.push(divs);
                    arrl.push(divs.offsetLeft);
                    arrt.push(divs.offsetTop);
                }
                //让障碍物朝着游戏角色的方向运动起来
                for(var i=0;i<arr.length;i++){
                    (function(){
                        myAnimate(arr[i],{top:(target.offsetTop)*2-arrt[i]+Math.random()*120,le                        ft:(target.offsetLeft)*2-arrl[i]+Math.random()*120},5000*(1+Math.random                        ()),Tween.Leaner,function(){
                            big.removeChild(arr[i]);arrt=[];arrl=[];
                        },target,again);
                    })(i)
                }
            }
            create();
            target.time = setInterval(function(){
                create();
            },6000)
            //方向键控制游戏角色的运动
            document.onkeydown =function(){
                var ev = e||window.event;//区分IE和其他浏览器
                //左方向键
                if(ev.keyCode==37){
                    document.t = setInterval(function(){
                        if(target.offsetLeft<=0){
                            clearInterval(document.t);
                            target.style.left = 0+"px";
                        }else{
                            target.style.left = target.offsetLeft-7 +"px";
                        }
                    },30)
                }
                //上方向键
                if(ev.keyCode==38){
                    document.t = setInterval(function(){
                        if(target.offsetTop<=0){
                            clearInterval(document.t);
                            target.style.top = 0+"px";
                        }else{
                            target.style.top = target.top-7+"px";
                        }
                    },30)
                }
                //右方向键
                if(ev.keyCode==39){
                    document.t = setInterval(function(){
                        if(target.offsetLeft>=big.offsetWidth-target.offsetWidth){//需要自己体会
                            clearInterval(document.t);
                            target.style.left = big.offsetWidth-target.offsetWidth+"px";
                        }else{
                            target.style.left = target.left+7+"px";  
                        }
                    },30)
                }
                //下方向键
                if(ev.keyCode==40){
                    document.t = setInterval(function(){
                        if(target.offsetTop>=big.offsetHeight-target.offsetHeight){
                            clearInterval(document.t);
                            target.style.top = big.offsetHeight-target.offsetHeigth+"px";
                        }else{
                            target.style.top = target.top+7+"px";
                        }
                    },30)
                }
            }
            //按键弹起时取消计时器
            document.onkeyup = function(){
                clearInterval(document.t);
                document.t = null;
            }
            //创建随机颜色
            function randcolor(){
                return "rgb("+Math.ceil(255*Math.random())+","+Math.ceil(255*Math.random())+","                +Math.ceil(255*Math.random())+")";
            }        
        }
    }
</script>

关于躲避球游戏的代码就是以上这些了，本人还是个新手，也是第一次写这种博客，代码的质量不高，逻辑可能也不够清晰，请大家见谅。

转载于:https://my.oschina.net/u/1991426/blog/295870

chulei9575

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现的躲避球小游戏

自己搜集了很多资料，看了很多视频，写了一个躲避球的游戏，本人还在学习阶段，写次文章也算是对自己所学的再一次领悟吧，请大神勿喷。好了，话不多说了，直接进入主题。首先创建一个游戏画面，当然本人只为实现功能，没有注重美观。 <body>&l...
复制链接

扫一扫