Игра в теннис

click to continue

0 0

Игра в теннис

Просмотр скрипта

<style type="text/css">
#pongTable {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 600px;
    height: 300px;
    border: 4px solid #CCC;
    background-color: #42C7FF;
    z-index: 1;
}
#playerOne {
    position: absolute;
    top: 196px;
    left: 45px;
    width: 10px;
    height: 35px;
    background-color: #777;
    z-index: 2;
}
#playerTwo {
    position: absolute;
    top: 196px;
    left: 590px;
    width: 10px;
    height: 35px;
    background-color: #777;
    z-index: 2;
}
#ball {
    position: absolute;
    top: 360px;
    left: 410px;
    width: 8px;
    height: 8px;
    clip: rect(0px 8px 8px 0px);
    background-color: #FFFFFF;
    z-index: 2;
    display: none;
}
#click {
    position: absolute;
    top: 360px;
    left: 127px;
    width: 400px;
    text-align: center;
    font-family: Tahoma;
    font-size: 10px;
    z-index: 3;
}
#scores {
    position: absolute;
    top: 330px;
    left: 124px;
    width: 400px;
    font-family: Tahoma;
    font-size: 16px;
    z-index: 3;
}
</style>
<script type="text/javascript">
var ballAng;
var speed = 3;
var ping = 5;
var pong = 0;
var mouseSpeed;
var tempY;
function init() {
    document.getElementById("click").style.display = "none";
    document.getElementById("ball").style.display = "inline";
    with( document.getElementById("ball").style ) {
        top = "160px";
        left = "310px";
    }
    document.onmouseup = null;
    document.onmousemove = movePaddle;
    ballAng = Math.round( Math.random() * 100 ) + 130;
    moveDaBall = setInterval("moveBall()", 10);
}
function movePaddle(e) {
    e = (e)?e:event;
    if( tempY ) {
        mouseSpeed = Math.round((e.clientY - tempY) * 1.5);
        if( mouseSpeed == 0 ) mouseSpeed = 1;
    }
    with( document.getElementById("playerOne").style ) {
        top = e.clientY - 18 + "px";
        if( parseInt(top) < 24 || parseInt(top) > 289 ) {
            if( parseInt(top) < 24 ) {
                top = "24px";
            } else {
                top = "289px";
            }
        }
    }
    tempY = e.clientY;
}
function moveBall() {
    var ballX = parseInt(document.getElementById("ball").style.left);
    var ballY = parseInt(document.getElementById("ball").style.top);
    var playOneX = parseInt( document.getElementById("playerOne").style.left );
    var playOneY = parseInt( document.getElementById("playerOne").style.top );
    var playTwoX = parseInt( document.getElementById("playerTwo").style.left );
    var playTwoY = parseInt( document.getElementById("playerTwo").style.top );
    if( ballY >= (playOneY - 5) && ballY <= (playOneY + 35 + 5) && ballX >= playOneX && ballX <= (playOneX + 10) ) {
        if( pong == 3 ) {
            ping++;
            pong = 0;
        } else {
            pong++;
        }
        document.getElementById("ball").style.left = playOneX + 10 + "px";
        ballAng = 180 - ballAng - mouseSpeed;
    }
    if( ballY >= (playTwoY - 5) && ballY <= (playTwoY + 35 + 5) && ballX >= playTwoX && ballX <= (playTwoX + 10) ) {
        if( pong == 3 ) {
            ping++;
            pong = 0;
        } else {
            pong++;
        }
        document.getElementById("ball").style.left = playTwoX + "px";
        ballAng = 180 - ballAng;
    }
    if( ballY < 25 || ballY > 316 ) {
        document.getElementById("ball").style.top = (ballY < 25)?25+"px":316+"px";
        ballAng = 360 - ballAng;
    }
    if( ballX <= 24 || ballX >= 617 ) {
        document.getElementById("ball").style.left = (ballX <=24)?24+"px":417+"px";
        if( ballX<= 24 ) {
            endPoint(document.getElementById("twoScore"));
        } else {
            endPoint(document.getElementById("oneScore"));
        }
    }
    moveAI( ballY );
    moveObjAtAngle( document.getElementById("ball"), ballAng, ping);
}
function moveObjAtAngle( obj, ang, dist ) {
    with( obj.style ) {
        left = parseInt(left) + ( dist * Math.cos( ang * (Math.PI/180) ) ) + "px";
        top  = parseInt(top)  - ( dist * Math.sin( ang * (Math.PI/180) ) ) + "px";
    }
}
function moveAI( y ) {
    var AI = document.getElementById("playerTwo");
    y = y - 10;
    y = parseInt(AI.style.top) + ((y - parseInt(AI.style.top)) / speed);
    if( y < 24 || y > 289 ) {
        if( y < 24 ) {
            y = 24;
        } else {
            y = 289;
        }
    }
    AI.style.top = y +"px";
}
function endPoint(place) {
    clearInterval(moveDaBall);
    ping = 7;
    pong = 0;
    document.onmouseup = init;
    document.getElementById("click").innerHTML = "click to continue";
    place.innerHTML = parseInt(place.innerHTML) + 1;
    if( parseInt(place.innerHTML) == 10 ) {
        if( place.id == "oneScore" ) {
            endGame(1);
        } else {
            endGame(0);
        }
    }
    document.getElementById("click").style.display = "inline";
}
function endGame(win) {
    document.onmouseup = restartGame;
    if( win ) {
        document.getElementById("click").innerHTML = "<strong>you are dah winnah!</strong><br /> click to start over";
    } else {
        document.getElementById("click").innerHTML = "<strong>you are dah losah!</strong><br /> click to start over";
    }
}
function restartGame() {
    document.getElementById("oneScore").innerHTML = 0;
    document.getElementById("twoScore").innerHTML = 0;
    init();
}
document.onmouseup = init;
</script>

<div id="pongTable">
    <div style="float: right; width: 50%; height: 100%; border-left: 2px dashed #DDD;"> </div>
</div>
<div id="playerOne" style="left: 45px; top: 146px"> </div>
<div id="playerTwo" style="left: 590px; top: 146px"> </div>
<div id="ball" style="left: 210px; top: 160px"> </div>
<div id="click">click to continue</div>
<div id="scores">
    <span style="float: left;" id="oneScore">0</span>
    <span style="float: right;" id="twoScore">0</span> <br><br><br><br>
    <center>Sh.Sa.</center>

Пример создания сайта
Размещение сайта в Интернете
Раскрутка сайта в Интернете
Заработок в Интернете
Visual Basic 6.0 с примерами
VBScript
Руководство по C++
JavaScript
Анимация в формате GIF
Вставка видео SWF в сайт.
Пиктограмма сайта (favicon)

Оригинальные меню

Анимированный текст

Календари и часы

Эффектная графика

Дополнительные окна

Таблицы

Таблица с закругленными уголками

Калькуляторы

Операции с цветом

Кнопки

Разное