taralino

Tastatur-Aktivitäten

Bei den Tastatur-Aktivitäten werden Funktionen in Abhängigkeit gedrückter Tasten aufgerufen.

Eine ausführliche Dokumentation findest du in der Konzept-Referenz:

Beispiel

Drücke eine Taste und lasse dies kurzzeitig gedrückt.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,20], [0,12], {width:480, background:"lightgrey"});
Canvas.text(10, 6, "Click to start");

function on_key_down(k) {
  Canvas.clear();
  Canvas.circle(10, 6, 4, {fill:"blue"});
  Canvas.text(10, 6, "Taste: " + k, {fill:"white"});
};

function on_key_up(k) {
  Canvas.clear();
};

function on_mouse_down(x, y) {
  Canvas.clear();
  Canvas.circle(10, 6, 4, {fill:"blue"});
  Canvas.text(10, 6, "Press any key", {fill:"white"});
};

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

Vorschau Download Kopie speichern

Beispiel

Nutze die Pfeiltasten, um den Punkt zu lenken.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

var x = 2;
var y = 8;
var r = "RIGHT";
var n = 32;

function setup() {
  Canvas.init([0,n], [0,n], {width:320, background:"black"});
  Canvas.text(n/2, n/2, "Click to start", {fill:"white"});
  Animation.init({fps:8, autoplay:"off"});
};

function loop() {
  Canvas.clear();
  Canvas.text(n/2, n/2, "Nutze die Pfeiltasten", {fill:"white"});
  Canvas.circle(x+0.5, y+0.5, 0.5, {fill:"green"});
  if (r == "RIGHT") x = (x + 1) % n;
  if (r == "LEFT") x = (x + n - 1) % n;
  if (r == "UP") y = (y + 1) % n;
  if (r == "DOWN") y = (y + n - 1) % n;
};

function on_key_down(key) {
  if (key == "RIGHT") r = key;
  if (key == "LEFT") r = key;
  if (key == "UP") r = key;
  if (key == "DOWN") r = key;
};

function on_mouse_down(x, y) {
  Animation.start();
};

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

Vorschau Download Kopie speichern