HTML5-Tutorium: Canvas: MiniPong 03

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

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 (alle Dateien, SVN: alle Dateien)

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

1. Datei → Neu → Statisches Web-Projekt
2. Project name: MiniPong02 → Fertigstellen

Dateien erstellen

Kopieren Sie die Dateien css/Main.css von Teil 1 des Tutoriums und erstellen Sie die Datei js/Main.js neu.

main.js

// constants
var FPS = 50;

var KEY_LEFT  = 37;
var KEY_RIGHT = 39;

var PADDLE_COLOR = "#666666";

var PADDING = 5;

// canvas
var v_canvas;
var v_context;
var v_width    = 400;
var v_height   = 300;

// paddle
var v_paddle_width    =  50;
var v_paddle_height   =   8;
var v_paddle_dx       =   0;
var v_paddle_dx_start = 100;   // pixel per seconds
var v_paddle_ax       =  10;   // pixel per seconds
var v_paddle_x        = (v_width - v_paddle_width)/2;
var v_paddle_y        = v_height - v_paddle_height - PADDING;

// timer
var v_interval;

// initialization
function init() 
{
  v_canvas = document.getElementById("d_canvas");
  v_canvas.width  = v_width;
  v_canvas.height = v_height;
  v_context = v_canvas.getContext("2d");
  
  document.onkeydown = m_move_paddle;
  document.onkeyup   = m_stop_paddle;

  m_draw();

  v_interval = window.setInterval("m_redraw()", 1000/FPS);
}


function m_draw()
{
  v_context.beginPath();
  v_context.fillStyle = PADDLE_COLOR;
  v_context.rect (v_paddle_x, v_paddle_y, v_paddle_width, v_paddle_height);
  v_context.fill();
}

function m_redraw() 
{
  // move paddle
  if (   (v_paddle_dx < 0 && v_paddle_x > 0)
      || (v_paddle_dx > 0 && v_paddle_x + v_paddle_width < v_width)
     )
  { 
    v_paddle_x  += v_paddle_dx;
    v_paddle_dx += v_paddle_ax/FPS *(v_paddle_dx > 0 ? 1 : -1);
  };

  // Clear and draw canvas
  v_context.clearRect(0,0,v_width,v_height);
  m_draw();
}

function m_move_paddle(p_event)
{
  if (v_paddle_dx == 0)
  {
    if (p_event.keyCode == KEY_LEFT)
      v_paddle_dx = -v_paddle_dx_start/FPS;
    else if (p_event.keyCode == KEY_RIGHT)
      v_paddle_dx = +v_paddle_dx_start/FPS;
  };
}

function m_stop_paddle(p_event)
{
  v_paddle_dx = 0;
}

Anwendung testen

Testen Sie Ihre Anwendung in gewohnter Weise.

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)
3. Musterlösungen, Musterlösungen (SVN)