python网站和js做网站,公司网站建设平台,贵州安顺做公司网站,大美工素材网可以以电脑浏览器的手机模式打开#xff0c;也可以在手机浏览器中直接打开
游戏运用了Canvas的drawImage#xff0c;translate#xff0c;rotate#xff0c;save#xff0c;restore#xff0c;fillRect等API。 采用中介者模式#xff0c;Game类统领全局#xff0c;负责…可以以电脑浏览器的手机模式打开也可以在手机浏览器中直接打开
游戏运用了Canvas的drawImagetranslaterotatesaverestorefillRect等API。 采用中介者模式Game类统领全局负责读取资源设置定时器维护各个物体实例所有的演员都是Game类new 出来的 游戏项目外部的语句就一条
碰撞检测
因此小鸟的图片其实是一个长方形而且角度又不断变化导致中心点难于掌握因此很难判断小鸟与管子的碰撞。 这里画了张图帮助自己理解
小鸟下落的速度
需要模拟小鸟的重力高中物理没有白学
分数的计算
分数的计算与碰撞检测类似设置一个开关当管子重新出现时设置为true。当分值加1时设置为false。小鸟的最左边的x坐标如果超出了管子的xwidth就认为成功通过。
场景管理器
场景管理器有4个方法enter,update,renderbindEvent。其中定时器在每帧执行update方法和render方法。enter方法由业务来调用比如用户点击了按钮此时就进入场景2鸟撞到了管子就进入场景3。 这样就把游戏的各个不同阶段分离出来方便处理。
演示下载地址https://www.erdangjiade.com/js/7968.html
源码实例如下
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
titleflappy bird压扁小鸟小游戏/titlemeta propertyog:type contentwebsite
meta propertyog:title contentSquishy Bird
meta propertyog:site_name contentSquishy Birds
meta propertyog:image contentsrc/wav/fbthumb.jpg
meta nameviewport contentuser-scalableno, initial-scale0.5, width610, height1024link relimage_src hrefsrc/wav/fbthumb.jpg/head
body stylemargin: 0px; overflow: hidden;-moz-user-select: none;-webkit-user-select: none;user-select: none; div idlgd stylewidth: 300px; height: 64px; position: absolute; left: 533px; top: 301px; font-family: Verdana; font-size: 16px; font-weight: bold; text-align: center;Loading.../divscript typetext/javascript srcsrc/squishybird.js/scriptdiv styleoverflow: hidden; position: relative; width: 1366px; height: 620px;canvas width1366 height620/canvasimg srcsrc/wav/pipe1.png width148 height1664 styleposition: absolute; left: 609px; top: -1533px; z-index: 420;img srcsrc/wav/pipe2.png width148 height1664 styleposition: absolute; left: 609px; top: 400.9999999999999px; z-index: 420;canvas width1366 height88 styleposition: absolute; z-index: 31337; left: 0px; top: 532px;/canvascanvas width1366 height256 styleposition: absolute; z-index: 60; left: 0px; top: 276px;/canvascanvas width1366 height216 styleposition: absolute; z-index: 61; left: 0px; top: 316px;/canvasimg srcsrc/wav/logo.png styleposition: absolute; opacity: 0; z-index: 42069; left: 370px; top: 174px; display: none;img srcsrc/wav/gameover.png styleposition: absolute; opacity: 1; z-index: 42069; left: 370px; top: 93px; display: inline;img srcsrc/wav/clicktostart.png styleposition: absolute; opacity: 0; z-index: 42070; left: 514px; top: 435px; display: none;div stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divdiv stylewidth: 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;0/divcanvas width150 height150 stylez-index: 69; position: absolute; left: 880.7973799593747px; top: 288.1699138371274px;/canvascanvas width150 height150 stylez-index: 69; position: absolute; left: 94.18296936130267px; top: 175.22475277371694px;/canvascanvas width150 height150 stylez-index: 69; position: absolute; left: 147.39346598794316px; top: 196.6628938429057px;/canvascanvas width150 height150 stylez-index: 69; position: absolute; left: -235.79706690685066px; top: -486.7269952782424px;/canvas
/divaudio srcsrc/wav/flap.wav/audio
audio srcsrc/wav/flap.wav/audio
audio srcsrc/wav/flap.wav/audio
audio srcsrc/wav/flap.wav/audio
audio srcsrc/wav/flap.wav/audio
audio srcsrc/wav/slide.wav/audio
audio srcsrc/wav/slide.wav/audio
audio srcsrc/wav/slide.wav/audio
audio srcsrc/wav/clang.wav/audio
audio srcsrc/wav/clang.wav/audio
audio srcsrc/wav/clang.wav/audio
audio srcsrc/wav/coin.wav/audio
audio srcsrc/wav/coin.wav/audio
audio srcsrc/wav/coin.wav/audio
audio srcsrc/wav/coin2.wav/audio
audio srcsrc/wav/coin2.wav/audio
audio srcsrc/wav/coin2.wav/audio
audio srcsrc/wav/coin3.wav/audio
audio srcsrc/wav/coin3.wav/audio
audio srcsrc/wav/coin3.wav/audio
audio srcsrc/wav/coin4.wav/audio
audio srcsrc/wav/coin4.wav/audio
audio srcsrc/wav/coin4.wav/audio
audio srcsrc/wav/kick.wav/audio
audio srcsrc/wav/kick.wav/audio
audio srcsrc/wav/kick.wav/audio
audio srcsrc/wav/kick.wav/audio
audio srcsrc/wav/kick.wav/audio
audio srcsrc/wav/kick2.wav/audio
audio srcsrc/wav/kick2.wav/audio
audio srcsrc/wav/kick2.wav/audio
audio srcsrc/wav/kick2.wav/audio
audio srcsrc/wav/kick2.wav/audio
audio srcsrc/wav/kick3.wav/audio
audio srcsrc/wav/kick3.wav/audio
audio srcsrc/wav/kick3.wav/audio
audio srcsrc/wav/kick3.wav/audio
audio srcsrc/wav/kick3.wav/audio
audio srcsrc/wav/kick4.wav/audio
audio srcsrc/wav/kick4.wav/audio
audio srcsrc/wav/kick4.wav/audio
audio srcsrc/wav/kick4.wav/audio
audio srcsrc/wav/kick4.wav/audio
audio srcsrc/wav/kick5.wav/audio
audio srcsrc/wav/kick5.wav/audio
audio srcsrc/wav/kick5.wav/audio
audio srcsrc/wav/kick5.wav/audio
audio srcsrc/wav/kick5.wav/audio
audio srcsrc/wav/squish1.wav/audio
audio srcsrc/wav/squish1.wav/audio
audio srcsrc/wav/squish1.wav/audio
audio srcsrc/wav/squish2.wav/audio
audio srcsrc/wav/squish2.wav/audio/body
/html
