js实现小鸟飞行穿越柱子游戏代码
代码语言:html
所属分类:游戏
代码描述:js实现小鸟飞行穿越柱子游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> #contaner{ width: 100%; height: 600px; margin: 0px auto; background: url(//repo.bfw.wiki/bfwrepo/images/game/feiniao/sky.png); position: relative; overflow: hidden; text-align: center; } #contaner #bird{ background: url(//repo.bfw.wiki/bfwrepo/images/game/feiniao/bird1.png) no-repeat; position: absolute; top: 230px; width: 30px; height: 30px; left: 50%; } #contaner h2{ font-weight: bold; color: #fff; cursor: pointer; top: 290px; position: absolute; left: 50%; margin-left: -30px; animation: bound 0.3s ease-in-out 0s infinite alternate; } @keyframes bound{ 0%{ transform: scale(1); } 25%{ transform: scale(0.8); } 50%{ transform: scale(1.2); } 100%{ transform: scale(1.5); color: #09f; } } #contaner #success{ width: 300px; height: 300px; font-weight: bold; margin: 60px -150px; position: absolute; z-index: 999; left: 50%; text-align: center; display: none; } #mask{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0.8; z-index: 99; display: none; } #contaner #success h1{ font-size: 35px; margin-top: 40px; color: #f00; } #contaner #success #results,span{ margin-top: 20px; color: #ff0; font-size: 20px; font-weight: bold; } #contaner #co{ color: #fff; font-weight: bold; font-size: 30px; position: fixed; top: 0; left: 50%; z-index: 99; } </style> </head> <body> <div id="contaner"> <p id="co"></p> <div id="bird"></div> <h2 id="new">点击开始</h2> <div id="mask"></div> <div id="success"> <h1>Game Over</h1> <span>You Results:</span><p id="results"></p> </div> </div> <script > var start=document.getElementById('new'); var flying=true;//用于判断小鸟的运动 // 初始化小鸟 var birds={ stepx: 52, stepy: 0, x: bird.offsetLeft, y: bird.offsetTop } //背景 var sky={ x: 0 } var count=0;//计数 var bg=setInterval(function(){ sky.x-=2;//控制背景移动 contaner.style.backgroundPositionX=sky.x+'px'; birds.stepy+=1;//小鸟下落 birds.y+=birds.stepy; if(birds.stepy>=10){//小鸟运动 birds.stepy=-10;//小鸟飞起 birds.y+=birds.stepy; } bird.style.top=birds.y+'px'; },30) start.onclick=function(){//开始游戏 start.style.display=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0