单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
示例代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; width: 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>
一个鸡蛋去茶馆喝茶,结果它变成了茶叶蛋;
一个鸡蛋跑去松花江游泳,结果它变成了松花蛋;
一有个鸡蛋跑到了山东,结果变成了鲁(卤)蛋;
一个鸡蛋无家可归,结果它变成了野鸡蛋;
一个鸡蛋在路上不小心摔了一跤,倒在地上,结果变成了导弹;
一个鸡蛋跑到人家院子里去了,结果变成了原子弹;
一个鸡蛋跑到青藏高原,结果变成了氢弹;
一个鸡蛋生病了,结果变成了坏蛋;
一个鸡蛋嫁人了,结果变成了混蛋;
一个鸡蛋跑到河里游泳,结果变成了核弹;
一个鸡蛋跑到花丛中去了,结果变成了花旦;
一个鸡蛋骑着一匹马,拿着一把刀,原来他是刀马旦;
一个鸡蛋是母的,长的很丑,结果就变成了恐龙蛋;
一个鸡蛋是公的,他老婆在外面和别的鸡蛋通*,结果他变成了王八蛋;
一个鸡蛋……
哈....哈哈.....哈哈哈........哈哈哈哈.....