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

最新推荐文章于 2024-06-10 13:30:00 发布

hwh4729

最新推荐文章于 2024-06-10 13:30:00 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript function 游戏 class xhtml div

本文链接：https://blog.csdn.net/hwh4729/article/details/5636653

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

hwh4729

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript写的小时候玩的乒乓球小游戏

<br />由于火狐浏览器不支持“removeNode”函数，所以一下代码只支持IE.<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>--乒乓球-
复制链接

扫一扫

专栏目录