纯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="开始" οnclick="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>

转载于:https://www.cnblogs.com/shuimuchanggong/p/5699752.html

纯js制作的弹球游戏相关推荐

优秀课程案例：使用Scratch制作打弹球游戏2-得分过关
目标 (1)弹珠弹球得分 (2)障碍物消失则过关任务 1．剧本设计主题:"会过关"的弹珠球舞台:草地角色:小球.反弹板.草地警戒线.障碍物.得分.关卡故事:小球和反弹板在 ...
纯js单页面赛车游戏
纯js单页面赛车游戏这次就是给大家分享赛车的游戏: 废话不多,直接上代码: <!DOCTYPE html> <html> <head><meta chars ...
php赛车源码,纯JS单页面赛车游戏制作代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 Best Fly Car input { border: 1px ...
优秀课程案例：使用Scratch制作打弹球游戏1-反弹球
打弹球是FC游戏中的一款经典老游戏,虽然玩法很简单, 但是以前可是非常火爆的.想学习如何制作简单有趣的红白机小游戏吗?今天我们就一起来利用Scratch软件,先做一个简化版的打弹球游戏--反弹球! 一 ...
纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 <!DOCTYPE html> <html&g ...
PyGame游戏制作：弹球游戏Pong（附上Python完整代码）
介绍使用 Python 的 PyGame 做了一个弹球游戏,第一次使用Py做游戏,分享一下. 下载地址下载链接: http://101.201.112.95/2021/PyGame_Pong.zi ...
用js制作一个扫雷游戏（vue版）
使用js来制作一个扫雷游戏,可以分为以下几个步骤 1.根据不同难度构建扫雷游戏区域: 2.在游戏区域中放置地雷: 3.处理点击事件: 4.处理游戏结束事件 1.根据不同难度构建扫雷游戏区域创建一个二 ...
纯JS制作的窗户雨滴效果
今天本站推荐的代码是用JS制作的窗户雨滴效果,绚丽的效果不亚于FLASH,由于不知出处在哪,总而言之, 在此感谢作者的慷慨分享. function demo() { var engine = new ...
使用Scratch制作打弹球游戏（五）-排名
之前几个博客呢,我对弹珠游戏的几个功能进行了关键点讲解.那么在玩的同时,我们有时候想看看自己的一个排名,那么这个博客呢就是对排名进行一个讲解,那这呢也是我们这个游戏的最后一个功能,大家如果有更好的方法 ...

纯js制作的弹球游戏

纯js制作的弹球游戏相关推荐

最新文章

热门文章