由于火狐浏览器不支持“removeNode”函数,所以一下代码只支持IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>--乒乓球--</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.main{
width:690px;
margin:0 auto;
}
#box{
width:680px;
height:340px;
border:1px solid green;
position:relative;
}
.pingpang{
position:absolute;
width:10px;
height:10px;
background-color:red;
overflow:hidden;
}
.pingpangpai{
position:absolute;
width:60px;
height:10px;
background-color:black;
overflow:hidden;
}
#bigin{
margin:0 auto;
margin:10px;
padding:5px;
}
</style>
<script text="text/javascript" language="javascript">
var Px=0,Py=0;//乒乓首部
var PPx,PPy;//乒乓拍
var Gox=10,Goy=10;
var end=false;//过界
var isOver = false;//游戏结束
var score = 0;//分数
var isMove = 0;//乒乓拍可否移动
function $(id){
return document.getElementById(id);
}
window.onload = function(){
Px = Math.round(Math.random()*33)*20;
createPingPang(Px,Py);
createPingPangPai(300,330);
AllDiv = $("box").all.tags("DIV");
AllSpan = $("box").all.tags("SPAN");
$("bigin").attachEvent('onclick',function(){
play();
});
//alert(AllDiv[0].offsetTop);
//alert(AllDiv[0].offsetLeft);
}
function createPingPang(x,y){
$('box').innerHTML +="<span class=/"pingpang/" style=/"top:"+y+";left:"+x+"/"></span>";
}
function createPingPangPai(x,y){
$('box').innerHTML +="<div class=/"pingpangpai/" style=/"top:"+y+";left:"+x+"/"></div>";
PPx = x;
PPy = y;
}
function keydown(){
key = event.keyCode;
switch(key){
case 37:move(-1,0);break;//左
case 39:move(1,0);break;//右
case 13:play();break;
}
}
function play(){
isMove = 1;
if(isOver){
isMove = 0;
clearTimeout(TimeHandle);
}else{
run();
TimeHandle = setTimeout('play()',150);
}
}
function run(){
Px = Px+Gox;
Py = Py+Goy;
isOver = isGameOver(Px,Py);
var end = isPend(Px,Py);
if(isOver){alert("游戏结束:得分"+score+"分!");return;}
if(end == "rightend"){
Gox = -10;
}else if(end == "bottomend"){
score += 5;
Goy = -10;
}else if(end == "leftend"){
Gox = 10;
}else if(end == "topend"){
Goy = 10;
}
AllSpan[0].removeNode(true);
createPingPang(Px,Py);
}
function isGameOver(x,y){
if(y>330){
return true;
}else{
return false;
}
}
function move(x,y){
if(isMove){
var Gox = x*10;
var Goy = y*10;
PPx += Gox;
PPy += Goy;
var end = isEnd(PPx,330);//乒乓拍过界
if(end=="leftend"){
if(Gox>0){
AllDiv[0].removeNode(true);
createPingPangPai(10,PPy);
}
}else if(end=="rightend"){
if(Gox<0){
AllDiv[0].removeNode(true);
createPingPangPai(610,PPy);
}
}else{
AllDiv[0].removeNode(true);
createPingPangPai(PPx,PPy);
}
}
}
function isEnd(x,y){
if(x<0){
return "leftend";
}else if(x>620){
return "rightend";
}else{
return false;
}
}
function isPend(x,y){
if(x<10){
return "leftend";
}else if(x>660){
return "rightend";
}else if(y == 320 && AllDiv[0].offsetLeft-10 <x && x<AllDiv[0].offsetLeft+60){
return "bottomend";
}else if(y <10){
return "topend";
}else{
return false;
}
}
</script>
</head>
<body οnkeydοwn="keydown()">
<div class="main">
<div id="box"></div>
<input type="button" id="bigin" value="开始游戏">
</div>
</body>
</html>