User Tools

Site Tools


wiki:dominic_madlaina

Unser Thema: Interaktive Dinge mit <canvas>

Technologie

(Abschnitt überspringen)

Canvas sind Pixelbuffer die man in eine Webseite einbauen kann (Demo hier klicken) und eine coole Sache weil total schnell und so.

EDIT: Verwendet Webkit-Browser (Chrome, Safari, Chromium), in Firefox geht es irgendwie kaputt aus… Gründen

Schauen wir uns die Demo kurz an:

Meine Umgebung:

  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <meta charset='utf-8'>
  • <style>
  • canvas {overflow:hidden}
  • </style>
  • </head>
  • <body>
  • <canvas id=“meincanvas” width=“1280” height=“768” />
  • <script>
  • /*hier kommt mein javascript code rein*/
  • </script>
  • </body>
  • </html>

draw() baked ein Polygon in zufällger Farbe auf den Canvas. Man beachte, für den fillStyle wird ein css-Farbstring vom Typ rgba(r,g,b,a) zusammengebaut (z.B. rgba(100,200,300,1))

  • function draw() {
  • var c = document.getElementById('meincanvas').getContext('2d');
  • c.fillStyle = “rgba(”+Math.round(Math.random()*255)+“,”+Math.round(Math.random()*255)+“,”+Math.round(Math.random()*255)+“,1);”
  • c.beginPath();
  • c.moveTo(0, 0);
  • c.lineTo(100, 50);
  • c.lineTo(50, 100);
  • c.lineTo(0, 90);
  • c.closePath();
  • c.fill();
  • }

Eine stark verbesserungswürdige Hauptschleife. Verwirrt vielleicht ein wenig, aber ist halt echtes™ Javascript

  • function loop() {
  • draw();
  • setTimeout( function(){loop();}, 30 )
  • }
  • loop();

(Das css der Code Tags ist übrigens total gebrochen auf diesem Wiki und nimmt meine Zeilenumbrüche raus, deshalb die grusige Darstellung)

Color Assasin

Tags: Asymmetrisch Experiment HTML5 Anticasual Täuschung Balancieren Kurz Schnell

Hier spielen

Regeln: Einer steuert die Farbflatterkreiselviecher mit der Tastatur um den Cap zu erobern, der andere muss sie mit der Maus töten.

Assasin: Dein Mauszeiger sieht entweder aus wie ein dunkles oder helles Flattervieh und ist nur sichtbar wenn du dich bewegst. Platziere Gravitationsfallen auf oder neben Viechern um sie zu fangen töten. Löcher verlieren schnell an Stärke und lösen sich auf, werden aber mit jedem gefangenen Viech stärker. Fallen können nicht direkt auf dem Cap platziert werden. Fallen kosten dich Energie zum erzeugen (schwarzer Balken), du brauchst mindestens soviel Energie wie der weisse Balken markiert. Löcher verringern dein Energie-Income solange sie auf dem Feld sind.

Colors: WASD um alle Viecher zu bewegen. Viecher prallen an der Wand ab und werden dabei um 50% gebremst. Viecher werden von allen Gravitationsfallen angezogen. Steuere Viecher auf den Cap. Wenn der Cap weiss ist, hast du gewonnen. Wenn der Cap seine Position wechselt, bevor er dir gehört, verlierst du 50% des Fortschritts. Drücke Q, um dein schwarzes und dein weissen Viech zum Gegner zu Teleportieren. Q gedrückt halten ist erlaubt. Tipp: Schwieriger zu spielen als Assasin. Konzentriere einige deiner Viecher in einer Ecke des Spielfelds. Auf dem Cap bist du in Sicherheit, wenn du das Gleichgewicht gegen den Sog der Gravitationsfallen halten kannst. Konzentriere deinen Blick auf ein Viech, wenn es stirbt oder der Cap teleportiere, schaue sofort zum nächsten.

I accidentally art generator

Das Spiel hatte einen Bug:

Hier was daraus entstand.

Schwurbel

paint it green

hoi@madlaina.li http://madlaina.li/sgj2013

James Bond goes to Arcade Closed :: Reopening Everywhere exhibition @ fantoche 2013

http://www.fantoche.ch/2013/programm-n12-sD.html

wiki/dominic_madlaina.txt · Last modified: 2013/09/01 23:55 by gamejam