用JavaScript写的小时候玩的乒乓球小游戏

由于火狐浏览器不支持“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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值