单Js 的重力游戏开发

　　最近在用看cocos的时候萌生的想法，单纯js实现重力原理。然后就做了一个这样的小游戏。姑且命名为《超级玛丽》！

　　因为之前有人要我做超级玛丽。哈哈哈哈哈哈！这也算完成任务了吧。

　　先说一下原理吧。原理就是嗖~嗖~嗖~。

　　好了正经的说下：

　　是否处于跳跃中

self.isJump = false; 

是否在地板上
self.canJump = false;

挑起的时间，时间越久上升速度越慢
self.JumpTimes = 0;

下降的时间，时间越久下降速度越块
self.downTimes = 0;

游戏运行时间周期（0~10）。判断地板块位置

self.times = 0;
//重力加速度大小 范围1~10，越大下降越快。挑起小
self.d2 = 2;
// 预设 地板块。可通过自定义函数设置
self.floorArry = [100, 0, 50, 100, 170, 0, 100, 50, 50, 0, 100, 200, 150, 0, 75];

跳： window.d2.jump　

开始游戏：self.srartGame　

结束游戏：self.endGame

设置地板快生成函数： self.setFloorFunc

开发者函数体 window.d2Init

 

示例代码：

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6         <title>SupperML</title>
  7         <style type="text/css">
  8             body {
  9                 margin-right: auto;
 10                 margin-left: auto;
 11                 padding-left: auto;
 12                 padding-right: auto;
 13                 width: 500px;
 14                 height: 300px;
 15                 z-index: 1;
 16             }
 17             
 18             .floor {
 19                 width: 10px;
 20                 height: 10px;
 21                 float: left;
 22                 margin: 0;
 23                 z-index: 4;
 24                 background-color: darkgreen;
 25             }
 26             
 27             .WFloor {
 28                 width: 10px;
 29                 height: 10px;
 30                 float: left;
 31                 margin: 0;
 32                 z-index: 4;
 33             }
 34             
 35             #game_area {
 36                 margin-left: auto;
 37                 margin-right: auto;
 38                 position: absolute;
 39                 width: 500px;
 40                 height: 300px;
 41                 z-index: 3;
 42                 overflow: hidden;
 43             }
 44         </style>
 45         <script type="text/javascript">
 46             window.onload = function() {
 47                 var self = {};
 48                 //is jump;
 49                 self.isJump = false;
 50                 //gameObj on the floor;
 51                 self.canJump = false;
 52                 //jump time <14
 53                 self.JumpTimes = 0;
 54                 //down times 
 55                 self.downTimes = 0;
 56                 //down times 
 57                 self.times = 0;
 58                 //重力加速度
 59                 self.d2 = 2;
 60                 //width 10px*10,   array length 6,  0:no floor show:5 
 61                 self.floorArry = [100, 0, 50, 100, 170, 0, 100, 50, 50, 0, 100, 200, 150, 0, 75];
 62                 //strat game
 63                 var _Srart = function() {
 64                         _SetFloorElem();
 65                     },
 66                     //重力模拟
 67                     _D2Weight = function() {
 68                         var gameObj = document.getElementById('game_obj');
 69                         var floorObj1 = document.getElementById('2xy5');
 70                         var floorObj2 = document.getElementById('2xy6');
 71                         if (!self.isJump) {
 72                             if ((Math.abs((parseInt(gameObj.style.marginTop) + parseInt(gameObj.style.height)) - parseInt(floorObj1.style.marginTop)) < 10 + (2 * self.d2))) {
 73                                 self.canJump = true;
 74                                 self.downTimes = 0;
 75                                 gameObj.style.marginTop = parseInt(floorObj1.style.marginTop) - parseInt(gameObj.style.height) + "px";
 76                             } else {
 77                                 self.canJump = false;
 78                                 self.downTimes++;
 79                                 gameObj.style.marginTop = parseInt(gameObj.style.marginTop) + self.downTimes * self.d2 + 'px';
 80                                 if (parseInt(gameObj.style.marginTop) > 500) {
 81                                     self.endGame();
 82                                 }
 83                             }
 84                         } else {
 85                             if (20 < self.JumpTimes * self.d2) {
 86                                 self.JumpTimes = 0;
 87                                 self.isJump = false;
 88                                 self.downTimes = 0;
 89                                 return;
 90                             }
 91                             if (Math.abs(parseInt(floorObj1.style.marginTop) + 10 - parseInt(gameObj.style.marginTop)) < 5) {
 92                                 self.JumpTimes = 0;
 93                                 self.isJump = false;
 94                                 self.canJump = false;
 95                             } else {
 96                                 self.JumpTimes++;
 97                                 self.canJump = false;
 98                                 gameObj.style.marginTop = parseInt(gameObj.style.marginTop) - 20 + self.JumpTimes * self.d2 + 'px';
 99                             }
100                         }
101                     },
102                     //设置地板元素
103                     _SetFloorElem = function() {
104                         self.times += 1;
105                         if (self.times == 10) {
106                             self.times = 0;
107                         }
108                         var index = 0;
109                         for (var i2 = 0; i2 < 5; i2++) {
110                             for (var j2 = 0; j2 < 10; j2++) {
111                                 var oLi = document.getElementById(i2 + "xy" + j2);
112                                 if (self.times + j2 < 10) {
113                                     index = i2;
114                                 } else {
115                                     index = i2 + 1;
116                                 }
117                                 if (self.floorArry[index]) {
118                                     oLi.style.display = "floor";
119                                     oLi.style.marginTop = self.floorArry[index] + "px";
120                                 } else {
121                                     oLi.style.className = "WFloor";
122                                     oLi.style.marginTop = 5000 + "px";
123                                 }
124                             }
125                         }
126                     },
127                     //初始化游戏元素
128                     _InitGame = function() {
129                         var oFrag = document.createDocumentFragment();
130                         for (var i = 0; i < 5; i++) {
131                             for (var j = 0; j < 10; j++) {
132                                 var oLi = document.createElement("div");
133                                 oLi.id = i + "xy" + j;
134                                 oLi.className = 'floor';
135                                 //oLi.style.marginLeft = i * 100 + j*10 + "px";
136                                 oFrag.appendChild(oLi);
137                             }
138                         }
139                         document.getElementById("game_area").appendChild(oFrag);
140                         document.onkeyup = function(event) {
141                             var e = event || window.event;
142                             var keyCode = e.keyCode || e.which;
143                             switch (keyCode) {
144                                 case 32:
145                                     self.jump();
146                                     break;
147                                 default:
148                                     break;
149                             }
150                         }
151                         setInterval(_setFloor, 1000);
152                     },
153                     //设置地板位置
154                     _setFloor = function() {
155                         var top = self.func ? self.func() : 200;
156                         if (top != 0 && ((self.floorArry[19] - self.floorArry) > 200 / self.d2)) {
157                             top = self.floorArry[19] - 200 / self.d2;
158                         }
159                         self.floorArry.splice(0, 1);
160                         self.floorArry.push(top);
161                     };
162                 var gameRole = document.getElementsByClassName('gameObj');
163                 //跳
164                 self.jump = function() {
165                         if (self.canJump) {
166                             self.isJump = true;
167                             self.JumpTimes = 0;
168                         }
169                     }
170                     //开始游戏
171                 self.srartGame = function() {
172                         if (self.timer) {
173                             return;
174                         }
175                         _InitGame();
176                         self.sTime = new Date();
177                         self.timer = setInterval(_Srart, 100);
178                         self.D2Weight = setInterval(_D2Weight, 100);
179 
180                     }
181                     //游戏结束
182                 self.endGame = function() {
183                         alert((Date.now() - self.sTime.getTime()) / 1000 + 's');
184                         self.sTime
185                         clearInterval(self.timer);
186                         clearInterval(self.D2Weight);
187                         location.reload();
188                     }
189                     //设置地板数据生成函数
190                 self.setFloorFunc = function(func) {
191                     self.func = func;
192                 }
193                 document.getElementById('jump').onclick = self.jump;
194                 document.getElementById('start').onclick = self.srartGame;
195                 window.d2 = self;
196                 window.d2Init && window.d2Init();
197             };
198         </script>
199     </head>
200 
201     <body>
202         <div id="game_area">
203             <div id="game_obj" style="margin-left: 250px; margin-top:10px; position: absolute; z-index: 1;  17px; height: 20px; background-color: blueviolet;">69</div>
204             <button id="start" style="margin-left: 50px; margin-top:200px; position: absolute; z-index: 1;">Start</button>
205             <button id="jump" style="margin-left: 400px; margin-top:200px; position: absolute; z-index: 1;">Jump</button>
206         </div>
207     </body>
208     <script type="text/javascript">
209         window.d2Init = function() {
210             window.d2.setFloorFunc(
211                 function() {
212                     return window.d2.floorArry[0];
213                 }
214             )
215 
216         }
217     </script>
218 
219 </html>
View Code

　　

一个鸡蛋去茶馆喝茶，结果它变成了茶叶蛋；
一个鸡蛋跑去松花江游泳，结果它变成了松花蛋；
一有个鸡蛋跑到了山东，结果变成了鲁（卤）蛋；
一个鸡蛋无家可归，结果它变成了野鸡蛋；
一个鸡蛋在路上不小心摔了一跤，倒在地上，结果变成了导弹；
一个鸡蛋跑到人家院子里去了，结果变成了原子弹；
一个鸡蛋跑到青藏高原，结果变成了氢弹；
一个鸡蛋生病了，结果变成了坏蛋；
一个鸡蛋嫁人了，结果变成了混蛋；
一个鸡蛋跑到河里游泳，结果变成了核弹；
一个鸡蛋跑到花丛中去了，结果变成了花旦；
一个鸡蛋骑着一匹马，拿着一把刀，原来他是刀马旦；
一个鸡蛋是母的，长的很丑，结果就变成了恐龙蛋；
一个鸡蛋是公的，他老婆在外面和别的鸡蛋通*，结果他变成了王八蛋；
一个鸡蛋……
哈....哈哈.....哈哈哈........哈哈哈哈.....
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zwcai/p/6781650.html