這篇文章主要介紹了純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程序設計有所幫助。