HTML5-Tutorium: Canvas: MiniPong 04: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenzzur nächsten Versionen-Differenz →
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
{{In Bearbeitung}}
{{HTML5-Tutorium:Canvas:MiniPong:Menü}}
{{HTML5-Tutorium:Canvas:MiniPong:Menü}}
'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_03/WebContent/index.html Minipong]</code>
'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_03/WebContent/index.html Minipong 3]</code>
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_03 alle Dateien], SVN: [http://glossar.hs-augsburg.de/webdav/tutorium/html5_canvas/minipong/html5_canvas_minipong_03 alle Dateien])
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_03 SVN-Repository])


=Ziel=
=Ziel=
Im dritten Teil des Tutoriums wird beschrieben, wie man MiniPong mit Hilfe einer einzigen JavaScript-Datei erstellt.
Im dritten Teil des Tutoriums wird beschrieben, wie man MiniPong mit Hilfe einer einzigen JavaScript-Datei erstellt.
[[Kowarschick|Wolfgang Kowarschick]] bezeichnet so eine Datei als „Moloch-Datei“ (Moloch = Monstrum, Ungeheuer, alles verschlingende Bestie).
[[Kowarschick|Wolfgang Kowarschick]] bezeichnet so eine Datei als „Moloch-Datei“ (Moloch = Monstrum, Ungeheuer, alles verschlingende Bestie).
=Vorgehensweise=


==Neues Projekt anlegen==
==Neues Projekt anlegen==


Legen Sie ein neues Projekt an:
Legen Sie ein neues Projekt <code>MiniPong02</code> an
 
und speichern Sie dieses Projekt auf die [[HTML5-Tutorium:_Canvas:_Hello_World_01#Neues_Projekt_anlegen|bekannte Weise]] in Ihrem
# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
SVN-Repository.
# Project name: <code>MiniPong02</code> → <code>Fertigstellen</code>


==Dateien erstellen==
==Dateien erstellen==


Kopieren Sie die Datei <code>css/Main.css</code> von [[HTML5-Tutorium: Canvas: MiniPong 01|Teil 1]] des Tutoriums
Kopieren Sie die Dateien <code>index.html</code> und <code>css/Main.css</code> von [[HTML5-Tutorium: Canvas: MiniPong 02|Teil 2]] des Tutoriums,
und erstellen Sie die Dateien <code>js/Main.js</code> sowie <code>index.html</code> neu.
passen Sie den Projekttitel in der Datei <code>index.html</code> an
 
und erstellen Sie die Dateien <code>js/CONSTANT.js</code> <code>js/Main.js</code> neu.
===<code>index.html</code>===
 
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5-Tutorium: Canvas: MiniPong 01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!--
    <link  rel="stylesheet"      href="css/all.min.css" />
    <script type="text/javascript" src="js/all.min.js"    ></script>
-->
    <link  rel="stylesheet"      href="css/main.css" />
    <script type="text/javascript" src="js/main.js"    ></script>


  </head>
===<code>CONSTANT.js</code>===
  <body onload="init()">
    <p id="d_score">Punktestand</p>
    <canvas id="d_canvas">
      Your browser does not support canvas!
    </canvas>
    <form id="d_form">
      <input id="d_start_stop" type="button" onmousedown="startGame()">
    </form>


  </body>
Fügen Sie die Variablen der beiden Dateien <code>CONSTANT.js</code> von [[HTML5-Tutorium: Canvas: MiniPong 01#CONSTANT.js|Teil 1]]
</html>
und [[HTML5-Tutorium: Canvas: MiniPong 02#CONSTANT.js|Teil 2]] des Tutoriums in die <code>CONSTANT.js</code> ds dritten Teils ein.
Achtung: Definieren Sie keine Variable doppelt.


</source>
Sie können später evtl. noch weitere Konstanten in diese Datei einfügen,
wie z.B. Konstanten, die die Startposition von Ball und Schläger definieren,
oder eine Konstaten <code>PADDLE_FRICTION</code>, die die Reibung des Schlägers festlegt.
(Beachten Sie, dass in den Use Cases Folgendes gefordert wurde:
''Wird der Schläger im Moment der Kollision bewegt, so wird der Ball abhängig von der Bewegungsrichtung und Geschwindigkeit des Schlägers abgelenkt. '')


===<code>main.js</code>===
===<code>main.js</code>===


<source lang="javascript">
<source lang="javascript">
// constants
var FPS = 50;


var KEY_LEFT  = 37;
</source>
var KEY_RIGHT = 39;


var BALL_BORDER_WIDTH = 1;
==Anwendung testen und sichern==
var BALL_BORDER_COLOR = "#000000";
Testen Sie Ihre Anwendung in gewohnter Weise.
var BALL_COLOR        = "#55AA55";
var PADDLE_COLOR      = "#666666";
 
var TOLERANCE = 1;
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_x;
var v_paddle_y;
var v_paddle_vx;
var v_paddle_vx_start = 250; // pixels per second
var v_paddle_ax      =  10; // pixels per second
var v_paddle_friction = 20;
 
// ball
var v_ball_r  = 8;
var v_ball_x;
var v_ball_y;
var v_ball_vx; // pixels per seconds
var v_ball_vy; // pixels per seconds
 
// score
var v_score ;
 
// 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");
  m_reset();
}
 
function m_reset()
{
  v_context.clearRect(0, 0, v_width, v_height);


  document.getElementById("d_start_stop").value = "Start";
Vergessen Sie nicht, sie im SVN-Repository zu sichern.
  document.getElementById("d_start_stop").onmousedown = o_start_game;


  v_paddle_x  = (v_width - v_paddle_width) / 2;
=Erweiterung=
  v_paddle_y  = v_height - v_paddle_height - PADDING;
  v_paddle_vx = 0;
  v_ball_x    = v_width/2;
  v_ball_y    = v_ball_r + PADDING;
  v_ball_vx  = (Math.random()<0.5?1:-1)*( 50 + Math.random()*100);
  v_ball_vy  = 150 + Math.random()* 50;


  m_draw();
Erweitern Sie die Anwendung so, dass Sie zwei Schläger unabhängig voneinander
}
links und rechts am Bühnenrand bewegen können, so dass zwei Spieler gegeneinader spielen können.
Jeder Spieler hat seinen eigenen Score. Der erste Spieler, der 10 Punkte erreicht hat, gewinnt.


function m_draw()
Sie können die erzielten Punkte natürlich auch auf der Bühne selbst anzeigen (vgl. Bilder im [[Wikipedia:Pong Wikipedia-Artikel zu Pong]).
{
  v_context.beginPath();
  v_context.arc(v_ball_x, v_ball_y, v_ball_r, 0, 2*Math.PI, true);
  v_context.lineWidth = BALL_BORDER_WIDTH;
  v_context.lineStyle = BALL_BORDER_COLOR;
  v_context.fillStyle = BALL_COLOR;
  v_context.stroke();
  v_context.fill();


  v_context.beginPath();
Beachten Sie wieder das [[Programmierprinzip#Don.27t_repeat_yourself.2C_DRY.5B4.5D|Programmierprinzip „Don't repeat yourself“ (Dry)]].
  v_context.fillStyle = PADDLE_COLOR;
  v_context.rect (v_paddle_x, v_paddle_y, v_paddle_width, v_paddle_height);
  v_context.fill();
}
 
function o_redraw()
{
  // clear canvas (before ball and paddle are moved)
  v_context.clearRect
    (v_ball_x-v_ball_r-BALL_BORDER_WIDTH-TOLERANCE,
    v_ball_y-v_ball_r-BALL_BORDER_WIDTH-TOLERANCE,
    2*(v_ball_r+BALL_BORDER_WIDTH+TOLERANCE),
    2*(v_ball_r+BALL_BORDER_WIDTH+TOLERANCE)
    );
  v_context.clearRect
    (v_paddle_x-TOLERANCE, v_paddle_y-TOLERANCE,
    v_paddle_width+2*TOLERANCE, v_paddle_height+2*TOLERANCE
    );
 
  // collision detection
  if (v_ball_x <= v_ball_r || v_ball_x >= v_width - v_ball_r)
    v_ball_vx = -v_ball_vx;
  if (v_ball_y <= v_ball_r)
    v_ball_vy = -v_ball_vy;
 
  if (v_ball_y - 2*v_ball_r > v_height)
  {
    o_stop_game();
    return;
  }
   
  if (  v_ball_y + v_ball_r >= v_paddle_y
      && v_ball_y + v_ball_r <= v_paddle_y + v_paddle_height
      && v_ball_x + 0.5*v_ball_r >= v_paddle_x
      && v_ball_x - 0.5*v_ball_r <= v_paddle_x + v_paddle_width
    )
  {
      v_ball_vy = -v_ball_vy;
      v_ball_vx += v_paddle_friction*v_paddle_vx;
      document.getElementById('d_score').firstChild.nodeValue = 'Punkte: ' + ++v_score;
  };
 
  // move ball
  v_ball_x += v_ball_vx/FPS;
  v_ball_y += v_ball_vy/FPS;
 
  // move paddle
  if (  (v_paddle_vx < 0 && v_paddle_x > 0)
      || (v_paddle_vx > 0 && v_paddle_x + v_paddle_width < v_width)
    )
  {
    v_paddle_x  += v_paddle_vx;
    v_paddle_vx += v_paddle_ax/FPS *(v_paddle_vx > 0 ? 1 : -1);
  };
  m_draw();
}
 
function o_move_paddle(p_event)
{
  if (v_paddle_vx == 0)
  {
    if (p_event.keyCode == KEY_LEFT)
      v_paddle_vx = -v_paddle_vx_start/FPS;
    else if (p_event.keyCode == KEY_RIGHT)
      v_paddle_vx = +v_paddle_vx_start/FPS;
  };
}
 
function o_stop_paddle(p_event)
{
  v_paddle_vx = 0;
}
 
function o_start_game()
{
  v_score = 0;
 
  document.onkeydown = o_move_paddle;
  document.onkeyup  = o_stop_paddle;
 
  document.getElementById("d_start_stop").value = "Stop";
  document.getElementById("d_start_stop").onmousedown = o_stop_game;
 
  document.getElementById('d_score').firstChild.nodeValue = 'Spiel gestartet';
 
  v_interval = window.setInterval("o_redraw()", 1000/FPS);
}
 
function o_stop_game()
{
  window.clearInterval(v_interval);
 
  document.onkeydown = null;
  document.onkeyup  = null;
 
  m_reset();
}
</source>
 
==Anwendung testen==
Testen Sie Ihre Anwendung in gewohnter Weise.


=Quellen=
=Quellen=

Version vom 12. Oktober 2012, 12:44 Uhr

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 3 (SVN-Repository)

Ziel

Im dritten Teil des Tutoriums wird beschrieben, wie man MiniPong mit Hilfe einer einzigen JavaScript-Datei erstellt. Wolfgang Kowarschick bezeichnet so eine Datei als „Moloch-Datei“ (Moloch = Monstrum, Ungeheuer, alles verschlingende Bestie).

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 2 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

Fügen Sie die Variablen der beiden Dateien CONSTANT.js von Teil 1 und Teil 2 des Tutoriums in die CONSTANT.js ds dritten Teils ein. Achtung: Definieren Sie keine Variable doppelt.

Sie können später evtl. noch weitere Konstanten in diese Datei einfügen, wie z.B. Konstanten, die die Startposition von Ball und Schläger definieren, oder eine Konstaten PADDLE_FRICTION, die die Reibung des Schlägers festlegt. (Beachten Sie, dass in den Use Cases Folgendes gefordert wurde: Wird der Schläger im Moment der Kollision bewegt, so wird der Ball abhängig von der Bewegungsrichtung und Geschwindigkeit des Schlägers abgelenkt. )

main.js

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, so dass zwei Spieler gegeneinader spielen können. Jeder Spieler hat seinen eigenen Score. Der erste Spieler, der 10 Punkte erreicht hat, gewinnt.

Sie können die erzielten Punkte natürlich auch auf der Bühne selbst anzeigen (vgl. Bilder im [[Wikipedia:Pong Wikipedia-Artikel zu Pong]).

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)
  3. Musterlösungen, Musterlösungen (SVN)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_MiniPong_04&oldid=23836“