8Gamers.NET

Копия для печати: Понг для сайта

Прислано Ukraine Vova 17-09-2012 16:42
#1

Код
<SCRIPT language=Javascript1.2>
<!--
var message='8Gamers.NET'; function click(e)
{if (document.all) {if (event.button == 2) {alert(message);return false;}}
if (document.layers) {if (e.which == 3) {alert(message);return false;}}}
if (document.layers) {document.captureEvents(Event.MOUSEDOWN);}
document.onmousedown=click;
// -->
</SCRIPT
<SCRIPT language=Javascript1.2>
<!--
var message='8Gamers.NET'; function click(e)
{if (document.all) {if (event.button == 2) {alert(message);return false;}}
if (document.layers) {if (e.which == 3) {alert(message);return false;}}}
if (document.layers) {document.captureEvents(Event.MOUSEDOWN);}
document.onmousedown=click;
// -->
</SCRIPT>
<style type="text/css">
#pongTable {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 300px;
border: 4px solid #000;
background-color: #000;
z-index: 1;
}
#playerOne {
position: absolute;
top: 196px;
left: 45px;
width: 10px;
height: 35px;
background-color: #ffffff;
z-index: 2;
}
#playerTwo {
position: absolute;
top: 196px;
left: 390px;
width: 10px;
height: 35px;
background-color: #ffffff;
z-index: 2;
}
#ball {
position: absolute;
top: 160px;
left: 210px;
width: 7px;
height: 7px;
clip: rect(0px 7px 7px 0px);
background-color: #ffffff;
z-index: 2;
display: none;
}
#click {
position: absolute;
top: 160px;
left: 27px;
width: 400px;
text-align: center;
font-family: Tahoma;
font-size: 20px;
z-index: 3;
}
#scores {
position: absolute;
top: 330px;
left: 24px;
width: 400px;
font-family: Tahoma;
font-size: 11px;
z-index: 3;
}
</style>

<script type="text/javascript">

var ballAng;
var speed = 3;
var ping = 4;
var pong = 1;
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 = "210px";
}
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 = 5;
}
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 >= 417 ) {
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 = "<span style='color:white'>Нажми для продолжения</span>";
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 = "<span style='color:white'><strong>Ты выиграл!</strong><br /></span><span style='color:white'> Кликни для начала</span>";
} else {
document.getElementById("click").innerHTML = "<span style='color:white'><strong>Ты проиграл!</strong><br /></span><span style='color:white'> Кликни для начала</span>";
}
}
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: 390px; top: 146px"> </div>
<div id="ball" style="left: 210px; top: 160px"> </div>
<div id="click"><span style='color:white'>Нажми для начала!</span></div>
<div id="scores">
<span style="float: left;" id="oneScore">0</span>
<span style="float: right;" id="twoScore">0</span>
</div>




Игра пинпонг для сайта.

Пример в прикреплен в сообщении.

Редактировал Ukraine Vova 16-06-2012 09:19