|
<![CDATA[
<html>
<head>
<title>JavaScript DESTINATION - P192</title>
<script language="JavaScript">
<!--
window.captureEvents( Event.MOUSEMOVE | Event.CLICK | Event.KEYUP );
window.onMouseMove = movePaddle;
window.onClick = click;
window.onKeyUp = key;
var isDemoing = true;
var infoString = "<table><tr><td valing=top><font class=\"info\">klikni</font></td><td><font class=\"info\">niekde, ked chces hrat</td></tr><tr><td></td><td><font class=\"info\" ID=\"bottomEx\">?</font><font class=\"info\"> napoveda</font></td></tr><tr><td></td><td><font class=\"info\" ID=\"bottomEx\">Q</font><font class=\"info\"> koniec</font></td></tr></table>";
var screenW;
var screenH;
var offset = 4;
var inter = 30;
var paddleH = 150;
var paddleW = 20;
var ballH = 20;
var ballW = 20;
var origBallDeltaX;
var origBallDeltaY;
var ballDeltaX;
var ballDeltaY;
var rDeltaY;
var lDeltaY;
var opponentSpeed = 2/3;
var sOpponentSpeed = 2/3;
var fOpponentSpeed = 7/8;
var demoSpeed = 3/4;
var leftTurn = false;
var l;
var r;
var b;
var scoreDoc;
var scoreLayer;
var infoDoc;
var infoLayer;
var bottomLayer;
var helpLayer;
var lScore = 0;
var rScore = 0;
function init(){
screenW = self.innerWidth;
screenH = self.innerHeight;
l = document.layers['leftPaddle'];
r = document.layers['rightPaddle'];
b = document.layers['ball'];
l.moveTo(offset, (screenH - paddleH)/2);
r.moveTo(screenW - paddleW - offset, (screenH - paddleH)/2);
bottomLayer = document.layers['bottom'];
bottomLayer.moveTo(screenW/2 - 100, screenH - 26 - offset);
document.layers['bottomMask'].moveTo(screenW/2 - 100, screenH - 26 - offset);
scoreLayer = document.layers['score'];
scoreLayer.moveTo(screenW/2 - 100, offset);
scoreDoc = document.layers['score'].document;
writeScore();
infoLayer = document.layers['infoLayer'];
infoLayer.moveTo((screenW - 430)/2, (screenH - 320)/2);
infoDoc = infoLayer.document;
infoDoc.open("text/html", "replace");
infoDoc.writeln("<font class=\"info\" ID=\"center\">"+infoString+"</font>");
infoDoc.close();
helpLayer = document.layers['helpLayer'];
helpLayer.moveTo((screenW - 430)/2, (screenH - 320)/2);
origBallDeltaX = screenW / 110;
origBallDeltaY = screenH / 60;
serveBall();
autoPlay();
moveOpponent();
moveBall();
}
function movePaddle(e){
if(!isDemoing){
oldLT = l.top;
if(e.pageY < paddleH/2){
l.top = 0;
}else if(e.pageY > screenH-paddleH/2){
l.top = screenH-paddleH;
}else{
l.top = e.pageY - paddleH/2;
}
setTimeout("lDeltaY = oldLT - l.top;", inter);
}
return true;
}
function serveBall(){
b.moveTo((screenW - ballW)/2, (screenH - ballH)/2);
choice = Math.random();
if(choice < 0.5){
ballDeltaX = -origBallDeltaX;
}else{
ballDeltaX = origBallDeltaX;
}
choice = Math.random();
if(choice < 0.5){
ballDeltaY = -origBallDeltaY;
}else{
ballDeltaY = origBallDeltaY;
}
}
function moveBall(){
b.moveBy(ballDeltaX, ballDeltaY);
if(b.top < 0 || b.top > screenH - ballH){
ballDeltaY = -ballDeltaY;
}
if(b.left < paddleW-offset){
checkLPaddle();
}else if(b.left > screenW-paddleW-offset-ballW){
checkRPaddle();
}
bs = setTimeout("clearTimeout(bs);moveBall();", inter);
}
function checkLPaddle(){
if(b.top < l.top + paddleH + ballH &&
b.top > l.top - ballH){
ballDeltaX = -ballDeltaX;
ballDeltaY = ballDeltaY/2 - lDeltaY;
opponentSpeed = fOpponentSpeed;
}else{
rScore++;
writeScore();
serveBall();
java.lang.Thread.sleep(300);
}
}
function checkRPaddle(){
if(b.top < r.top + paddleH + ballH &&
b.top > r.top - ballH){
ballDeltaX = -ballDeltaX;
ballDeltaY = ballDeltaY/2 - rDeltaY;
opponentSpeed = sOpponentSpeed;
}else{
lScore++;
writeScore();
serveBall();
java.lang.Thread.sleep(300);
}
}
function writeScore(){
if(lScore >= 7 || rScore >= 7){
isDemoing = true;
infoDoc.open("text/html", "replace");
infoDoc.write("<font class=\"info\" ID=\"center\">"+infoString+"</font>");
infoDoc.close();
autoPlay();
serveBall();
if(lScore > rScore){
scoreDoc.open("text/html", "replace");
scoreDoc.write("<font class=\"score\" ID=\"center\">vyhrali ste</font>");
scoreDoc.close();
}else{
scoreDoc.open("text/html", "replace");
scoreDoc.write("<font class=\"score\" ID=\"center\">vyhral pocitac</font>");
scoreDoc.close();
}
lScore = 0;
rScore = 0;
}else{
scoreDoc.open("text/html", "replace");
scoreDoc.write("<font class=\"score\" ID=\"left\">"+lScore.toString()+"</font>");
scoreDoc.write("<font class=\"score\" ID=\"right\">"+rScore.toString()+"</font>");
scoreDoc.close();
}
}
function moveOpponent(){
oldRT = r.top;
ideal = b.top + ballH/2 - paddleH/2;
current = r.top;
if(ideal - current < 0){
paddleDeltaY = (-Math.abs(ballDeltaY)) * opponentSpeed;
}else{
paddleDeltaY = (Math.abs(ballDeltaY)) * opponentSpeed;
}
rx = screenW - paddleW - offset;
r.moveBy(0, paddleDeltaY);
if(r.top < 0){
r.moveTo(rx, 0);
}else if(r.top + paddleH > screenH){
r.moveTo(rx, screenH - paddleH);
}
setTimeout("rDeltaY = oldRT - r.top;", inter);
ops = setTimeout("clearTimeout(ops);moveOpponent();", 30);
}
function autoPlay(){
if(isDemoing){
oldLT = l.top;
ideal = b.top + ballH/2 - paddleH/2;
current = l.top;
if(ideal - current < 0){
paddleDeltaY = (-Math.abs(ballDeltaY)) * demoSpeed;
}else{
paddleDeltaY = (Math.abs(ballDeltaY)) * demoSpeed;
}
lx = offset;
l.moveBy(0, paddleDeltaY);
if(l.top < 0){
l.moveTo(lx, 0);
}else if(l.top + paddleH > screenH){
l.moveTo(lx, screenH - paddleH);
}
setTimeout("lDeltaY = oldLT - l.top;", inter);
aps = setTimeout("clearTimeout(aps);autoPlay();", inter);
}
}
function click(e){
if(e.pageY > screenH - 26 - offset &&
(e.pageX > screenW/2 - 100 && e.pageX < screenW/2 + 100)){
bClick(e);
return true;
}
if(isDemoing){
clearTimeout(aps);
isDemoing = false;
if(helpShowing){
helpHide();
}
lScore = 0;
rScore = 0;
writeScore();
infoDoc.open("text/html", "replace");
infoDoc.close();
serveBall();
}
return true;
}
function key(e){
if(e.which == 63 || e.which == 47){
help();
}else if(e.which == 113 || e.which == 81){
self.close();
}else if(e.which == 13){
if(helpShowing){
helpHide();
}
}
return true;
}
var helpShowing = false;
function bClick(e){
if(e.layerX > 100){
self.close();
}else{
help();
}
}
function help(){
helpShowing = true;
isDemoing = true;
autoPlay();
helpLayer.visibility = "show";
}
function helpHide(){
helpShowing = false;
helpLayer.visibility = "hide";
}
// -->
</script>
<style type="text/javascript">
classes.score.all.fontFamily = "helvetica";
classes.score.all.fontSize = "1.2em";
classes.score.all.fontWeight = "bold";
classes.score.all.color = "#99ff99";
classes.info.all.fontFamily = "helvetica";
classes.info.all.fontSize = "1.6em";
classes.info.all.fontWeight = "bold";
classes.info.all.color = "#9999ff";
classes.bottom.all.fontFamily = "helvetica";
classes.bottom.all.fontSize = "1.2em";
classes.bottom.all.fontWeight = "bold";
classes.bottom.all.color = "#ff9999";
classes.help.all.fontFamily = "courier";
classes.help.all.fontSize = "1.0em";
classes.help.all.color = "#333333";
classes.helpHead.all.fontFamily = "times";
classes.helpHead.all.fontSize = "1.2em";
classes.helpHead.all.fontWeight = "bold";
classes.helpHead.all.color = "#333333";
ids.left.align = "left";
ids.right.align = "right";
ids.center.align = "center";
ids.bottomEx.color = "#ff9999";
</style>
</head>
<body bgcolor=#000000 onLoad=init();>
<layer width=200 height=80 left=220 top=4 bgcolor=#000000 name="score" z-index=1>
</layer>
<layer width=100 height=100 left=0 top=0 bgcolor=#000000 z-index=2>
</layer>
<layer width=200 height=80 left=220 top=4 name="bottom" z-index=1>
<font class="bottom" ID="left">?</font>
<font class="bottom" ID="right">Q</font>
</layer>
<layer width=200 height=80 left=220 top=4 name="bottomMask" z-index=5>
</layer>
<layer width=430 height=320 left=90 top=50 z-index=1 name="infoLayer">
</layer>
<layer width=430 height=320 left=90 top=50 z-index=5 bgcolor=#ffff99 name="helpLayer" visibility="hide">
<font class="helpHead">Strucny navod ku hre PING-PONG</font>
<p>
<font class="help">
<li>Cielom hry je odrazit loptu tak, aby
<li>ju vas spoluhrac (pocitac) nechytil.
<li>Po ziskani 7 bodov vyhravate.
<p>
Kliknite niekde, ked chcete zacat hru.
</font>
</layer>
<layer width=20 height=150 left=4 top=165 bgcolor=#999999 name="leftPaddle" z-index=4>
</layer>
<layer width=20 height=20 left=310 top=230 bgcolor=#dddddd name="ball" z-index=4>
</layer>
<layer width=20 height=150 left=616 top=165 bgcolor=#999999 name="rightPaddle" z-index=4>
</layer>
</body>
</html>
]]>
|