Benutzer:S3feluep

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<html>
<style>
#canvas{border: #000000 2px solid;}
</style>
<script>

window.onload = draw;

function draw(){
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var cx = 400,cy = 300,catchx = 2,catchy = 250,catchw=20,catchh=80,px=340,py=588;
var groundHit = false;
var speedy = -5-Math.floor(Math.random()*3),speedx = -5,speedcatchy = 6+Math.floor(Math.random()*3);
var shot = true;
var caught = false;
var plSpd = 0;
var hits = 0, hitcount = 0;
		
	document.onkeydown = keyDown;
	document.onkeyup = keyUp;

	function keyDown(e) {
    	switch(e.keyCode) {
        case 78: // UP
            plSpd = -7; // moving!
            break;
        case 77:
        	plSpd = 7;
        	break;
        default: break;
        // other cases...
    	}
    	if (plSpd<(-7)){
		plSpd = -7;
		}
		else if (plSpd>7){
		plSpd = 7;
		}
	}

	function keyUp(e) {
    	switch(e.keyCode) {
        case 78: // UP
           plSpd += 7; // NOT moving!
            break;
        case 77:
        	plSpd -= 7;
        	break;
        default: break;
        // other cases...
    	}
    	if (plSpd<(-7)){
		plSpd = -7;
		}
		else if (plSpd>7){
		plSpd = 7;
		}
	}

function animation() {
	window.requestAnimationFrame(animation);
	
		
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.beginPath();
	ctx.fillStyle = "rgba(200,0,0,1)";
	ctx.arc(cx, cy, 10, 0, 2*Math.PI, false);
	ctx.fill();
	ctx.closePath();
	ctx.beginPath();
	ctx.fillStyle = "rgba(0,200,200,1)";
	ctx.fillRect(catchx,catchy,catchw,catchh);
	ctx.closePath();
	ctx.beginPath();
	ctx.fillStyle = "black";
    ctx.font = "italic "+15+"pt Arial ";
    ctx.fillText("controls: n and m", 20,20);
	ctx.closePath();
	ctx.beginPath();
	ctx.fillStyle = "rgba(100,50,50,1)";
	ctx.fillRect(px+=plSpd,py,70,10);
	ctx.closePath;
	ctx.beginPath();
	ctx.fillStyle = "black";
    ctx.font = "italic "+15+"pt Arial ";
    ctx.fillText("hits: "+hits, 700,20);
	ctx.closePath();

		if (hitcount>1){hitcount=0;}
		if (px<=2){
			px=2;
		}
		else if (px>=cvs.width-70){
			px=cvs.width-70;
		}
	
	var inCatcher = cx>=catchx&&cx<=catchx+20&&cy>=catchy&&cy<=catchy+80;
		cy += speedy;
		cx += speedx;
		catchy +=speedcatchy;
		if (catchy>=518){
			catchy+=speedcatchy;
			speedcatchy=-6-Math.floor(Math.random()*3);
		}
		else if (catchy <=2){
			catchy+=speedcatchy;
			speedcatchy=6+Math.floor(Math.random()*3);
		}
		if (cy>=605){
			alert("Game over! You hit the ball "+hits+" times!");
			document.location.reload(true);
		}
		else if (cx>=px&&cx<=px+70&&cy>=py&&cy<=py+10){
			cy += speedy;
			cx += speedx;
			
			speedy = -5-Math.floor(Math.random()*3);
			hitcount++;
			if (hitcount<2){
				hits++;
			}	
		}
		else if (cy<=2){
			cy += speedy;
			cx += speedx;
			speedy = 5+Math.floor(Math.random()*3);
		}
		else if (cx<=2){
			cy += speedy;
			cx += speedx;
			speedx = 5;
		}
		else if (cx>=798){
			cy += speedy;
			cx += speedx;
			speedx = -5;

		}
		if (inCatcher && !caught){
			speedx = 0;
			speedy = 0;
			speedcatchy = 0;
			setTimeout(shoot1,2000);
			setTimeout(speedNormalize,2100);
			caught = true;
		}
		if (!inCatcher && caught){
			caught = false;
		}
		function shoot1(){
			while (shot){
			speedx=10+Math.floor(Math.random()*10);
			speedy=10+Math.floor(Math.random()*10);
			shot = false;
			}
		}
		function speedNormalize(){
			speedy = 10
			speedx = 10
			speedcatchy = 6+Math.floor(Math.random()*3);
		}	
}
window.requestAnimationFrame(animation);
}
</script>
<canvas id="canvas" width="800" height="600"></canvas>
</html>