最近在用看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; 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>

  

  1. 一个鸡蛋去茶馆喝茶,结果它变成了茶叶蛋;
    一个鸡蛋跑去松花江游泳,结果它变成了松花蛋;
    一有个鸡蛋跑到了山东,结果变成了鲁(卤)蛋;
    一个鸡蛋无家可归,结果它变成了野鸡蛋;
    一个鸡蛋在路上不小心摔了一跤,倒在地上,结果变成了导弹;
    一个鸡蛋跑到人家院子里去了,结果变成了原子弹;
    一个鸡蛋跑到青藏高原,结果变成了氢弹;
    一个鸡蛋生病了,结果变成了坏蛋;
    一个鸡蛋嫁人了,结果变成了混蛋;
    一个鸡蛋跑到河里游泳,结果变成了核弹;
    一个鸡蛋跑到花丛中去了,结果变成了花旦;
    一个鸡蛋骑着一匹马,拿着一把刀,原来他是刀马旦;
    一个鸡蛋是母的,长的很丑,结果就变成了恐龙蛋;
    一个鸡蛋是公的,他老婆在外面和别的鸡蛋通*,结果他变成了王八蛋;
    一个鸡蛋……
    哈....哈哈.....哈哈哈........哈哈哈哈.....

单Js 的重力游戏开发的更多相关文章

  1. 学习笔记:Stage.js(又叫Cut.js)——2D canvas 开发库,游戏方面的

    http://piqnt.com/stage.js/ http://www.bootcdn.cn/stage.js/ Stage.js(可能又叫Cut.js)是一个2D HTML5 JavaScrip ...

  2. HTML5游戏开发引擎Pixi.js新手入门讲解

    在线演示 本地下载 ​这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...

  3. nodejs五子棋online游戏开发视频教程,客户端cocos creator js

    开发的游戏是五子棋online,网络版的,服务端部分和客户端部分都在这个教程里面,可以看一下目录! 服务器nodejs游戏开发教程 使用Nodejs开发网络服务器 游戏服务端 ,cocos creat ...

  4. 算法、数据结构、与设计模式等在游戏开发中的运用 (一):单例设计(Singleton Design)

    算法.数据结构.与设计模式等在游戏开发中的运用 (一):单例设计(Singleton Design) 作者: Compasslg 李涵威 1. 什么是单例设计(Singleton Design) 在学 ...

  5. 8、Cocos2dx 3.0三,找一个小游戏开发3.0存储器管理的版本号

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27693365 复杂的内存管理 移动设备上的硬件资源十 ...

  6. HTML5游戏开发系列教程8(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...

  7. Erlang游戏开发-协议

    Erlang游戏开发-协议 选择什么协议? 协议包含通讯协议和数据格式. 通讯协议 通讯协议目前常用的是:HTTP 和TCP .其有各自的特点根据游戏的特点而进行选择. HTTP HTTP比较成熟,使 ...

  8. 作为前端的你,CC游戏开发可以上车

    1. 初来乍到 打开 Cocos Creator 点击新建空白项目,在默认布局的左下区域,一个黄黄assets文件夹映入眼帘.作为前端的你对这个文件是不是再熟悉不过了.是的,和你想象的一样,开发游戏中 ...

  9. Aery的UE4 C++游戏开发之旅(1)基础对象模型

    目录 UObject Actor种类 AActor APawn(可操控单位) AController(控制器) AGameMode(游戏模式) AHUD(HUD) ... Component种类 UA ...

随机推荐

  1. 多个Activity交互的生命周期:

    一.多个Activity交互的生命周期: A Activity打开B Activity的时候:        A Activity                    B Activity     ...

  2. 【SSH项目实战三】脚本密钥的批量分发与执行

    [SSH项目实战]脚本密钥的批量分发与执行 标签(空格分隔): Linux服务搭建-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转载, ...

  3. C# 使用 USB转串 接收数据 问题

    C# 使用 USB转串 接收数据的 问题 硬件设备是MicroUSB接口,通过USB转串驱动接入PC机.自己用winForm写了一个读取串口数据的小程序,总是接收不到数据. 用传sscom32串口工具 ...

  4. Effective Modern C++ Item 37:确保std::thread在销毁时是unjoinable的

    下面这段代码,如果调用func,按照C++的标准,程序会被终止(std::terminate) void func() { std::thread t([] { std::chrono::micros ...

  5. 纯HTML自动刷新页面或重定向

    refresh 属性值  --  刷新与跳转(重定向)页面 refresh出现在http-equiv属性中,使用content属性表示刷新或跳转的开始时间与跳转的网址 refresh示例一:5秒之后刷 ...

  6. 学习一点Markdown的基本知识

    本文于2017年3月18日首发于LinkedIn,请参考链接 这个世界的进步是由一些"懒"的人推动的.今天讲的这个Markdown,其实也是因为一批厌倦了HTML的各种标签的语法, ...

  7. BFS-基础简单的算法

    前言 有时候,当你并不了解很多高级算法的时候,搜索不失为一种解决问题的好方法,而且很多高级算法有或多或少的会用到搜索或者搜索的思想.可见,搜索是一个基础并且必须要掌握的算法. 在这篇文章中,会对BFS ...

  8. ListView的简单使用

    首先在主界面建立一个ListView的布局

  9. linux下mysql的大小写是否区分设置

    转:http://blog.csdn.net/qq_29246225/article/details/52293549 一.Linux中MySQL大小写详情:1.数据库名严格区分大小写2.表名严格区分 ...

  10. 混合高斯模型(GMM)推导及实现

    作者:桂. 时间:2017-03-20  06:20:54 链接:http://www.cnblogs.com/xingshansi/p/6584555.html 声明:欢迎被转载,不过记得注明出处哦 ...