• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Paddle will sich nicht bewegen?

H

herrsander

New member
Hallo,
ich versuche ein Rechteck mit der Tastatur zu bewegen, leider tut sich nichts und ich bekomme keine Fehlermeldung...

HTML: 
<html>
<head>
<title>Tastatureingabe</title>
<meta charset="utf-8">  
</head>
<body>
<canvas id="canvas" width="512" height="256"></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var breite = canvas.width;
var hoehe = canvas.height;

var paddleheight = 75;
var paddlewidth = 10;
var paddleX = (canvas.width-5);

var paddle = function() 
	{
	ctx.beginPath();
	ctx.rect(paddleX, (canvas.height-paddleheight)/2, paddlewidth, paddleheight);
	ctx.fill();
	ctx.closePath();
	}

var pad = function()
	{
	this.x = breite / 2;
	this.y = hoehe / 2;
	this.xGeschwindigkeit = 5;
	this.yGeschwindigkeit = 0;
	};

pad.prototype.move = function () 
	{
	this.x += this.xGeschwindigkeit;
	this.y += this.yGeschwindigkeit;
	}

pad.prototype.draw = function () 
	{
	paddle(this.x, this.y, 10);
	};
	
pad.prototype.setDirection = function (richtung) 
{
if (richtung === "hoch") 
{
this.xGeschwindigkeit = 0;
this.yGeschwindigkeit = -5;
} 
else if (richtung === "runter") 
{
this.xGeschwindigkeit = 0;
this.yGeschwindigkeit = 5;
} 
};

var pad = new pad();	

var keyActions = 
	{
	38: "hoch",
	40: "runter"
	};
$("body").keydown(function (event) 
	{
	var richtung = keyActions[event.keyCode];
	pad.setDirection(richtung);
	});

setInterval(function () 
	{
	ctx.clearRect(0, 0, breite, hoehe);
	pad.draw();
	pad.move();
	ctx.strokeRect(0, 0, breite, hoehe);
	ctx.fillRect(this.breite/2, 0, 2, this.hoehe);
	}, 30);

</script>
</body>
</html>

- - - Aktualisiert - - -

Hallo,
hat sich erledigt.
 
kkapsner schrieb:
Wenn du deine Lösung noch hier schreibst, können auch kommende Suchende davon profitieren.
Zum Vergrößern anklicken....

Gerne doch:

HTML: 
<html>
<head>
<title>Tastatureingabe</title>
<meta charset="utf-8">  
</head>
<body>
<canvas id="canvas" width="512" height="256"></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var breite = canvas.width;
var hoehe = canvas.height;

var paddleheight = 75;
var paddlewidth = 10;

var rechteck = function(x, y) 
	{
	ctx.beginPath();
	ctx.rect(x, y, paddlewidth, paddleheight);
	ctx.fill();
	ctx.closePath();
	}

var paddle = function () 
	{
	this.x = canvas.width-15;
	this.y = (hoehe-paddleheight) / 2;
	this.xGeschwindigkeit = 0;
	this.yGeschwindigkeit = 0;
	};

paddle.prototype.move = function () 
	{
	this.x += this.xGeschwindigkeit;
	this.y += this.yGeschwindigkeit;
	}

paddle.prototype.draw = function () 
	{
	rechteck(this.x, this.y);
	};
	
paddle.prototype.setDirection = function (richtung) 
	{
	if (richtung === "hoch") 
		{
		this.xGeschwindigkeit = 0;
		this.yGeschwindigkeit = -5;
		} 
	else if (richtung === "runter") 
		{
		this.xGeschwindigkeit = 0;
		this.yGeschwindigkeit = 5;
		} 
	else if (richtung === "stopp") 
		{
		this.xGeschwindigkeit = 0;
		this.yGeschwindigkeit = 0;
		}
	};

var pad = new paddle();	

var keyActions = 
	{
	32: "stopp",
	38: "hoch",
	40: "runter"
	};
$("body").keydown(function (event) 
	{
	var richtung = keyActions[event.keyCode];
	pad.setDirection(richtung);
	});

setInterval(function () 
	{
	ctx.clearRect(0, 0, breite, hoehe);
	pad.draw();
	pad.move();
	ctx.strokeRect(0, 0, breite, hoehe);
	ctx.fillRect(this.breite/2, 0, 2, this.hoehe);
	}, 30);

</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben