JavascriptPongTouch

<html>

<body>

<!--canvas=Zeichenbereich-->

<canvas id="ctx" width="400" height="400" style="border:1px solid #000000"></canvas>

<!--vvjavascriptbereichvv-->

<script>

//Variable

var ctx=document.getElementById('ctx').getContext('2d');//document.getElementById(id).getContext('2d') js

ctx.font = "20px Georgia";//js

var height=document.getElementById("ctx").height;//js

var width=document.getElementById("ctx").width;//dto

var lgr=5;//linke Grenze, kleine Korrektur

var ms=40;//Zeit für Wiederholung in Millisekunden

var t=0;var talt=0;

var spieler={x:390,y:200}//Objektvariable, Ansprache spieler.x und spieler.y

var ball={x:100,spdx:10,y:200,spdy:10}//dto, spd=speed=Geschwindigkeit

//Funktionen

var si=setInterval(update,ms);//update()-Aufruf nach Millisekunden ms, ohne var funktioniert clearInterval nicht

function update(){

ctx.clearRect(0,0,width,height);//js, löscht canvas

//updateBall

ball.x+=ball.spdx;if(t>talt){ball.x=ball.x+10}

ball.y+=ball.spdy;

if(ball.x>spieler.x-30 &&ball.x<spieler.x-10 && ball.y>spieler.y-20 && ball.y<spieler.y+60){ball.spdx=-ball.spdx;t++}//Spieler-Ball Kontakt

if(ball.x<=lgr){ball.spdx=-ball.spdx;}//Reflexion links

if(ball.y>=height-20 || ball.y<10){ball.spdy=-ball.spdy;}//dto o+u

talt=t;

//drawBall

ctx.save();//.save js

ctx.fillStyle='red';//.fillStyle, red js

ctx.fillRect(ball.x,ball.y,20,20);//fillRect(lagex,lagey,länge,breite) js

ctx.restore();//.restore js

//updateSpieler

ctx.save();//.save js, speichert den Zustand von ctx

ctx.fillStyle='green';

ctx.fillRect(width-10,spieler.y,10,60);

ctx.restore();//.restore js, holt den Zustand von ctx wieder, Kombination save restore

//Ende

if(ball.x>=500){clearInterval(si);ctx.fillText(t+" gehalten, Neustart nötig", 0, 20);}

}

//Maus und touch js, global per interrupt

document.onmousemove=function(maus){//ClientX, ClientY js

var mausx=maus.clientX;

var mausy=maus.clientY;

//spieler.x=mausx;//wird hier nicht benötigt

spieler.y=mausy;

}

document.ontouchmove = function(event){

event.preventDefault();

var mausy=event.touches[0].clientY;

spieler.y=mausy;

}

</script>

<!--^^javascriptbereich^^-->

</body>

</html>