纯js制作的弹球游戏
纯js的弹球游戏，撞壁自动返回，按钮放置暂停移动，移开开始移动
1 <!-- 2 author:zhangjie 3 date :2016-7-23 4 --> 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <title></title> 9 <meta charset="UTF-8"> 10 <script type='text/javascript'> 11 //移动事件 12 var rocket; 13 //设置弹球位移量 14 var x=Math.floor(Math.random()*10+1); 15 var y=Math.floor(Math.random()*10+1); 16 //弹球开始运动 17 function start(){ 18 rocket=window.setInterval("changCarPostion('move')",10); 19 } 20 //弹球停止运动 21 function stop(){ 22 rocket=window.clearInterval(rocket); 23 } 24 //timer中的执行函数，设置弹球x,y值 25 function changCarPostion(status){ 26 var car =$('car'); 27 var floor=$('floor'); 28 var floorwidth=A('floor','width'); 29 var floorheight=A('floor','height'); 30 var carwidth=A('car','width'); 31 var carheight=A('car','height'); 32 var carleft=A('car','left'); 33 var cartop=A('car','top'); 34 if((carleft+carwidth)>floorwidth||carleft<0){ 35 x=-x 36 } 37 if((cartop+carheight)>floorheight||cartop<0){ 38 y=-y; 39 } 40 switch(status){ 41 case "initial": 42 car.style.left=(floorwidth-carwidth)/2+'px'; 43 car.style.top=(floorheight-carheight)/2+'px'; 44 break; 45 case "move": 46 car.style.left=(carleft+x)+'px'; 47 car.style.top=(cartop+y)+'px'; 48 break; 49 } 50 51 } 52 //获取对象 53 function $(id){ 54 return document.getElementById(id); 55 } 56 //得到对象的style值 57 function getCssAttribute(id,attr){ 58 var getObj = $(id); 59 if(document.all){ 60 // IE 浏览器 61 alert('对不起，这个测试不支持ＩＥ') 62 }else if(window.getComputedStyle){//如果为FF或者其他浏览器 63 return (window.getComputedStyle(getObj,null).getPropertyValue(attr)); 64 } 65 } 66 //得到对象的style值--简写 67 function A(id,attr){ 68 return parseInt(getCssAttribute(id,attr)); 69 } 70 </script> 71 </head> 72 <body> 73 <div id="floor" style="width:100%;height:200px;border:1px solid red;position:relative"> 74 <div id="car" style='width:10px;height:10px;background-color: blue;position:absolute;left:10px;top:10px'></div> 75 </div> 76 <!-- <input type="button" name="" value="开始" onclick="start()"> --> 77 <input type="button" name="" value="暂停" onmouseover="javascript:stop();" onmouseleave="javascript:start();" > 78 </body> 79 <script> 80 //初始化弹球位置 81 changCarPostion('initial'); 82 //启动弹球 83 start(); 84 </script> 85 </html>
