Sterowanie obiektem canvas

0

Siema potrzebuję w tym kodzie zrobić tak by po kliknięciu klawisza w prawo obiekt canvas id="gracz" przesunął się w prawo

teraz jest tak że po kliknięciu klawisza X wyskakuje alert("yoyo");

problemy są dwa po pierwsze co wstawić między

 {   }

zamiast alert("yoyo");

 by <code class="javascript">obiekt id="gracz"

przesunął się trochę w prawo
i drugi co wpisać w

 (String.fromCharCode(keycode) == "X")

zamiast X żeby by zadziałał klawisz w prawo numer "39" coś nie działa.

<html>

<head data-gwd-animation-mode="proMode">
  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="generator" content="Google Web Designer 1.2.0.1203">
  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
    body {
      -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      -webkit-transform-style: preserve-3d;
      background-color: transparent;
    }
    .gwd-canvas-ofpg {
      position: absolute;
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      -webkit-transform-style: preserve-3d;
      width: 78.2420293093px;
      height: 119.2085887268px;
      left: 202.8789853454px;
      top: 315.8957056366px;
    }
  
</style>
  <script language="Javascript">
    document.onkeydown = checkKeycode

    function checkKeycode(e) {
      var keycode;
      if (window.event) keycode = window.event.keyCode;
      else if (e) keycode = e.which;
      if (String.fromCharCode(keycode) == "X") {

        alert("yoyo");

      }
    }
  
</script>
  <script data-source="gwdbezierpath_min.js" data-version="1" data-exports-type="gwd-bezierpath" type="text/javascript" src="gwdbezierpath_min.js"></script>
</head>

<body>
  <canvas is="gwd-bezierpath" width="78" height="119" class="gwd-canvas-ofpg" id="gracz" anchors="[[[34.05,61.71,0],[34.05,61.71,0],[34.05,61.71,0]],[[80.05,-79.29,0],[53.05,66.71,0],[26.05,212.71,0]],[[-49.45,-3,0],[53.55,78,0],[156.55,159,0]],[[-111.49,63,0],[58.51,89,0],[228.51,115,0]]]"
  stroke-width="1" stroke-color="[0,0,0,1]" fill-color="[1,1,1,1]" geom-type="5"></canvas>
</body>

</html> 
0

Pytanie nr. 1:
Czy ty na pewno wiesz do czego służy canvas?

Canvas to powierzchnia, po której rysujesz javascriptem. Ty używasz jakiejś biblioteki, która odczytuje własne atrybuty canvasa i coś tam na nim rysuje, następnie chcesz to widzę przesuwać javascriptem jako całość - to zła droga. Już lepsze do takiego działania by były svg, bo bardziej naturalne do tego zastosowania.

Poczytaj o elemencie canvas i o tym jak z niego korzystać. A wcześniej polecam jakieś podstawy javascriptu - to, co robisz, prawdopodobnie jest zadaniem ponad Twoje siły na ten moment. Szkoda, żebyś miał to rzucić za dwa dni.

Jeżeli się uprzesz na swoje rozwiązanie to:

#gwd-bezierpath { position: relative; }

a w js:

var bp = document.getElementById('gwd-bezierpath');
bp.style.left = parseInt(bp.style.left, 10);
0

Może faktycznie źle to ugryzłem, Zapytam prościej

Mam kod

<head data-gwd-animation-mode="proMode">
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="generator" content="Google Web Designer 1.2.0.1203">
  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
    body {
      -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      -webkit-transform-style: preserve-3d;
      background-color: transparent;
    }
    .gwd-div-6toe {
      position: absolute;
      width: 363px;
      height: 151px;
      font-family: 'Times New Roman';
      text-align: left;
      color: rgb(0, 0, 0);
      left: 178px;
      top: 214px;
    }
  </style>
</head>

<body>
  <div class="gwd-div-6toe" id="obiektxx">Obiekt
    <div>
      <br>
    </div>
  </div>
</body>

</html>

I chciałbym sterować

id="obiektxx"

za pomocą strzałek czy jest na to jakieś proste rozwiązanie ?

0

Generalnie nie powinieneś w ten sposób pisać gier, bo Ci wyjdzie jakieś kalekie coś.

A takie podstawowe rzeczy zawsze się w necie znajdą:
http://stackoverflow.com/questions/23585320/how-to-move-object-with-keyboard-in-javascript

0

Dzięki wielkie , a rady wezmę do serca pozdro ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1