下面这个代码出现了一点点问题，下面那个代码可以运行。
<html>
<head>
<style>
#main{width:800px;height:600px;background-color:#000;margin:50px auto;position:relative}
#star{width:80px;height:80px;position:absolute;left;360px}
#girl{width:80px;height:80px;bottom:10px;position:absolute;left:360px}
.goright{/*向右的时候*/
transform:rotateY(180deg);
}
.goleft{/*向左的时候*/
transform:rotateY(0deg);
}
</style>
</head>
<body>
<div id = "main">
<input type = "button" value = "开始" onclick = "startGame()" id = "btnStart"/>
<img src = "image/star.gif" id = "star"/>
<img src = "image/girl.gif" id = "girl"/>
<span id = "bd" style = "color : white;font-size:20px">50</span>
<audio src = "t.mp3" id = "audio"></audio>
</div>
</body>
<script>
var girlX = 360;
var starY = 0;
var girl = document.getElementById("girl");
var star = document.getElementById("star");
var btnStart=document.getElementById("btnStart");
var timer=null;
var rate = 20;
var blood = 50;
var bd = document.getElementById("bd");
var audio = document.getElementById("audio");
function startGame(){
if(timer == null){
timer= window.setInterval(move,100);
btnStart.value="暂停";
}else{
window.clearInterval(timer);
timer=null;
btnStart.value="开始";
}
}
function move(){
//掉到低端，从头掉落
if(starY > 600){
starY = 0;
blood -= 10;
bd.innerHTML = blood;
star.style.left = parseInt(Math.random()*720)+"px";
rate = parseInt(Math.random()*40)+20;
if(blood <= 0){
window.clearInterval(timer);
alert("GAME OVER");
}
else
starY+=rate;
star.style.top=starY+"px";
//碰撞之后重新掉落
if(isTouch(girl,star) == true){
starY = 0;
star.style.left = parseInt(Math.random()*720)+"px";
rate = parseInt(Math.random()*40)+20;
blood += 5;
bd.innerHTML = blood;
audio.play();
}
}
//碰撞测试,检测是否发生碰撞
function isTouch(a,b){
var a_left=parseInt(window.getComputedStyle(a,null)["left"]);//a.style.left;
var a_right=a_left+parseInt(window.getComputedStyle(a,null)["width"]);//a.style.width;
var a_top=parseInt(window.getComputedStyle(a,null)["top"]);a.style.top;
var a_bottom=a_top+parseInt(window.getComputedStyle(a,null)["height"]);//a.style.height;
var b_left=parseInt(window.getComputedStyle(b,null)["left"]);//b.style.left;
var b_right=b_left+parseInt(window.getComputedStyle(b,null)["width"]);//b.style.width;
var b_top=parseInt(window.getComputedStyle(b,null)["top"]);a.style.top;
var b_bottom=b_top+parseInt(window.getComputedStyle(b,null)["height"]);//a.style.height;
//排除没有接触到的4种情况，就是接触到了
if(a_right<b_left||a_left>b_right||a_bottom<b_top||a_top>b_bottom)
return false;
else
return true;
}
document.onkeydown = function(e){
switch(e.keyCode){
case 37://girlX = girl-5 < 0 ? 720 : (girlX-5);
if(girlX >= 10){
girlX -= 10;
}
girl.className = "goleft";
break;
case 39://girlX = girl+5 > 720 ? 0 : (girlX+5);
if(girlX <= 720){
girlX += 10;
}
girl.className = "goright";
break;
}
girl.style.left = girlX + "px";
}
</script>
</html>下面这个代码可以运行哦，欢迎拿去练手
<html>
<head>
<style>
#main{width:800px;height:600px;background:#000;margin:50px auto;position:relative;overflow:hidden}
#star{width:80px;height:80px;left:360px;position:absolute}
#girl{width:80px;height:80px;left:360px;bottom:10px;position:absolute}
.goright{/*向右的时候*/
transform:rotateY(180deg);
}
.goleft{/*向左的时候*/
transform:rotateY(0deg);
}
</style>
</head>
<body>
<div id="main">
<input type="button" value="开始" onclick="startGame()" id="btnStart"/>
<img src="image/star.gif" id="star"/>
<img src="image/girl.gif" id="girl"/>
<span id="bb" style="color:white;font-size:28px">50</span>
<audio src="t.mp3" id="audio"></audio>
</div>
</body>
<script>
var girlX=360;
var starY=0;
var girl=document.getElementById("girl");
var star=document.getElementById("star");
var btnStart=document.getElementById("btnStart");
var bb=document.getElementById("bb");
var audio=document.getElementById("audio");
var timer=null;
var rate=20;
var blood=50;
function startGame(){
if(timer==null){
timer= window.setInterval(move,100);
btnStart.value="暂停";
}else{
window.clearInterval(timer);
timer=null;
btnStart.value="开始";
}
}
function move(){
if(starY>600){
blood-=10;//掉地上就扣分
bb.innerHTML=blood;
if(blood<=0){
window.clearInterval(timer);
alert("GAME OVER");
}
starY=0;
star.style.left=parseInt(Math.random()*720)+"px";
rate=20+parseInt(Math.random()*40);
}
else
starY+=rate;
star.style.top=starY+"px";
if(isTouch(girl,star)==true){
blood+=20;//接到了+20分
bb.innerHTML=blood;
audio.play();
starY=0;
star.style.left=parseInt(Math.random()*720)+"px";
rate=20+parseInt(Math.random()*40);
}
}
function isTouch(a,b){
var a_left=parseInt(window.getComputedStyle(a,null)["left"]);//a.style.left;
var a_right=a_left+parseInt(window.getComputedStyle(a,null)["width"]);//a.style.width;
var a_top=parseInt(window.getComputedStyle(a,null)["top"]);a.style.top;
var a_bottom=a_top+parseInt(window.getComputedStyle(a,null)["height"]);//a.style.height;
var b_left=parseInt(window.getComputedStyle(b,null)["left"]);//b.style.left;
var b_right=b_left+parseInt(window.getComputedStyle(b,null)["width"]);//b.style.width;
var b_top=parseInt(window.getComputedStyle(b,null)["top"]);a.style.top;
var b_bottom=b_top+parseInt(window.getComputedStyle(b,null)["height"]);//a.style.height;
//排除没有接触到的4种情况，就是接触到了
if(a_right<b_left||a_left>b_right||a_bottom<b_top||a_top>b_bottom)
return false;
else
return true;
}
document.onkeydown=function(e){
switch(e.keyCode){
case 37:
girlX=(girlX-10<0)?720:(girlX-10);
girl.className="goleft";
break;
case 39:
girlX=(girlX+10>720)?0:(girlX+10);
girl.className="goright";
break;
}
girl.style.left=girlX+"px";
}
</script>
</html>
