JavaScript实现的躲避球小游戏

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

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

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

<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，说明游戏窗体里有存在的divfor(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 = [];//设置障碍物的offsetLeftvar arrt = []；//设置障碍物的offsetTop//创建游戏窗体左右两边的障碍物for(var i=0;i<=30;i++){var attr1 = [0,800];//800是游戏窗体的widthvar 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

JavaScript实现的躲避球小游戏相关推荐

python小游戏-16行代码实现3D撞球小游戏！-源码下载
python小游戏-16行代码实现3D撞球小游戏!-源码下载所属网站分类: 资源下载 > python小游戏作者:搞笑链接: http://www.pythonheidong.com/bl ...
Stack Ball 堆栈球小游戏unity3d开发教程
Stack Ball 堆栈球小游戏unity3d开发教程介绍 <Stack Ball>是一款3D街机游戏,玩家需要通过旋转的螺旋平台来打碎.撞击和弹跳,以达到终点. 听起来很容易?你可错 ...
html5+canvas+javascript开发打灰机小游戏
今天不出太阳,整个人都有点颓废.为了我的大前端计划,不得已找点代码练练手. 打灰机是很早就流行的手机游戏,那时候智能手机还很贵,我还是学生一枚.现在出来工作了,发现别人写的打灰机游戏,然后游戏逻辑很差 ...
python海龟画图模块制作的拦球小游戏，谁说小海龟只会画图
""" 拦球小游戏.py 海龟本身的图形有"arrow", "turtle", "circle", & ...
Android陀螺仪应用:平衡球小游戏
平衡球小游戏在手机硬件还不够发达的早些时候,简易的"体感游戏"成为了手机游戏中的一个大头. 利用设备上自带的动态传感器,通过摇晃手机等方式,移动游戏物体来游玩的游戏. 为了成功理 ...
Android陀螺仪应用_平衡球小游戏
平衡球小游戏在手机硬件还不够发达的早些时候,简易的"体感游戏"成为了手机游戏中的一个大头. 利用设备上自带的动态传感器,通过摇晃手机等方式,移动游戏物体来游玩的游戏. 为了成功理 ...
使用javascript实现简单的龟兔赛跑小游戏
使用javascript实现简单的龟兔赛跑小游戏以下是实现代码 //javascript实现代码 function start(){t=document.getElementById('t')r=d ...
java写弹力球游戏,用Qt5做的弹力球小游戏
[实例简介] 用Qt5做的一个弹力球小游戏,Qt5及版本以上能直接运行.这个小游戏代码比较多,希望下载的同学能改进,一起交流. [实例截图] [核心代码] 9137bea4-84cc-4b28-9ae ...
安卓期末大作业——Android弹力球小游戏
功能描述: 弹力球小游戏,使用AndEnginePhysicsBox2D游戏开发引擎开发,适合新手学习.搭建方法请看入门教程菜单中的androidstudio项目搭建教程.关于怎么实现的问题请不要问我 ...
Android弹力球小游戏案例
功能描述: 弹力球小游戏,使用AndEnginePhysicsBox2D游戏开发引擎开发,适合新手学习. 开发语言: java 技术框架: mvc,AndEnginePhysicsBox2D引擎开发 ...

JavaScript实现的躲避球小游戏

JavaScript实现的躲避球小游戏相关推荐

最新文章

热门文章