项目实践--跳动的小鸟

1.通过键盘的输入上下左右,移动小鸟,而空格键为跳动的小鸟.

   1)实现上下左右移动.

style代码:

//transform实现图片的转向.

 <style>
        #bird{  position: absolute;}
        .d-left{transform: rotateY(180deg);}
    </style>

html代码:

//图片是绝对定位.

<img src="bird.jpg" id = 'bird' >

js代码:

window.onload = functino(){<pre name="code" class="html">

var g = 0;var bird = document.getElement('bird');//onkeydown检测按键按下时发生

</pre>//keyCode:37-左 38-上 39-右 40-下//主要是通过图片的top和left距离多少来实现的图片的移动document.onkeydown = function(){<pre name="code" class="html">e = e||window.event;
var startLeft = parseInt(bird.style.left);
var startTop = parseInt(bird.style.top);
if(e.keyCode==37){<pre name="code" class="html">

//赋值bird的类名,通过类名来设置当这个鸟转向另一边,头就转向.
bird.className = 'd-left';bird.style.left = startLeft - 10+'px';
}else if(e.keyCode==38){bird.style.top = startTop -10+'px';}else if(e.keyCode==39){bird.style.left = startLeft +10+'px';}else if(e.keyCode ==40){bird.style.top = startTop +10+'px';}

//通过函数Math.cos来达到一个弧度

//实现一个函数
<pre name="code" class="html"> else if (e.keyCode ==32){

function jump(){var y = 0;if(g<1){y = Math.cos(parseFloat(g*Math.PI))*15;g+=0.1;}else{clearInterval(timer);g=0;}

if(bird.className =='d-left'){
bird.style.left = parseInt(bird.style.left)-8+'px;
bird.style.top = parseInt(bird.style.top)-y+'px';
}else{
bird.style.left = parseInt(bird.style.left)+8+'px';
bird.style.top = parseInt(bird.style.top )-y+'px';
                }
                }
                var timer = setInterval(jump,50);
            }
        }
        }

这个主要通过键盘控制小鸟的上下左右.而在跳跃的函数jump中,当空格键按下时每50毫秒就调用函数jump.

在jump中控制小鸟的top距离就能跳,用Math.cos控制跳上又落下来.0到PI之间,当0-PI/2时为正数,PI/2-PI时为负数.

所以top在-y和+y之间变化.left为控制它跳的长度.