• 原生js html5 canvas制作flappy bird压扁小鸟游戏

    可以以电脑浏览器的手机模式打开，也可以在手机浏览器中直接打开

    游戏运用了Canvas的drawImage，translate，rotate，save，restore，fillRect等API。 采用中介者模式，Game类统领全局，负责读取资源，设置定时器，维护各个物体实例，所有的演员都是Game类new 出来的， 游戏项目外部的语句就一条：

    • 碰撞检测

    因此小鸟的图片其实是一个长方形，而且角度又不断变化导致中心点难于掌握，因此很难判断小鸟与管子的碰撞。 这里画了张图帮助自己理解

    • 小鸟下落的速度

    需要模拟小鸟的重力，高中物理没有白学

    • 分数的计算

    分数的计算与碰撞检测类似，设置一个开关，当管子重新出现时，设置为true。当分值加1时，设置为false。小鸟的最左边的x坐标如果超出了管子的x+width，就认为成功通过。

    • 场景管理器

    场景管理器有4个方法enter,update,render，bindEvent。其中定时器在每帧执行update方法和render方法。enter方法由业务来调用，比如用户点击了按钮，此时就进入场景2，鸟撞到了管子，就进入场景3。 这样就把游戏的各个不同阶段分离出来，方便处理。

    演示下载地址：https://www.erdangjiade.com/js/7968.html

    源码实例如下：

    1. html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>flappy bird压扁小鸟小游戏title>
    6.  
    7. <meta property="og:type" content="website">
    8. <meta property="og:title" content="Squishy Bird">
    9. <meta property="og:site_name" content="Squishy Birds">
    10. <meta property="og:image" content="src/wav/fbthumb.jpg">
    11. <meta name="viewport" content="user-scalable=no, initial-scale=0.5, width=610, height=1024">
    12.  
    13. <link rel="image_src" href="src/wav/fbthumb.jpg">
    14.  
    15. head>
    16. <body style="margin: 0px; overflow: hidden;-moz-user-select: none;-webkit-user-select: none;user-select: none;"  >
    17.  
    18.  
    19. <div id="lgd" style="width: 300px; height: 64px; position: absolute; left: 533px; top: 301px; font-family: Verdana; font-size: 16px; font-weight: bold; text-align: center;">Loading...div>
    20.  
    21. <script type="text/javascript" src="src/squishybird.js">script>
    22.  
    23. <div style="overflow: hidden; position: relative; width: 1366px; height: 620px;">
    24. 	<canvas width="1366" height="620">canvas>
    25. 	<img src="src/wav/pipe1.png" width="148" height="1664" style="position: absolute; left: 609px; top: -1533px; z-index: 420;"><img src="src/wav/pipe2.png" width="148" height="1664" style="position: absolute; left: 609px; top: 400.9999999999999px; z-index: 420;">
    26. 	<canvas width="1366" height="88" style="position: absolute; z-index: 31337; left: 0px; top: 532px;">canvas>
    27. 	<canvas width="1366" height="256" style="position: absolute; z-index: 60; left: 0px; top: 276px;">canvas>
    28. 	<canvas width="1366" height="216" style="position: absolute; z-index: 61; left: 0px; top: 316px;">canvas>
    29. 	<img src="src/wav/logo.png" style="position: absolute; opacity: 0; z-index: 42069; left: 370px; top: 174px; display: none;"><img src="src/wav/gameover.png" style="position: absolute; opacity: 1; z-index: 42069; left: 370px; top: 93px; display: inline;"><img src="src/wav/clicktostart.png" style="position: absolute; opacity: 0; z-index: 42070; left: 514px; top: 435px; display: none;">
    30. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 536px; top: 23px;">0div>
    31. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 536px; top: 22px;">0div>
    32. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 536px; top: 21px;">0div>
    33. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 536px; top: 20px;">0div>
    34. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 536px; top: 19px;">0div>
    35. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 536px; top: 18px;">0div>
    36. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 536px; top: 17px;">0div>
    37. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 535px; top: 23px;">0div>
    38. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 535px; top: 22px;">0div>
    39. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 535px; top: 21px;">0div>
    40. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 535px; top: 20px;">0div>
    41. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 535px; top: 19px;">0div>
    42. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 535px; top: 18px;">0div>
    43. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 535px; top: 17px;">0div>
    44. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 534px; top: 23px;">0div>
    45. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 534px; top: 22px;">0div>
    46. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 534px; top: 21px;">0div>
    47. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 534px; top: 20px;">0div>
    48. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 534px; top: 19px;">0div>
    49. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 534px; top: 18px;">0div>
    50. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 534px; top: 17px;">0div>
    51. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 533px; top: 23px;">0div>
    52. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 533px; top: 22px;">0div>
    53. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 533px; top: 21px;">0div>
    54. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(255, 255, 255); z-index: 88888; -webkit-user-select: none; left: 533px; top: 20px;">0div>
    55. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 533px; top: 19px;">0div>
    56. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 533px; top: 18px;">0div>
    57. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 533px; top: 17px;">0div>
    58. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 532px; top: 23px;">0div>
    59. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 532px; top: 22px;">0div>
    60. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 532px; top: 21px;">0div>
    61. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 532px; top: 20px;">0div>
    62. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 532px; top: 19px;">0div>
    63. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 532px; top: 18px;">0div>
    64. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 532px; top: 17px;">0div>
    65. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 531px; top: 23px;">0div>
    66. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 531px; top: 22px;">0div>
    67. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 531px; top: 21px;">0div>
    68. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 531px; top: 20px;">0div>
    69. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 531px; top: 19px;">0div>
    70. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 531px; top: 18px;">0div>
    71. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 531px; top: 17px;">0div>
    72. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 530px; top: 23px;">0div>
    73. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 530px; top: 22px;">0div>
    74. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 530px; top: 21px;">0div>
    75. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 530px; top: 20px;">0div>
    76. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 530px; top: 19px;">0div>
    77. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 530px; top: 18px;">0div>
    78. 	<div style="width: 300px; height: 50px; position: absolute; text-align: center; font-family: Verdana; font-weight: bold; font-size: 30px; color: rgb(0, 0, 0); z-index: 88887; -webkit-user-select: none; left: 530px; top: 17px;">0div>
    79. 	<canvas width="150" height="150" style="z-index: 69; position: absolute; left: 880.7973799593747px; top: 288.1699138371274px;">canvas>
    80. 	<canvas width="150" height="150" style="z-index: 69; position: absolute; left: 94.18296936130267px; top: 175.22475277371694px;">canvas>
    81. 	<canvas width="150" height="150" style="z-index: 69; position: absolute; left: 147.39346598794316px; top: 196.6628938429057px;">canvas>
    82. 	<canvas width="150" height="150" style="z-index: 69; position: absolute; left: -235.79706690685066px; top: -486.7269952782424px;">canvas>
    83. div>
    84.  
    85. <audio src="src/wav/flap.wav">audio>
    86. <audio src="src/wav/flap.wav">audio>
    87. <audio src="src/wav/flap.wav">audio>
    88. <audio src="src/wav/flap.wav">audio>
    89. <audio src="src/wav/flap.wav">audio>
    90. <audio src="src/wav/slide.wav">audio>
    91. <audio src="src/wav/slide.wav">audio>
    92. <audio src="src/wav/slide.wav">audio>
    93. <audio src="src/wav/clang.wav">audio>
    94. <audio src="src/wav/clang.wav">audio>
    95. <audio src="src/wav/clang.wav">audio>
    96. <audio src="src/wav/coin.wav">audio>
    97. <audio src="src/wav/coin.wav">audio>
    98. <audio src="src/wav/coin.wav">audio>
    99. <audio src="src/wav/coin2.wav">audio>
    100. <audio src="src/wav/coin2.wav">audio>
    101. <audio src="src/wav/coin2.wav">audio>
    102. <audio src="src/wav/coin3.wav">audio>
    103. <audio src="src/wav/coin3.wav">audio>
    104. <audio src="src/wav/coin3.wav">audio>
    105. <audio src="src/wav/coin4.wav">audio>
    106. <audio src="src/wav/coin4.wav">audio>
    107. <audio src="src/wav/coin4.wav">audio>
    108. <audio src="src/wav/kick.wav">audio>
    109. <audio src="src/wav/kick.wav">audio>
    110. <audio src="src/wav/kick.wav">audio>
    111. <audio src="src/wav/kick.wav">audio>
    112. <audio src="src/wav/kick.wav">audio>
    113. <audio src="src/wav/kick2.wav">audio>
    114. <audio src="src/wav/kick2.wav">audio>
    115. <audio src="src/wav/kick2.wav">audio>
    116. <audio src="src/wav/kick2.wav">audio>
    117. <audio src="src/wav/kick2.wav">audio>
    118. <audio src="src/wav/kick3.wav">audio>
    119. <audio src="src/wav/kick3.wav">audio>
    120. <audio src="src/wav/kick3.wav">audio>
    121. <audio src="src/wav/kick3.wav">audio>
    122. <audio src="src/wav/kick3.wav">audio>
    123. <audio src="src/wav/kick4.wav">audio>
    124. <audio src="src/wav/kick4.wav">audio>
    125. <audio src="src/wav/kick4.wav">audio>
    126. <audio src="src/wav/kick4.wav">audio>
    127. <audio src="src/wav/kick4.wav">audio>
    128. <audio src="src/wav/kick5.wav">audio>
    129. <audio src="src/wav/kick5.wav">audio>
    130. <audio src="src/wav/kick5.wav">audio>
    131. <audio src="src/wav/kick5.wav">audio>
    132. <audio src="src/wav/kick5.wav">audio>
    133. <audio src="src/wav/squish1.wav">audio>
    134. <audio src="src/wav/squish1.wav">audio>
    135. <audio src="src/wav/squish1.wav">audio>
    136. <audio src="src/wav/squish2.wav">audio>
    137. <audio src="src/wav/squish2.wav">audio>
    138.  
    139.  
    140. body>
    141. html>

  • 相关阅读:
    数字人民币又一里程碑，中国银行将智能合约技术应用于小学教育
    Prompt 指北：如何写好 Prompt，让 GPT 的回答更加精准
    12.存储类别、链接和内存管理
    POJ 1222 EXTENDED LIGHTS OUT 反转+点灯游戏
    用K8s的公司有多少人会部署K8s？
    树莓派 Qt中 QCameraInfo 无法使用
    3.4bochs的调试方法
    MySQL8.0.24内网部署
    树和森林知识
    基于单片机的智能家居安保系统（论文+源码）
  • 原文地址：https://blog.csdn.net/u013032788/article/details/136710202