首页 > 语言 > JavaScript > 正文

纯javascript实现的小游戏《Flappy Pig》实例

2024-05-06 16:23:48
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了纯javascript实现的小游戏《Flappy Pig》,较为详细的分析了javascript实现小游戏《Flappy Pig》的相关技巧,涉及javascript操作页面元素移动、碰撞、事件监听与触发的相关技巧,需要的朋友可以参考下

本文实例讲述了纯javascript实现的小游戏《Flappy Pig》。分享给大家供大家参考。具体如下：

Flappy Pig，是Pig，使用原生javascript写的网页版“Flappy Bird”。我也奇了个怪为什么搞这个东西出来，而且还花了一天宝贵的周末，但是既然写出来，就拿出来和大家分享一下。

option.js如下：

 

 
  1. /** 
  2. * 原生javascript实现的《Flappy Pig》v0.1.0 
  3. * ======================================= 
  4. * @author keenwon 
  5. * Full source at http://keenwon.com 
  6. */ 
  7. var flappy = (function (self) { 
  8. 'use strict'; 
  9. //设置 
  10. self.option = { 
  11. //重力加速度，屏幕像素和实际物理上的米有差别，所以存在换算 
  12. g: 400, 
  13. //跳跃的初速度，控制猪的弹跳力 
  14. v0: 400, 
  15. //柱子移动速度 
  16. vp: 2.5, 
  17. //频率，控制动画帧数，默认20ms 
  18. frequency: 20, 
  19. //关卡数 
  20. levels: 100, 
  21. //开头的空白距离 
  22. safeLift: 500, 
  23. //地板高度（和图片有关） 
  24. floorHeight: 64, 
  25. //猪的宽度 
  26. pigWidth: 33, 
  27. //猪的高度 
  28. pigHeight: 30, 
  29. //猪当前高度 
  30. pigY: 300, 
  31. //猪距离左边的距离, 
  32. pigLeft: 80, 
  33. //柱子Html 
  34. pillarHtml: '<div class="top"></div><div class="bottom"></div>', 
  35. //柱子宽度 
  36. pillarWidth: 45, 
  37. //柱子上下间隔高度 
  38. pillarGapY: 108, 
  39. //柱子左右间隔宽度 
  40. pillarGapX: 250, 
  41. //上柱子的基础定位值（就是top值，和css写法有关） 
  42. pillarTop: -550, 
  43. //下柱子的基础定位值 
  44. pillarBottom: -500 
  45. }; 
  46. return self; 
  47. })(flappy || {}) 

util.js如下：

 

 
  1. /** 
  2. * 原生javascript实现的《Flappy Pig》v0.1.0 
  3. * ======================================= 
  4. * @author keenwon 
  5. * Full source at http://keenwon.com 
  6. */ 
  7. var flappy = (function (self) { 
  8. 'use strict'; 
  9. //工具 
  10. self.util = { 
  11. preventDefaultEvent: function (event) { 
  12. event = window.event || event; 
  13. if (event) { 
  14. if (event.preventDefault) { 
  15. event.preventDefault(); 
  16. } else { 
  17. event.returnValue = false; 
  18. } 
  19. } 
  20. }, 
  21. $: function (id) { 
  22. return document.getElementById(id); 
  23. }, 
  24. getChilds: function (obj) { 
  25. var childs = obj.children || obj.childNodes, 
  26. childsArray = new Array(); 
  27. for (var i = 0, len = childs.length; i < len; i++) { 
  28. if (childs[i].nodeType == 1) { 
  29. childsArray.push(childs[i]); 
  30. } 
  31. } 
  32. return childsArray; 
  33. } 
  34. }; 
  35. return self; 
  36. })(flappy || {}) 

pig.js如下：

 

 
  1. /** 
  2. * 原生javascript实现的《Flappy Pig》v0.1.0 
  3. * ======================================= 
  4. * @author keenwon 
  5. * Full source at http://keenwon.com 
  6. */ 
  7. var flappy = (function (self) { 
  8. 'use strict'; 
  9. var option = self.option, 
  10. $ = self.util.$; 
  11. //猪 
  12. self.pig = { 
  13. Y: 0, //猪当前高度（底边） 
  14. init: function (overCallback, controller) { 
  15. var t = this; 
  16. t.s = 0, //位移 
  17. t.time = 0, //时间 
  18. t.$pig = $('pig'); 
  19. t.$pig.style.left = option.pigLeft + 'px'; 
  20. t._controller = controller; 
  21. t._addListener(overCallback); 
  22. }, 
  23. //添加监听 
  24. _addListener: function (overCallback) { 
  25. this._overCallback = overCallback; 
  26. }, 
  27. //启动 
  28. start: function () { 
  29. var t = this, 
  30. interval = option.frequency / 1000; 
  31. t.s = option.v0 * t.time - t.time * t.time * option.g * 2; //竖直上抛运动公式 
  32. t.Y = option.pigY + t.s; 
  33. if (t.Y >= option.floorHeight) { 
  34. t.$pig.style.bottom = t.Y + 'px'; 
  35. } else { 
  36. t._dead(); 
  37. } 
  38. t.time += interval; 
  39. }, 
  40. //跳 
  41. jump: function () { 
  42. var t = this; 
  43. option.pigY = parseInt(t.$pig.style.bottom); 
  44. t.s = 0; 
  45. t.time = 0; 
  46. }, 
  47. //撞到地面时触发 
  48. _dead: function () { 
  49. this._overCallback.call(this._controller); 
  50. }, 
  51. //撞到地面的处理 
  52. fall: function () { 
  53. var t = this; 
  54. //摔到地上，修正高度 
  55. t.Y = option.floorHeight; 
  56. t.$pig.style.bottom = t.Y + 'px'; 
  57. }, 
  58. //撞到柱子的处理 
  59. hit: function () { 
  60. var t = this; 
  61. //坠落 
  62. var timer = setInterval(function () { 
  63. t.$pig.style.bottom = t.Y + 'px'; 
  64. if (t.Y <= option.floorHeight) { 
  65. clearInterval(timer); 
  66. } 
  67. t.Y -= 12; 
  68. }, option.frequency); 
  69. } 
  70. }; 
  71. return self; 
  72. })(flappy || {}) 

pillar.js如下：

 

 
  1. /** 
  2. * 原生javascript实现的《Flappy Pig》v0.1.0 
  3. * ======================================= 
  4. * @author keenwon 
  5. * Full source at http://keenwon.com 
  6. */ 
  7. var flappy = (function (self) { 
  8. 'use strict'; 
  9. var option = self.option, 
  10. util = self.util, 
  11. $ = util.$; 
  12. //柱子 
  13. self.pillar = { 
  14. currentId: -1, //当前柱子id 
  15. init: function () { 
  16. var t = this; 
  17. //缓存上下柱子位置的换算因子 
  18. t._factor = option.pillarBottom - option.pillarGapY + 450; 
  19. //s表示一个位置，到达这个位置的柱子就是“当前的柱子”，就算是靠近猪了，开始计算猪有没有撞到这根柱子，10是提前量。 
  20. t._s = option.pigLeft + option.pigWidth + 10; 
  21. t._render(); 
  22. }, 
  23. //把柱子渲染到DOM树中 
  24. _render: function () { 
  25. var t = this, 
  26. initleft = option.safeLift; 
  27. t.left = 0; 
  28. t.dom = document.createElement('div'); 
  29. t.dom.className = t.dom.id = 'pillarWrapper'; 
  30. for (var i = 0, j = option.levels; i < j; i++) { 
  31. var el = document.createElement('div'); 
  32. el.innerHTML = option.pillarHtml; 
  33. el.className = 'pillar'; 
  34. el.id = 'pillar-' + i; 
  35. el.style.left = initleft + 'px'; 
  36. var childs = util.getChilds(el), 
  37. topEl = childs[0], 
  38. bottomEl = childs[1], 
  39. pos = t._random(i); 
  40. topEl.style.top = pos.top + 'px'; 
  41. bottomEl.style.bottom = pos.bottom + 'px'; 
  42. el.setAttribute('top', 600 + pos.top); 
  43. el.setAttribute('bottom', 0 - pos.bottom); 
  44. t.dom.appendChild(el); 
  45. initleft += option.pillarGapX; 
  46. } 
  47. $('screen').appendChild(t.dom); 
  48. }, 
  49. //计算柱子位置 
  50. _random: function (i) { 
  51. var t = this, 
  52. x = Math.random(), 
  53. h = Math.abs(Math.sin((i+1) * x)) * 290; 
  54. return { 
  55. top: option.pillarTop + h, 
  56. bottom: t._factor - h 
  57. } 
  58. }, 
  59. //移动柱子 
  60. move: function () { 
  61. var t = this; 
  62. t.dom.style.left = -t.left + 'px'; 
  63. t._find(t.left); 
  64. t.left += option.vp; 
  65. }, 
  66. //找到当前的柱子 
  67. _find: function (l) { 
  68. var t = this, 
  69. x = (t._s + l - option.safeLift) / option.pillarGapX, 
  70. intX = parseInt(x); //intX是当前柱子 
  71. if (x > 0 && t.currentId != intX && Math.abs(x - intX) < 0.1) { 
  72. t.currentId = intX; 
  73. } 
  74. } 
  75. }; 
  76. return self; 
  77. })(flappy || {}) 

position.js如下：

 

 
  1. /** 
  2. * 原生javascript实现的《Flappy Pig》v0.1.0 
  3. * ======================================= 
  4. * @author keenwon 
  5. * Full source at http://keenwon.com 
  6. */ 
  7. var flappy = (function (self) { 
  8. 'use strict'; 
  9. var pig = self.pig, 
  10. pillar = self.pillar, 
  11. option = self.option, 
  12. $ = self.util.$; 
  13. //位置判断 
  14. self.position = { 
  15. init: function (overCallback, controller) { 
  16. var t = this; 
  17. t.pillarWrapper = $('pillarWrapper'); 
  18. t.pigX1 = option.pigLeft, 
  19. t.pigX2 = option.pigLeft + option.pigWidth, //猪的左右位置，固定的 
  20. t._controller = controller; 
  21. t._addListener(overCallback); 
  22. }, 
  23. //添加监听 
  24. _addListener: function (overCallback) { 
  25. this._overCallback = overCallback; 
  26. }, 
  27. judge: function () { 
  28. var t = this, 
  29. currentPillar = $('pillar-' + pillar.currentId); 
  30. if (pillar.currentId == -1) { 
  31. return; 
  32. } 
  33. t.pigY2 = 600 - pig.Y; 
  34. t.pigY1 = t.pigY2 - option.pigHeight; //猪的上下位置 
  35. t.pY1 = currentPillar.getAttribute('top'); 
  36. t.pY2 = currentPillar.getAttribute('bottom'); 
  37. t.pX1 = parseInt(currentPillar.style.left) + parseInt(t.pillarWrapper.style.left); 
  38. t.pX2 = t.pX1 + option.pillarWidth; //柱子的上下左右位置 
  39. console.log(t.pillarWrapper.style.left); 
  40. if (option.pigLeft + option.pigWidth >= t.pX1 && option.pigLeft <= t.pX2) { 
  41. if (t.pigY1 < t.pY1 || t.pigY2 > t.pY2) { 
  42. t._dead(); 
  43. } 
  44. } 
  45. }, 
  46. //撞到柱子时触发 
  47. _dead: function () { 
  48. this._overCallback.call(this._controller); 
  49. }, 
  50. }; 
  51. return self; 
  52. })(flappy || {}) 

controller.js如下：

 

 
  1. /** 
  2. * 原生javascript实现的《Flappy Pig》v0.1.0 
  3. * ======================================= 
  4. * @author keenwon 
  5. * Full source at http://keenwon.com 
  6. */ 
  7. var flappy = (function (self) { 
  8. 'use strict'; 
  9. var pig = self.pig, 
  10. pillar = self.pillar, 
  11. pos = self.position, 
  12. util = self.util, 
  13. $ = util.$, 
  14. option = self.option; 
  15. //控制器 
  16. self.controller = { 
  17. init: function () { 
  18. var t = this; 
  19. t._isStart = false; 
  20. t._timer = null; 
  21. pig.init(t.fall, t); 
  22. pillar.init(); 
  23. pos.init(t.hit, t); 
  24. t.addKeyListener(); 
  25. }, 
  26. addKeyListener: function () { 
  27. var t = this; 
  28. document.onkeydown = function (e) { 
  29. var e = e || event; 
  30. var currKey = e.keyCode || e.which || e.charCode; 
  31. if (currKey == 32) { 
  32. t.jump(); 
  33. util.preventDefaultEvent(e); 
  34. } 
  35. } 
  36. }, 
  37. jump: function () { 
  38. var t = this; 
  39. if (!t._isStart) { 
  40. $('begin').style.display = 'none'; 
  41. t._createTimer(function () { 
  42. pig.start(); 
  43. pillar.move(); 
  44. pos.judge(); 
  45. $('score').innerHTML = pillar.currentId + 1; 
  46. }); 
  47. t._isStart = true; 
  48. } else { 
  49. pig.jump(); 
  50. } 
  51. }, 
  52. hit: function () { 
  53. var t = this; 
  54. t.over(); 
  55. pig.hit(); 
  56. }, 
  57. fall: function () { 
  58. var t = this; 
  59. t.over(); 
  60. pig.fall(); 
  61. }, 
  62. over: function () { 
  63. var t = this; 
  64. clearInterval(t._timer); 
  65. $('end').style.display = 'block'; 
  66. }, 
  67. _createTimer: function (fn) { 
  68. var t = this; 
  69. t._timer = setInterval(fn, option.frequency); 
  70. } 
  71. }; 
  72. return self; 
  73. })(flappy || {}) 

game.js如下：

 

 
  1. /** 
  2. * 原生javascript实现的《Flappy Pig》v0.1.0 
  3. * ======================================= 
  4. * @author keenwon 
  5. * Full source at http://keenwon.com 
  6. */ 
  7. var flappy = (function (self) { 
  8. 'use strict'; 
  9. var controller = self.controller, 
  10. option = self.option, 
  11. pig = self.pig, 
  12. pillar = self.pillar, 
  13. pos = self.position, 
  14. util = self.util, 
  15. $ = self.util.$; 
  16. //主程序 
  17. self.game = { 
  18. init: function () { 
  19. var t = this; 
  20. t._isStart = false; 
  21. t._isEnd = false; 
  22. t._timer = null; 
  23. pig.init(t.fall, t); 
  24. pillar.init(); 
  25. pos.init(t.hit, t); 
  26. t.addKeyListener(); 
  27. }, 
  28. addKeyListener: function () { 
  29. var t = this; 
  30. document.onkeydown = function (e) { 
  31. var e = e || event; 
  32. var currKey = e.keyCode || e.which || e.charCode; 
  33. if (currKey == 32) { 
  34. if (!t._isEnd) { 
  35. t.jump(); 
  36. } else { 
  37. window.location.reload(); 
  38. } 
  39. util.preventDefaultEvent(e); 
  40. } 
  41. } 
  42. }, 
  43. jump: function () { 
  44. var t = this; 
  45. if (!t._isStart) { 
  46. $('start').style.display = 'none'; 
  47. t._createTimer(function () { 
  48. pig.start(); 
  49. pillar.move(); 
  50. pos.judge(); 
  51. $('score').innerHTML = pillar.currentId + 1; 
  52. }); 
  53. t._isStart = true; 
  54. } else { 
  55. pig.jump(); 
  56. } 
  57. }, 
  58. hit: function () { 
  59. var t = this; 
  60. t.over(); 
  61. pig.hit(); 
  62. }, 
  63. fall: function () { 
  64. var t = this; 
  65. t.over(); 
  66. pig.fall(); 
  67. }, 
  68. over: function () { 
  69. var t = this; 
  70. clearInterval(t._timer); 
  71. t._isEnd = true; 
  72. $('end').style.display = 'block'; 
  73. }, 
  74. _createTimer: function (fn) { 
  75. var t = this; 
  76. t._timer = setInterval(fn, option.frequency); 
  77. } 
  78. }; 
  79. flappy.init = function () { 
  80. self.game.init(); 
  81. } 
  82. return self; 
  83. })(flappy || {}) 

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：javascript简单实现滑动菜单效果的方法

下一篇：JavaScript中利用Array和Object实现Map的方法

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有