HTML5-Tutorium: Canvas: MiniPong 03

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 3 (einige wichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 5 (ausgezeichnet)

HTML-Tutorium: MiniPong

MiniPong: | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5

Musterlösung: Minipong 2 (SVN-Repository)

Ziel

Im zweiten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert.

Vorgehensweise

Neues Projekt anlegen

Legen Sie ein neues Projekt MiniPong02 an und speichern Sie dieses Projekt auf die bekannte Weise in Ihrem SVN-Repository.

Dateien erstellen

Kopieren Sie die Dateien index.html und css/Main.css von Teil 1 des Tutoriums, passen Sie den Projekttitel in der Datei index.html an und erstellen Sie die Dateien js/CONSTANT.js js/Main.js neu.

CONSTANT.js

"use strict";
 
var CANVAS_WIDTH  = 400;
var CANVAS_HEIGHT = 300;

var FPS = 50; // Frames Per Second

var KEY_LEFT  = 37;
var KEY_RIGHT = 39;

var PADDLE_PADDING  = 5;

var PADDLE_WIDTH    =  50;
var PADDLE_HEIGHT   =   8;
var PADDLE_VX_START = 100; // pixels per second
var PADDLE_AX       =  10; // pixels per second

var PADDLE_COLOR    = "#666666";

main.js

"use strict";

// the paddle
var g_paddle = 
    { width:    PADDLE_WIDTH,
      height:   PADDLE_HEIGHT,
      x:        (CANVAS_WIDTH-PADDLE_WIDTH)/2,
      y:        CANVAS_HEIGHT-PADDLE_HEIGHT-PADDLE_PADDING,
      vx_start: PADDLE_VX_START,  // pixels per second
      vx:       0,                // pixels per second
      ax:       PADDLE_AX,        // pixels per second

      move: function()
            { this.x  += this.vx;
              this.vx += this.ax/FPS *(this.vx > 0 ? 1 : -1);
            },
      draw: function(p_context)
            // Draw the paddle at its current position onto a 2d context.
            { p_context.beginPath();
              p_context.fillStyle = PADDLE_COLOR;
              p_context.rect (this.x, this.y, this.width, this.height);
              p_context.fill();
            }
};

// the 2d context of the canvas
var g_context;

// the "physics engine" timer
var g_interval;

// Execute the init function after the HTML page has been loaded.
window.onload = f_init;

// Has to be called after the HTML page has been loaded.
function f_init() 
{ var l_canvas = document.getElementById("d_canvas");

  // Initialize the canvas.
  l_canvas.width  = CANVAS_WIDTH;
  l_canvas.height = CANVAS_HEIGHT;
  g_context       = l_canvas.getContext("2d");
  
  // React to key down and key up events.
  document.onkeydown = o_start_paddle_moving;
  document.onkeyup   = o_stop_paddle_moving;

  // Start the timer for redrawing the canvas every 1000/FPS seconds.
  g_interval = window.setInterval("o_redraw()", 1000/FPS);
}

// An event observer: 
// It is called every 1000/FPS seconds.
function o_redraw() 
{ // Clear the canvas.
  g_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

  // Move the paddle, if possible (collision detection and response)
  if (   (g_paddle.vx < 0 && g_paddle.x > 0)
      || (g_paddle.vx > 0 && g_paddle.x + g_paddle.width < CANVAS_WIDTH)
     )
    g_paddle.move();

  // Draw the ball on the canvas.
  g_paddle.draw(g_context);
}

// An event observer: 
// It is called whenever a "start paddle moving event" is signalled.
function o_start_paddle_moving(p_event)
{ if (g_paddle.vx == 0)  // react only if the paddle is not allready moving
  { if (p_event.keyCode == KEY_LEFT)
      g_paddle.vx = -g_paddle.vx_start/FPS;
    else if (p_event.keyCode == KEY_RIGHT)
      g_paddle.vx = +g_paddle.vx_start/FPS;
  }
}

// An event observer: 
// It is called whenever a "stop paddle moving event" is signalled.
function o_stop_paddle_moving(p_event)
{ g_paddle.vx = 0; }

Anwendung testen und sichern

Testen Sie Ihre Anwendung in gewohnter Weise.

Vergessen Sie nicht, sie im SVN-Repository zu sichern.

Erweiterung

Erweitern Sie die Anwendung so, dass Sie zwei Schläger unabhängig voneinander links und rechts am Bühnenrand bewegen können. Beachten Sie wieder das Programmierprinzip „Don't repeat yourself“ (Dry).

Quellen

1. Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
2. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)