Benutzer:S3feluep
Aus ProgrammingWiki
Wiki-Quelltext dieser Seite.
<language>Javascript</language>
<html>
<style>
#canvas{border: #000000 2px solid;}
</style>
<run id="55869d3621b3c">
<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></run>
<canvas id="canvas" width="800" height="600"></canvas>
</html>