Objektsteuerung

  • 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>

    <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>


    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}

    }

  • 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.

  • 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>

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

    <style>

    canvas {

    border:1px solid #d3d3d3;

    background-color: #f1f1f1;

    }

    </style>

    </head>

    <body onload="startGame()">

    <script>


    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.

  • 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.

  • 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:

    In das Script kopiere:

    funktioniert es leider nicht.

    Das sähe dann so aus:



    <html>

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

    <head>

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

    <title>

    MyAnimation

    </title>

    <body onload="startGame()">

    <center>

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

    Black'n

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

    White

    </font>

    </center>

    <style>

    canvas {

    border:1px solid #d3d3d3;

    background-color: #f1f1f1;

    }


    </style>

    <script>

    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>

  • Bei diesem:

    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:

  • 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.

  • 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.

  • <!-- doctype html -->

    <html>

    <head>

    <title>

    MyGame

    </title>

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

    </head>

    <body>

    <center>

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

    Black'n

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

    White

    </font>

    </center>

    <script>

    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%;

    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!