Objektsteuerung

Yamah · 15. November 2017

Hallo,

Ich bin "newbie" in HTML5 und habe ein kleines Problem.

Ich wollte ein kleines "Spiel" schreiben und wollte einen mit der Tastatur steuerbaren Spieler programmieren.

Ich habe meine eigene Variante ausprobiert, die jedoch nicht funktioniert hat.

Dann habe ich im Internet ein paar standart Scripts in den Editor kopiert, was auch nicht klappte. Deswegen Frage ich jetzt hier.

Habt ihr eine Idee wie ich einen Schwarzen Kreis mit den Tastaturpfeilen steuern kann.

Danke im vorraus,

Yamah

HTML Script (MyGame.html):

<html>

<head>

<title>

MyAnimation

</title>

<body>

Black'n

White

</font>

</center>

<style>

</style>

</script>

</body>

</head>

</link>

</html>

CSS script (MyGame.css):

body {

animation:pulse 30s infinite;

}

@keyframes pulse {

0% {background-color:white}

25% {background-color:black}

50% {background-color:white}

75% {background-color:black}

100% {background-color:white}

}

Sempervivum · 16. November 2017

Zitat

Dann habe ich im Internet ein paar standart Scripts in den Editor kopiert, was auch nicht klappte.

Man findet allerdings einige Skripts, die so etwas realisieren. Suche noch einmal eines aus, von dem Du glaubst, dass es passt und poste den Code wenn es nicht funktioniert.

Wenn Du nur einen Kreis bewegen willst, reicht es aus, wenn Du eine Lösung mit HTML, CSS und Javascript nimmst. Soll das Spiel später etwas ausgefeilter werden, solltest Du überlegen, ob Du gleich mit Canvas oder SVG anfängst, jeweils mit einer Bibliothek wie z. B. jCanvas oder d3.js für SVG.

Yamah · 16. November 2017

Zitat von Sempervivum

Man findet allerdings einige Skripts, die so etwas realisieren. Suche noch einmal eines aus, von dem Du glaubst, dass es passt und poste den Code wenn es nicht funktioniert.

Wenn Du nur einen Kreis bewegen willst, reicht es aus, wenn Du eine Lösung mit HTML, CSS und Javascript nimmst. Soll das Spiel später etwas ausgefeilter werden, solltest Du überlegen, ob Du gleich mit Canvas oder SVG anfängst, jeweils mit einer Bibliothek wie z. B. jCanvas oder d3.js für SVG.

Ich habe nochmal geguckt und ein Script gefunden:

<!DOCTYPE html>

<html>

<head>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

function startGame() {

myGameArea.start();

myGamePiece = new component(30, 30, "red", 10, 120);

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

this.interval = setInterval(updateGameArea, 20);

window.addEventListener('keydown', function (e) {

myGameArea.keys = (myGameArea.keys []);

myGameArea.keys[e.keyCode] = (e.type == "keydown");

})

window.addEventListener('keyup', function (e) {

myGameArea.keys[e.keyCode] = (e.type == "keydown");

})

},

clear : function(){

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

}

function component(width, height, color, x, y) {

this.gamearea = myGameArea;

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.update = function() {

ctx = myGameArea.context;

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

this.newPos = function() {

this.x += this.speedX;

this.y += this.speedY;

}

function updateGameArea() {

myGameArea.clear();

myGamePiece.speedX = 0;

myGamePiece.speedY = 0;

if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }

if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }

if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }

if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }

myGamePiece.newPos();

myGamePiece.update();

}

</script>

<p>Make sure this window has focus, then use the arrow keys on you keyboard to move the red square.</p>

<p>When pressing both the left and the down arrow, the red square will move both down and to the left.</p>

</body>

</html>

Es funktioniert leider nicht. Ich denke das Problem ist die GameArea. Alleine funktioniert das Script, bei mir jedoch nicht.

Sempervivum · 16. November 2017

Zitat

Alleine funktioniert das Script, bei mir jedoch nicht.

Wie meinst Du das? Ja, es funktioniert einwandfrei. Funktioniert es bei dir nicht, wenn Du es in eine andere Seite einbettest? Dann poste die URL dieser Seite, damit man den Fehler finden kann.

Yamah · 16. November 2017

Zitat von Sempervivum

Wie meinst Du das? Ja, es funktioniert einwandfrei. Funktioniert es bei dir nicht, wenn Du es in eine andere Seite einbettest? Dann poste die URL dieser Seite, damit man den Fehler finden kann.

Eine Website habe ich nicht, und ich meine das wenn ich das Script hier:

Zitat von Yamah

Ich habe nochmal geguckt und ein Script gefunden:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

...

Alles anzeigen

In das Script kopiere:

Zitat von Yamah

HTML Script (MyGame.html):

<html>

<link href="MyGame.css" type="text/css" rel="stylesheet">

<head>

<title>

MyAnimation

</title>

<body>

<center>

<font face="arial" color="White" size="7">

Black'n

<font face="arial" color="Black" size="7">

White

</font>

</center>

<style>

</style>

<script>

</script>

</body>

</head>

</link>

</html>

Alles anzeigen

funktioniert es leider nicht.

Das sähe dann so aus:

<html>

<head>

<title>

MyAnimation

</title>

Black'n

White

</font>

</center>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

var myGamePiece;

function startGame() {

myGameArea.start();

myGamePiece = new component(30, 30, "red", 10, 120);

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

this.interval = setInterval(updateGameArea, 20);

window.addEventListener('keydown', function (e) {

myGameArea.keys = (myGameArea.keys []);

myGameArea.keys[e.keyCode] = (e.type == "keydown");

})

window.addEventListener('keyup', function (e) {

myGameArea.keys[e.keyCode] = (e.type == "keydown");

})

},

clear : function(){

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

}

function component(width, height, color, x, y) {

this.gamearea = myGameArea;

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.update = function() {

ctx = myGameArea.context;

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

this.newPos = function() {

this.x += this.speedX;

this.y += this.speedY;

}

function updateGameArea() {

myGameArea.clear();

myGamePiece.speedX = 0;

myGamePiece.speedY = 0;

if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }

if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }

if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }

if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }

myGamePiece.newPos();

myGamePiece.update();

}

</script>

</body>

</head>

</link>

</html>

Sempervivum · 16. November 2017

Bei diesem:

HTML

<html>
<link href="MyGame.css" type="text/css" rel="stylesheet">
<head>
<title>
MyAnimation
</title>
<body>
<center>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
</center>
<style>
</style>
<script>
</script>
</body>
</head>
</link>
</html>

Alles anzeigen

ist die Struktur völlig daneben:

Kein Doctype, </link> überflüssig, <link> gehört in den Head, schließendes </head> fehlt, <center> veraltet.

So wäre die Struktur richtig:

HTML

<doctype html>
<html>
<head>
<title>
MyAnimation
</title>
<link href="MyGame.css" type="text/css" rel="stylesheet">
</head>
<body>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
<style>
</style>
<script>
</script>
</body>
</html>

Alles anzeigen

Yamah · 16. November 2017

Danke, ich wusste nicht das eine Struktur wichtig ist.

Jedoch funktioniert das Script immer noch nicht so wie ich es gerne hätte.

Vieleicht liegt es an der .css datei, oder wie oben schon vermutet hatte an der GameArea.

basti1012 · 16. November 2017

ich hatte auch mal langeweile

https://jsfiddle.net/79m87q0n/1/

der code der läst sich bestimmt noch verbessern ... aber funktioniert,ich bin mal stolz auf mich

Sempervivum · 16. November 2017

Hallo Basti, gut gemacht! Bei der Ermittlung der Koordinaten getAbsoluteX und getAbsoluteY hättest Du vorteilhaft nur eine Funktion verwenden und x und y in einem Objekt zurück geben können, wie wir es in anderem Zusammenhang mal besprochen hatten.

Hallo Yamah, dann poste noch Mal den neuen Code und das CSS, das dort eingebunden wird.

Yamah · 20. November 2017

<html>

<head>

<title>

MyGame

</title>

</head>

<body>

Black'n

White

</font>

</center>

var pixel = 2;

//document.getElementsByTagName('body')[0].innerHTML += '<div id="box1"></div> ';

var box1 = document.createElement("div");

box1.id = "box1"

document.getElementsByTagName('body')[0].appendChild(box1);

box1.style.position = 'absolute';

//box1.style.top = oben+'px';

var elm = document.getElementById('box1')

document.body.addEventListener('keydown', function(e) {

var taste = e.keyCode;

if (taste == 40) {

var ab = getAbsoluteY(elm)

var e = ab + pixel;

box1.style.top = e + 'px';

}

if (taste == 38) {

var ab = getAbsoluteY(elm)

var e = ab - pixel;

box1.style.top = e + 'px';

}

if (taste == 39) {

var ab = getAbsoluteX(elm)

var e = ab + pixel;

box1.style.left = e + 'px';

}

if (taste == 37) {

var ab = getAbsoluteX(elm)

var e = ab - pixel;

box1.style.left = e + 'px';

}

document.getElementById('box1').innerHTML = e;

});

function getAbsoluteX(elm) {

var x = 0;

if (elm && typeof elm.offsetParent != "undefined") {

while (elm && typeof elm.offsetLeft == "number") {

x += elm.offsetLeft;

elm = elm.offsetParent;

}

return x;

}

// Findet die absolute y Position eines Elementes raus

function getAbsoluteY(elm) {

var y = 0;

if (elm && typeof elm.offsetParent != "undefined") {

while (elm && typeof elm.offsetTop == "number") {

y += elm.offsetTop;

elm = elm.offsetParent;

}

return y;

}

</script>

</body>

</html>

CSS

body {

animation:pulse 30s infinite;

}

@keyframes pulse {

0% {background-color:white}

25% {background-color:black}

50% {background-color:white}

75% {background-color:black}

100% {background-color:white}

}

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

#box1 {

width: 50px;

height: 50px;

background: black;

border: 10px solid black;

border-radius: 50%;

}

basti1012 · 20. November 2017

ich habe zwar keine ahnung wie man sowas in html mit einbindet damit das rictig läuft aber muss die css nicht in <style></style> rein gepackt werden ?? aber höhr nicht auf mich ich lerne selber noch ,ich hätte es zumindest erstmal so versucht.

also bei fiddle läuft es wenn man die css in <style> </style> rein packt

https://jsfiddle.net/basti1012/peLywzp5/2/

Objektsteuerung

Jetzt mitmachen!

Teilen