Experience Seamless Full Ebook Downloads for Every Genre at textbookfull.

com

Introducing JavaScript Game Development : Build a

2D Game from the Ground Up 1st Edition Graeme
Stuart

https://textbookfull.com/product/introducing-javascript-
game-development-build-a-2d-game-from-the-ground-up-1st-
edition-graeme-stuart/

OR CLICK BUTTON

DOWNLOAD NOW

Explore and download more ebook at https://textbookfull.com

 Recommended digital products (PDF, EPUB, MOBI) that
you can download immediately if you are interested.

Introducing JavaScript Game Development Build a 2D Game

from the Ground Up 1st Edition Graeme Stuart

https://textbookfull.com/product/introducing-javascript-game-
development-build-a-2d-game-from-the-ground-up-1st-edition-graeme-
stuart-2/
textboxfull.com

MonoGame Mastery: Build a Multi-Platform 2D Game and

Reusable Game Engine Jarred Capellman

https://textbookfull.com/product/monogame-mastery-build-a-multi-
platform-2d-game-and-reusable-game-engine-jarred-capellman/

textboxfull.com

Building a 2D Game Physics Engine Using HTML5 and

JavaScript Tanaya

https://textbookfull.com/product/building-a-2d-game-physics-engine-
using-html5-and-javascript-tanaya/

textboxfull.com

Godot 4 Game Development Projects: Build five cross-

platform 2D and 3D games using one of the most powerful
open source game engines 2nd Edition --
https://textbookfull.com/product/godot-4-game-development-projects-
build-five-cross-platform-2d-and-3d-games-using-one-of-the-most-
powerful-open-source-game-engines-2nd-edition/
textboxfull.com
Introducing Game Theory A Graphic Guide 2nd Edition Ivan
Pastine

https://textbookfull.com/product/introducing-game-theory-a-graphic-
guide-2nd-edition-ivan-pastine/

textboxfull.com

A people's guide to publishing: build a successful,

sustainable, meaningful, book business from the ground up
First Edition Biel
https://textbookfull.com/product/a-peoples-guide-to-publishing-build-
a-successful-sustainable-meaningful-book-business-from-the-ground-up-
first-edition-biel/
textboxfull.com

Mobile Game Development with Unity: Build Once, Deploy

Anywhere 1st Edition Jonathon Manning

https://textbookfull.com/product/mobile-game-development-with-unity-
build-once-deploy-anywhere-1st-edition-jonathon-manning/

textboxfull.com

Nature Spirituality from the Ground Up Lupa

https://textbookfull.com/product/nature-spirituality-from-the-ground-
up-lupa/

textboxfull.com

Unity 2017 Game Development Essentials Build fully

functional 2D and 3D games with realistic environments
sounds physics special effects and more Tommaso Lintrami
https://textbookfull.com/product/unity-2017-game-development-
essentials-build-fully-functional-2d-and-3d-games-with-realistic-
environments-sounds-physics-special-effects-and-more-tommaso-lintrami/
textboxfull.com
Introducing
JavaScript Game
Development
Build a 2D Game from the Ground Up
—
Graeme Stuart
 Introducing
JavaScript Game
Development
Build a 2D Game from
the Ground Up

Graeme Stuart
Introducing JavaScript Game Development
Graeme Stuart
Market Harborough, Leicestershire, United Kingdom

ISBN-13 (pbk): 978-1-4842-3251-4 ISBN-13 (electronic): 978-1-4842-3252-1

https://doi.org/10.1007/978-1-4842-3252-1
Library of Congress Control Number: 2017962296
Copyright © 2017 by Graeme Stuart
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or
part of the material is concerned, specifically the rights of translation, reprinting, reuse of
illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way,
and transmission or information storage and retrieval, electronic adaptation, computer software,
or by similar or dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos,
and images only in an editorial fashion and to the benefit of the trademark owner, with no
intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if
they are not identified as such, is not to be taken as an expression of opinion as to whether or not
they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal
responsibility for any errors or omissions that may be made. The publisher makes no warranty,
express or implied, with respect to the material contained herein.
Cover image designed by Freepik
Managing Director: Welmoed Spahr
Editorial Director: Todd Green
Acquisitions Editor: Louise Corrigan
Development Editor: James Markham
Technical Reviewer: Aditya Shankar
Coordinating Editor: Nancy Chen
Copy Editor: Corbin Collins
Compositor: SPi Global
Indexer: SPi Global
Artist: SPi Global
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505,
e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a
California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc
(SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected], or visit www.apress.com/
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook
versions and licenses are also available for most titles. For more information, reference our Print
and eBook Bulk Sales web page at www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is
available to readers on GitHub via the book's product page, located at www.apress.com/
9781484232514. For more detailed information, please visit www.apress.com/source-code.
Printed on acid-free paper
Table of Contents
About the Author��������������������������������������������������������������������������������vii
About the Technical Reviewer�������������������������������������������������������������ix
Introduction�����������������������������������������������������������������������������������������xi

Part I: Drawing����������������������������������������������������������������������������������1
Chapter 1: HTML5 and the Canvas Element������������������������������������������3
HTML Primer���������������������������������������������������������������������������������������������������������3
Drawing to the Canvas������������������������������������������������������������������������������������������5
Style the Page to Highlight the Canvas�����������������������������������������������������������������7
Experiment with fillStyle���������������������������������������������������������������������������������������9
Rendering Text����������������������������������������������������������������������������������������������������10
More Shapes and Lines���������������������������������������������������������������������������������������13
Summary������������������������������������������������������������������������������������������������������������16

Chapter 2: Understanding Paths���������������������������������������������������������17

Organizing Your Files������������������������������������������������������������������������������������������17
The Canvas Grid System�������������������������������������������������������������������������������������19
Refactor Early, Refactor Often�����������������������������������������������������������������������������23
Working with Paths���������������������������������������������������������������������������������������������26
Adding Curves to a Path��������������������������������������������������������������������������������������33
Summary������������������������������������������������������������������������������������������������������������37

iii
Table of Contents

Chapter 3: Drawing to a Design����������������������������������������������������������39

Pac-Man��������������������������������������������������������������������������������������������������������������40
Create a Function������������������������������������������������������������������������������������������������43
Randomization����������������������������������������������������������������������������������������������������44
Summary������������������������������������������������������������������������������������������������������������46

Chapter 4: Drawing a Spaceship��������������������������������������������������������47

Basic Trigonometry���������������������������������������������������������������������������������������������47
A Basic Ship��������������������������������������������������������������������������������������������������������48
Using Object Literals�������������������������������������������������������������������������������������������52
Transforming the Canvas Context�����������������������������������������������������������������������54
Adding Some Curves�������������������������������������������������������������������������������������������60
Summary������������������������������������������������������������������������������������������������������������69

Chapter 5: Drawing an Asteroid���������������������������������������������������������71

Drawing Basic Shapes����������������������������������������������������������������������������������������71
Storing Shape Data���������������������������������������������������������������������������������������������76
Summary������������������������������������������������������������������������������������������������������������80

Part II: Animation���������������������������������������������������������������81

Chapter 6: Basic Animation����������������������������������������������������������������83
Start Simple��������������������������������������������������������������������������������������������������������83
A More Complicated Example�����������������������������������������������������������������������������86
Summary������������������������������������������������������������������������������������������������������������92

Chapter 7: Animating Asteroids����������������������������������������������������������93

A Solid Game Loop����������������������������������������������������������������������������������������������93
Refactoring into Simple Objects�������������������������������������������������������������������������99
Using Object Constructors��������������������������������������������������������������������������������101

iv
 Table of Contents

Extending the Asteroid Prototype����������������������������������������������������������������������102

Working with Multiple Asteroids�����������������������������������������������������������������������105
Summary����������������������������������������������������������������������������������������������������������107

Chapter 8: Practicing Objects�����������������������������������������������������������109

Why Objects?����������������������������������������������������������������������������������������������������109
Pac-Man Chased by Ghosts������������������������������������������������������������������������������110
The PacMan object�������������������������������������������������������������������������������������������112
The Ghost Object�����������������������������������������������������������������������������������������������117
Summary����������������������������������������������������������������������������������������������������������123

Chapter 9: Inheritance����������������������������������������������������������������������125
Set Up a Template���������������������������������������������������������������������������������������������125
Newton’s Laws of Motion����������������������������������������������������������������������������������127
A General-Purpose Mass Class�������������������������������������������������������������������������128
A Simple Approach to Inheritance���������������������������������������������������������������������133
Asteroids�����������������������������������������������������������������������������������������������������������134
The Ship������������������������������������������������������������������������������������������������������������137
Summary����������������������������������������������������������������������������������������������������������140

Part III: Building the Game������������������������������������������������141

Chapter 10: Simple Keyboard Interaction�����������������������������������������143
Controlling Pac-Man�����������������������������������������������������������������������������������������143
Summary����������������������������������������������������������������������������������������������������������149

Chapter 11: Controlling the Ship������������������������������������������������������151

Thruster Control������������������������������������������������������������������������������������������������151
Steering������������������������������������������������������������������������������������������������������������156
Shooting������������������������������������������������������������������������������������������������������������158
Summary����������������������������������������������������������������������������������������������������������168

v
Table of Contents

Chapter 12: Collision Detection��������������������������������������������������������169

A Quick Refactor�����������������������������������������������������������������������������������������������169
Ship vs. Asteroids���������������������������������������������������������������������������������������������178
Taking Damage�������������������������������������������������������������������������������������������������182
Asteroid vs. Projectile���������������������������������������������������������������������������������������185
Summary����������������������������������������������������������������������������������������������������������193

Chapter 13: Death or Glory���������������������������������������������������������������195

Game Over��������������������������������������������������������������������������������������������������������195
Restarting the Game�����������������������������������������������������������������������������������������199
Implementing Levels�����������������������������������������������������������������������������������������201
Summary����������������������������������������������������������������������������������������������������������203
Conclusions�������������������������������������������������������������������������������������������������������204

Index�������������������������������������������������������������������������������������������������207

vi
About the Author
Graeme Stuart is a self-taught developer
with 15 years of experience building data
analysis tools and web-based applications
using JavaScript, Ruby, and Python. He has a
PhD in energy management, and much of his
programming skill was originally developed
to that end. He taught JavaScript games
programming to first-year undergraduates for
a while, and this book is the result. He now
mostly uses complexity science to encourage
a deep understanding of agile approaches
to software engineering and to justify his
outlandish research ambitions.

vii
About the Technical Reviewer
Aditya Shankar started programming in 1993
when he was first introduced to the world of
computers. With no access to the Internet or
online tutorials at the time, he wrote his first
game in GW-BASIC by painstakingly retyping
code from a book he found at the local library.
After graduating from the Indian Institute
of Technology Madras in 2001, he spent nearly
a decade working as a software consultant,
developing trading and analytics systems
for investment banks and large Fortune 100
companies, before eventually leaving his corporate life behind so he could
focus on doing what he loved.
A self-confessed technology geek, he has spent his time since then
working on his own projects and experimenting with every new language
and technology that he could, including HTML5. During this time, he
became well known for singlehandedly re-creating the famous RTS game
Command and Conquer, as well as Commandos: Behind Enemy Lines,
entirely in HTML5.
Apart from programming, Aditya is passionate about billiards, salsa
dancing, fitness, and personal development. He maintains a personal
website where he writes articles on game programming, personal
development, and billiards, and shares his popular game demos.
When he’s not busy writing or working on his own projects, Aditya
does consulting work with companies to help them launch new software
products and games.

ix
Introduction
This book provides a full set of exercises in which we will build a fully
functional HTML canvas game. Though not a direct clone, the game is
inspired by the 1979 Atari classic, Asteroids. The code is provided for you
and is introduced piece by piece over the various chapters of the book.
If you’d like to try Asteroids, or if you’ve never played it, the the modern
Atari version can be played at https://atari.com/arcade#!/arcade/
asteroids/play. I’ve made a few different gameplay decisions for the
game we create in this book, and I encourage you to attempt to adapt the
game in any direction you like as we go along, if you feel confident in doing
so. It’s all good practice!
Typically, each chapter introduces an area of game design in a generic
way, develops the ideas towards implementing an aspect of the Asteroids
game, and urges you to think about alternative approaches. Towards the
end of the book, the game will be complete, and you should have all the
skills necessary to build a quality game of your own.
During most of the exercises, you’re encouraged to be creative. Go
through the material provided, consider the challenges presented, and
explore the impact of modifying the provided code. There’s no “correct”
way to design a game like this—it involves making many decisions, and the
provided code is only one of thousands of possible ways to do it. So, please,
try it your way if you feel confident enough. That’s a great way to learn
something.

xi
PART I

Drawing
The HTML canvas element, true to its name, provides a blank canvas on
which we can draw our game. Drawing is a fundamental aspect of working
with the HTML canvas element, so in these first few chapters we will
explore how drawing works and learn the fundamentals necessary to draw
our own designs with simple lines and fills. We will also develop some of
the game elements necessary for our Asteroids game clone.
CHAPTER 1

HTML5 and the

Canvas Element
This chapter introduces some of the basics of HTML, CSS, and JavaScript.
These are the core web technologies, and we’ll use them for developing
our game throughout this book. In order to follow along, you’ll need a text
editor to generate text files and a web browser to view the results with.
You won’t be learning everything there is to know about these
technologies. We’ll focus on just enough to draw some stuff on an HTML
canvas element. We’ll work with the HTML canvas element throughout
this book, so pay attention.

H
 TML Primer
HTML (HyperText Markup Language) documents describe content on
the web. When you access a web page, you’re typically downloading and
viewing an HTML document. HTML is a way to organize and add semantic
meaning to multimedia content (text, images, videos, and more) and to
link between documents in a “web” of information.
HTML5 is the current version of the HTML standard. The standard
was originally developed in the early 1990s and has evolved a little since
then. The modern standard allows for the extremely rich experience of
the modern World Wide Web. We’ll be working with the HTML canvas

3
© Graeme Stuart 2017
G. Stuart, Introducing JavaScript Game Development,
https://doi.org/10.1007/978-1-4842-3252-1_1
Chapter 1 HTML5 and the Canvas Element

element, so let’s create our first HTML document and add a canvas
element to it.
Create a file called exercise1.html and type in the basic HTML template
shown in Listing 1-1.

Listing 1-1. A Basic HTML Template

<!doctype html>
<html>
  <head>
    <title>This is an HTML canvas</title>
  </head>
  <body>
    <h1>This is an HTML canvas</h1>
    <canvas id="asteroids" width="400" height="400"></canvas>
  </body>
</html>

Listing 1-1 begins with a <!doctype html> declaration. The doctype

declaration is always the first thing in an HTML document. It’s an
instruction to the web browser about what version of HTML the page is
written in. In the past, using doctype was complex because there were
many versions of HTML to choose from. With HTML5, the declaration is
reduced to simply specifying that we’re using HTML.
After the doctype, the main <html> element is opened. Note that it’s
closed at the end of the file with an </html> closing tag. Everything in
between the opening and closing html tags is said to be within the html
element. There should be nothing more in an HTML file than a doctype
and an html element with content.
Within the html element there are two nested elements: <head>
and <body>. The <head> element is used to describe details about the
document, such as the <title> to be displayed in a browser tab. It often
also contains links to stylesheets or JavaScript files that specifies how the

4
 Chapter 1 HTML5 and the Canvas Element

contents are to be rendered and how they behave. The <body> element
contains the content of the document and in this case includes a level one
header <h1> and a <canvas> element.
The <canvas> element provides a JavaScript API (application
programmable interface) for drawing simple shapes and lines. It’s this API
that we will use to render our game.

D
 rawing to the Canvas
<script> elements contain JavaScript code that’s executed by the browser.
Add the <script> shown in Listing 1-2 into your document <body> after
the <canvas> element.

Listing 1-2. A Simple Script

<script>
  var canvas = document.getElementById("asteroids");
  var context = canvas.getContext("2d");
  context.strokeStyle = 'dimgrey';
  context.lineWidth = 5;
  context.rect(75, 75, 250, 250);
  context.stroke();
  // this is a comment, it has no effect!!!
</script>

You’ll need to reload the page in order for the script to run. The
script runs line by line once the page is loaded. The first line calls the
getElementById method on the global document object. The document
object is defined automatically and provides a programmable interface into
the entire HTML document. The document is loaded into memory as a
tree-like structure often referred to as the DOM (Document Object Model).
In this case we’re using getElementById to get a reference to the <canvas>
element within the DOM using the id value we specified in the HTML.

5
Chapter 1 HTML5 and the Canvas Element

The second line in the script generates a reference to a canvas context.

Canvas contexts provide an API for drawing. In this case, we’re accessing
the "2d" canvas context. It has a variety of methods for drawing lines
and shapes on the canvas and for transforming the canvas. Other canvas
contexts are available but are outside of the scope of this book.
The third and fourth lines of the script set some properties of the
context. Setting context.strokeStyle affects the color of the line, here
we set it to the built in 'dimgrey' color. Setting context.lineWidth affects
the thickness of the line, and here we set it to five pixels wide. When we
set properties of the canvas context, they remain in force until we change
them. All future lines we draw will be five pixels wide and 'dimgrey' until
we tell the canvas context otherwise.
The fifth line specifies a rectangle using the context.rect method. The
(x, y) pixel coordinates of the origin of the rectangle is specified in the first
two arguments (75 and 75). The pixel width and height of the rectangle are
specified in the last two arguments (250 and 250). Most canvas operations
involving lengths are specified in pixels (and angles are in radians). Note
that this line specifies the rectangle but doesn’t draw it. The rectangle
specification is stored in memory as a structure known as a path. We’ll talk
more about paths later.
The final active line tells the context to draw the stored path using the
current values of the context properties (lineWidth and strokeStyle).
Open the file in your browser and you’ll see the rectangle has been drawn
on the canvas, as shown in Figure 1-1.

6
 Chapter 1 HTML5 and the Canvas Element

Figure 1-1. A rectangle (actually, a square)

The final line of the script is actually a comment. Comments begin

with double forward slashes (//) and are ignored by the browser when
running the code. Comments are useful for annotating your code but also
for quickly removing lines of code while keeping the ability to uncomment
them again later by removing the slashes.

Style the Page to Highlight the Canvas

Great so far, but we can’t see the edges of the canvas on the page because
the page and canvas are both white. Insert the <style> element from
Listing 1-3 into the <header> element after the <title> element and
reload the page.

Listing 1-3. Styling the Canvas

<style media="screen">
  body {
    text-align: center;
    font-family: sans-serif;
  }

7
Chapter 1 HTML5 and the Canvas Element

  canvas {
    background-color: black;
  }
</style>

Styles allow us to control how the content of the document looks when
it’s rendered by the browser. In this case, we’re specifying that we want the
<body> element to be centrally aligned with a sans-serif font (this applies
to all child elements of the body element, as font-family is inherited by
default). We’re also specifying that <canvas> elements should be drawn
with a black background color. After reloading the page, you should see
something similar to Figure 1-2.

Figure 1-2. A 250 × 250 “rectangle” in a 400 × 400 canvas.

The top-­left corner is at point (75, 75).

This allows us to see exactly where the canvas edges are and
understand that the rectangle is positioned as specified within the canvas.
I won’t cover styles much more in this book, but they’re a very powerful
technology providing exquisite control over how to render HTML content.

8
 Chapter 1 HTML5 and the Canvas Element

Experiment with fillStyle

Setting the context.fillStyle determines the color to use when filling
drawn shapes (including fonts). Try setting the fill style to a light grey (for
example, context.fillStyle = 'lightgrey'). Reloading the page does
nothing. That’s because we haven’t asked the context to fill the path.
To fill the path it’s necessary to call the context.fill method. Go
ahead and add the call at the end of the script, just like the call to context.
stroke. Also, swap the values of fillStyle and strokeStyle to create a
dark square with a light border for more contrast. Your page should look
like Figure 1-3.

Figure 1-3. A dark square with a light border

Now let’s change the shape of the rectangle so we can create a

motivational poster. Replace the rectangle coordinates with those shown
in Listing 1-4. Notice that we can access the canvas.width and canvas.
height attributes and use them to calculate the size of our rectangle.

9
Chapter 1 HTML5 and the Canvas Element

Listing 1-4. Changing the Rectangle Color, Shape, and Position

<script>
  var canvas = document.getElementById("asteroids");
  var context = canvas.getContext("2d");
  context.strokeStyle = 'lightgrey';
  context.fillStyle = 'dimgrey';
  context.lineWidth = 5;
  context.rect(75, 50, canvas.width - 150, canvas.height - 100);
  context.stroke();
  context.fill();
</script>

R
 endering Text
The canvas treats text a lot like a collection of shapes. The outline can be
drawn with the context.strokeText method, or text can be filled with
the context.fillText method. Both methods must be passed a text
string and the (x, y) coordinates (in pixels) at which to render the text.
Before rendering text it’s useful to change the font from the default using
context.font.
Add the two lines in Listing 1-5 to your script.

Listing 1-5. Write Some Text

context.font = "34px Arial";

context.fillText("2D Drawing", 110, 100);

It seems like nothing has happened, but actually, the text has been
drawn. The problem is that the fillStyle is still set to the same color as
the filled rectangle. The text color and the background color are the same,
so nothing visibly changes.

10
 Chapter 1 HTML5 and the Canvas Element

Edit your script to add a second call to context.fillStyle. Set it to a

contrasting (light) color (for example, 'lightgrey'). Make sure your new
line is positioned after the previous call to context.fill and before your
call to context.fillText. Refresh the page and admire the fruits of your
hard work—you should have something similar to Figure 1-4.

Figure 1-4. Use fillText to render text

Try using context.strokeText instead—it has exactly the same API

(it takes the same arguments in the same order) as context.fillText.
Notice that the text is rendered as an outline but that the line width is
still set to 5 pixels. Add another call to context.lineWidth and choose a
suitable thickness. Note that you can use non-integer values such as 0.5.
Update your code to match Listing 1-6.

Listing 1-6. Some Fancy Text

<script>
  var canvas = document.getElementById("asteroids");
  var context = canvas.getContext("2d");
  context.strokeStyle = 'lightgrey';
  context.fillStyle = 'dimgrey';
  context.lineWidth = 5;

11
Chapter 1 HTML5 and the Canvas Element

  context.rect(75, 50, canvas.width - 150, canvas.height - 100);

  context.stroke();
  context.fill();
  context.font = "34px Arial";
  context.strokeStyle = '#FF2222';
  context.fillStyle = '#FFAAAA';
  context.lineWidth = 0.75;
  context.textAlign="center";
  let msg = "2D Drawing"
  context.fillText(msg, canvas.width / 2, 100);
  context.strokeText(msg, canvas.width / 2, 100);
</script>

The changes are all in the second half of the script. We set the familiar
context properties to some sensible values (note the use of hexadecimal
color codes). We then set a new property context.textAlign to the value
"center". This tells the context to use the central point in the text as the
“anchor.” So, when we actually render the text, the central point in the
text is positioned at the x-coordinate we provide rather than the default
leftmost point. The final few lines set a message variable and draw the text.
First we fill it and then we draw an outline (experiment with swapping the
order of these method calls). This is just the same as before except this
time we’re calculating the x-coordinate rather than specifying a literal
value (such as 110, as before). In this case, we’re aligning the text centrally
on the horizontal axis so we divide the width by 2. See Figure 1-5.

12
 Chapter 1 HTML5 and the Canvas Element

Figure 1-5. Fancy, centred text

More Shapes and Lines

Drawing to the canvas is pretty simple. The tricky part is deciding what to
draw and designing it. Listing 1-7 includes some code for a simple stick
figure waving. Paste it in at the end of your script.

Listing 1-7. A Stick Figure

context.strokeStyle = '#FFFFFF';
context.lineWidth = 2;
context.beginPath();
context.arc(200, 140, 20, 0, Math.PI * 2);
context.moveTo(200, 160);
context.lineTo(200, 220);
context.moveTo(180, 300);
context.lineTo(185, 260);
context.lineTo(200, 220);
context.lineTo(215, 260);
context.lineTo(220, 300);
context.moveTo(240, 130);
context.lineTo(225, 170);

13
Chapter 1 HTML5 and the Canvas Element

context.lineTo(200, 170);
context.lineTo(175, 180);
context.lineTo(170, 220);
context.stroke();

The script starts by setting the stroke color to white and the line width
to 2 pixels. Then we see two new methods of the context object. The
context.beginPath method begins a new path or resets the current path.
We need to call this because we already had an active path left over from
when we drew the original rectangle. If we don’t call it (try commenting it
out), then we continue the original path, and a line will be drawn from the
rectangle to our first circle. You’ll learn more about paths in Chapter 2.
The circle is drawn using the context.arc method. This method
can be used to draw any circle or portion of a circle. The method takes
five arguments, as follows: the first pair of arguments includes the (x, y)
coordinates (in pixels) of the center of the circle. The third argument is
the radius of the circle, and the fourth and fifth arguments are the starting
angle and finishing angle of the arc (measured in radians). To draw a full
circle, these angles should be 0 and 2π. We access the value of π via the
Math.PI method. We’ll use the built-in JavaScript Math object extensively
in later chapters.
The remaining method calls are all either context.moveTo or context.
lineTo until we finally call context.stroke to draw the path. The context.
moveTo and context.lineTo methods both take two arguments, and in both
cases these are the (x, y) coordinates specifying a location on the canvas in
pixels. They each do exactly what you would expect. To move the “pen” to
a location without drawing a line, call context.moveTo. To draw a line from
the current location to the given location, call context.lineTo.
Follow the code line by line and see how each line of code is necessary
to draw the stick figure shown in Figure 1-6. Try removing or editing some
of the lines to see what happens. Play around until you can predict the
effect of a change.

14
 Chapter 1 HTML5 and the Canvas Element

Figure 1-6. Circles and lines

Finally, complete the motivational poster by adding the code in

Listing 1-8 to your script before the recent changes to context.lineWidth
and context.strokeStyle.

Listing 1-8. A Motivational Message

let msg2 = "its quite easy";

context.font = "24px Arial";
context.fillText(msg2, canvas.width / 2, 330);
context.strokeText(msg2, canvas.width / 2, 330);

The final image should appear like Figure 1-7. Note how the position
in the code where you insert the new lines makes a difference. If you place
the new code after the context changes, the text outline will be drawn with
a thicker, white line.

15
Chapter 1 HTML5 and the Canvas Element

Figure 1-7. The finished poster

S
 ummary
In this chapter we’ve had a very quick run-through of the basic
technologies we’ll be using to create our game. We’ve created our first
HTML document and viewed it in the browser, we’ve styled our document,
and we’ve written code to manipulate our canvas element.
We’ve seen that the HTML <canvas> element has a programmable
interface, and we’ve used HTML <script> elements with JavaScript code
to draw to the canvas. We’ve been introduced to some of the methods
available in the canvas context and used them to render a motivational
poster to the canvas. And we’ve seen that the interface gives us tools for
drawing lines and filling shapes and that we can control the thickness of
lines and the color of lines and shapes.
We learned a little about the coordinate system and how paths are
constructed. In Chapter 2, we’ll expand on this and try to get a deeper
understanding of how to master the art of drawing what we want on the
HTML canvas.

16
CHAPTER 2

Understanding Paths
Chapter 1 introduced some of the basic methods for drawing to the canvas.
This chapter presents a follow-up exercise that looks more closely at the
canvas coordinate system and explores how to construct paths. These
concepts are critical to understanding the canvas and designing your own
drawing code.
We’ll also start to add a bit more structure to our code. Complex code
can be difficult to comprehend—adding structure is the main way to keep
the complexity under control. Structuring code into functions allows
the development of simpler code that uses those functions. This chapter
introduces functions and goes through the process of refactoring, a crucial
skill that’s necessary to manage code of any complexity.

Organizing Your Files

To get started, we are going to organize our HTML document in a more
traditional way. In Chapter 1, we simply included the styling information
in a <style> element. To remove clutter and make the styles reusable,
we’re going to move the styles into a separate file. Create a file called
exercise2.html and start with the basic template shown in Listing 2-1.

17
© Graeme Stuart 2017
G. Stuart, Introducing JavaScript Game Development,
https://doi.org/10.1007/978-1-4842-3252-1_2
Chapter 2 Understanding Paths

Listing 2-1. A Basic Template

<!doctype html>
<html>
  <head>
    <title>More drawing to canvas</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>More drawing to canvas</h1>
    <canvas id="asteroids" width="400" height="400"></canvas>
    <script>
      var canvas = document.getElementById("asteroids");
      var context = canvas.getContext("2d");
      // Grid drawing code goes here
    </script>
  </body>
</html>

We’ve added a <link> element that refers to an external stylesheet

called styles.css. Create the styles.css file and add the rules from Listing 2-2.
Both files should be saved in the same folder. It’s usually a good idea to
have a folder exclusively for these two files.

Listing 2-2. A Standard Stylesheet

body {
  text-align: center;
  font-family: sans-serif;
}
  canvas {
  background-color: black;
}

18
 Chapter 2 Understanding Paths

Load exercise2.html into your browser. We have a blank canvas, so let’s

put something on it.

The Canvas Grid System

We saw in Chapter 1 that the canvas has a coordinates system. The origin (0, 0)
is in the top-left corner. The canvas is canvas.width pixels wide and canvas.
height pixels high. Let’s make these coordinates visible by drawing a grid.
Start by setting the stroke color and line width. Add the following lines
into your <script> tag after the comment "Grid drawing code goes here":

context.strokeStyle = "#00FF00";
context.lineWidth = 0.25;

Now we use a for loop to increment the x-coordinate from 0 to the

canvas width in 10-pixel steps, drawing the vertical grid lines in each
iteration. Within the loop we move the current path position to the top of
the canvas at our x-coordinate and draw a line all the way to the bottom of
the canvas. Keeping the x-coordinate unchanged between the context.
moveTo and context.lineTo calls ensures we get a vertical line each time:

for(var x = 0; x < canvas.width; x += 10) {

  context.moveTo(x, 0);
  context.lineTo(x, canvas.height);
}

If you refresh the page, nothing is drawn. That’s because we’re still only
building a path and haven’t yet asked for it to be drawn. Repeat the same
pattern with the horizontal grid lines:

for(var y = 0; y < canvas.height; y += 10) {

  context.moveTo(0, y);
  context.lineTo(canvas.width, y);
}

19
Chapter 2 Understanding Paths

Again, we’re drawing each horizontal line in turn from the left of the
canvas (x = 0) to the right (x = canvas.width). The y-coordinate starts at
0 and increases by 10 pixels each iteration until it reaches canvas.height.
Nothing is actually drawn to the canvas until we call context.stroke():

context.stroke();

This then draws the path onto the canvas, as shown in Figure 2-1.

Figure 2-1. A basic grid pattern

We’d like to have a major/minor grid system so we can easily pick

out coordinates. To do this we need every fifth line to be thicker. But as
we currently do it, we have no control over the line width. The context.
stroke method we call at the end of the code applies the current stroke
style and line width to the entire current path. This means all the lines will
have the same width. If we want to give them different widths, we need to
split the drawing into multiple paths, one for each line. To do that, we need
to call both context.beginPath and context.stroke within our loops.

20
Exploring the Variety of Random
Documents with Different Content
 [Turning to the defendant.] Well now, the last of these
documents before the order was finally drawn up and issued, the
Court has already seen, because it was put in.
It is 1263-PS, RF-365, My Lord, it was in Jodl’s Document Book
Number 2, Page 104.
Will you look at the original, please.
There is an unfortunate omission from Page 110 in Dr. Exner’s
book, which I am perfectly certain is quite inadvertent. Will you look
at the document dated 15 October 1942?
My Lord, I think that is the first in your bundle. It is Page 110. It
is first in the single documents. It is Page 110 of Dr. Exner’s book,
and I apologize to him because I have just seen the marginal writing.
It was covered over before, and I had not seen it. I apologize.
My Lord, the...
It is a note, is it not, Witness, signed Warlimont, your deputy, 15
October. I think you will find it the second document in your file. I do
not want to read it all again because it has been read, but you see:
“The Proposal of the Amt Ausland Abwehr will be submitted as
Appendix 1.”
The Tribunal will find Appendix 1, in which he says—in which it
is suggested, under letter “A,” that sabotage troops who do not wear
uniforms should be court-martialed. You have said “no.” You have
given your reasons. I will not worry you about that any more. And
then “B”; members of sabotage units, who are in uniform but are
guilty of dishonorable activities are after capture to be put into
special confinement. Do you say that that does not go either?
And then, if you will go back to 15 October, just the second
paragraph down:
“The Chief of WR”—that is the Legal Department—“has
made a statement to the effect that the order was to be
drawn up in such a way that it will take into account our own
interests...”
Is it “our own interests,” Witness? “Take into account our own
interests”?
JODL: Yes, “our own interests.”
 MR. ROBERTS: “...our own interests while considering the
future conduct of the war. In this way he wanted to avoid
repercussions which would run counter to our further
intentions. Sabotage is an essential part of conducting war
in time of total warfare; we ourselves have strongly
developed this method of fighting.”
And you write against that, do you, “But the English make much
more use of it”?
JODL: Yes, it is an undeniable fact that at that time of the war
the English made much more use of it than we.
MR. ROBERTS: Is that a reason for making a law, an order of
this kind, to try and discourage the English from using sabotage
detachments?
JODL: No, that is certainly not a reason. It is only a denial of the
statement that we had strongly developed this method of fighting;
hence my remark, “Yes, but the English to a much greater extent
than we.” That, of course, has nothing at all to do with the reason for
the order.
MR. ROBERTS: Then I am not going to take more time on that
particular document, except—have you got a document dated 14
October with 1, 2, 3, 4 at the end? I think it is on a separate page,
the 1, 2, 3, 4.
JODL: Yes.
MR. ROBERTS: It says:
“With the view in mind—to prevent the enemy’s fighting the
war by using sabotage troops—following questions have to
be clarified before formulating an order:
“1) Have we ourselves the intention of dropping sabotage
Units in the zone of rear echelons of the enemy, or also far
back in the interior?
“2) Who will drop more sabotage troops, the enemy or we?
“3) Can we establish the principle: Sabotage troops do not
conduct legal war; they are to be exterminated in the
fighting without mercy?
 “4) Do we attach importance to first arresting the single
members of this group for interrogation by
Counterintelligence and not killing them immediately?”
These were the considerations which were discussed in your
office before the orders were drawn up.
JODL: These were questions—not points of view—questions
which were raised in the Armed Forces Operations Staff as a result
of the Armed Forces communiqué. Fortunately, the submission of all
these documents proves the complete correctness of everything I
said here 2 days ago. The staff, the Legal Department, and the
Ausland department racked their brains and pondered how they
could draw up the executive order implementing the Führer’s
additions to the Wehrmacht communiqué. Neither they nor I came to
any conclusion, and no proposal was made to the Führer; nothing
was done. That is what I stated here the day before yesterday, and
that is what, fortunately, you yourself have proved by submitting
these documents.
MR. ROBERTS: You have said, I think, that part of the Führer’s
order disgusted you?
JODL: Yes.
MR. ROBERTS: And you have said in your interrogation that
circulating this order was one of the things which went against your
inner conscience—one of the few things. “Your inner convictions”—to
use your actual words.
JODL: In the preliminary interrogation I said that it was one of
the few—or the only—order I received from the Führer which I, in my
own mind, completely rejected.
MR. ROBERTS: You rejected it, but these young men went on
being shot, did they not?
JODL: I have already described exactly how the commanding
generals at the front, vigorously supported by me, interpreted this
order in the mildest imaginable way in practice; actually, only very
few such incidents occurred, and I believe that most—at any rate,
nearly all that came to my knowledge—were highly justified, because
the fighting methods of those people were not methods of honest
soldiers.
MR. ROBERTS: You see, you talk about your “inner
convictions.” I think Keitel spoke about his “inner conscience.” But
should we have heard anything about these convictions and this
conscience if Germany had not lost the war?
JODL: No, but then we might have heard of the strangled at
Dieppe in a similar trial.
MR. ROBERTS: It is very late and—now, I just want to deal with
a few examples, very very quickly, of the order being carried out, as
you said it was only carried out a few times. I just, first of all, want to
refer to UK-57, which is Page 309 of Document Book 7, the German
copy Page 33—German copy Page 344. I am sorry, I had given you
the wrong number. I can read this out. It is a report which is initialed
by Keitel.
“On 16 September 1942”—mark the date, that is more than
a month before the Commando Order came into force—“10
Englishmen and 2 Norwegians landed on the Norwegian
coast, dressed in the uniform of the British Mountain Rifle
Regiment, heavily armed and equipped with explosives of
every description. After negotiating difficult mountain
country, they blew up important installations in the power
station Glomfjord on 21 September. A German sentry was
shot during the incident. Norwegian workmen were
threatened that they would be chloroformed if they resisted.
For this purpose the Englishmen were equipped with
morphium syringes. Seven of the participants have been
arrested. The others escaped into Sweden.”
Then follow seven names, which I read out to this Court, I think,
in January. They were shot on 30 October 1942. That would be, shot
as a result of the order which you circulated, although it was not in
existence when those men blew up that power station. You told me
some little time ago that that power station was a proper military
target. These men were in uniform. Can you begin to justify that?
JODL: No, I cannot justify that, and I will not justify it. I consider
it completely illegal, because this order could certainly not have been
retroactive; but I did not learn of this affair at the time. Of UK-57 I
read the first and second parts here for the first time; the third part I
read in April 1944.
MR. ROBERTS: Well, now, there are other exhibits dealing with
this matter which I am not going to put to you. They have been
referred to before, and I do not want to be cumulative. I would like
you—or perhaps I will ask you one question first.
I think it was laid down, was it not, that every action taken under
this Führer Order was to be reported in the Wehrmacht report?
JODL: Yes, that was ordered.
MR. ROBERTS: Yes, I just want to give you an example of the
Wehrmacht report.
526-PS, USA-502, My Lord, it is 7a, Page 15. It is dated 10 May
1943, German Page 21 of the small book.
[Turning to the defendant.] It is a notice from the “Q” branch of
your staff.
“On 30 March 1943 in Toftefjord an enemy cutter was
sighted. Cutter was blown up by enemy. Crew: 2 dead men,
10 prisoners.
“Cutter was sent from Scalloway (Shetlands) by the
Norwegian Navy.
“Arms: Two Colt machine guns, two mounted machine
guns, a small transmitter ... 1,000 kilograms of explosives....
“Purpose: Forming an organization for sabotaging strong-
points, battery positions, staff and troop billets, and
bridges....
“Führer order executed by the SD.
“Wehrmacht report of 6 April announces the following:
“In northern Norway an enemy sabotage unit was engaged
and destroyed on approaching the coast.”
That was false, was it not?
 JODL: I confirmed this communiqué of 6 April which included
the contribution from the commander in Norway as I received it on 6
April; this brief formulation always originated with the commander at
the front. But what actually happened is set down in this note of 10
May which, most unfortunately, I never saw, because on 10 May
1943 I traveled by train to Bad Gastein to begin a cure for a severe
case of lumbago; and so, unfortunately, I saw this document for the
first time here in Nuremberg. I am sorry, because this would have
been one of the few cases in which I might have been able to
intervene.
MR. ROBERTS: Yes, but, Witness—keep it in front of you—
because you see the action was not taken on 10 May; it was taken
before, or on 6 April. Look at the last paragraph:
“Wehrmacht report of 6 April announces the following:
“...enemy sabotage unit engaged and destroyed on
approaching the coast.”
Whereas, in fact, they had been taken prisoner and then shot
like dogs by the SD.
JODL: Yes, I have just said that. Before this contribution of 6
April, I heard nothing about the whole matter, but only on the 10th of
May did it come to our knowledge, and then the Armed Forces
Operations Staff drew up this note. The whole investigation into
these events was made by the Intelligence Service, the office of
Canaris, together with its Security Police; it was not the SD; that is
wrong; it was the Security Police.
Unfortunately I did not know of these details; the Intelligence
Service knew them. I was concerned with the whole question only
because I had to edit the Armed Forces communiqué; otherwise I
would never have dealt with the Commando Order; I was quite
innocent of it.
MR. ROBERTS: Now I just want to show you one more
instance. It is 2610-PS.
It is, My Lord, in small Document Book 7a, Page 23, the
German small book Page 41.
 Now, I want you to notice, Witness, this is the only document
which I rely on, which is not one of your own captured
contemporaneous German documents. This is a report from the
Judge Advocate General’s Department, United States Army. It
concerns 15 United States personnel who were shot under this
order. If you look at the second page:
“On the night of 22 March 1944, 2 officers and 13 enlisted
men of the Special Reconnaissance Battalion of the Army
of the United States disembarked from some United States
Navy boats and landed on the Italian coast near Stazione di
Framura. All 15 men were members of the United States
Army and were in the military service of the United States.
When they landed they were all properly dressed in the field
uniform of the United States Army and they had no civilian
clothes. Their mission was to demolish a railroad tunnel on
the main line between La Spezia and Genoa. That rail line
was being used by the German Forces to supply their
fighting forces on the Cassino and Anzio Beachhead
fronts.”
That was a good military target, that tunnel, was it not?
JODL: Yes, a military target, absolutely.
MR. ROBERTS: And all 15 men were shot because of the order
that you circulated...
JODL: I did not understand. The order which—which I
circulated; yes.
MR. ROBERTS: Which you circulated on the 19th of October.
You circulated a supplementary order to the Führer Order, the last
paragraph of which, I think, disgusted you. That is 503-PS.
JODL: It would be more correct to say “which you had to
circulate.”
MR. ROBERTS: I will take that question up in a moment. I do
not agree. I must not argue with you, but I must put some questions.
General Dostler, who ordered the shooting of those men, he
himself, you see, was also shot by sentence of this court martial.
I am going to turn now from the Commando Order and...
 JODL: May I say something else about this document?
MR. ROBERTS: Yes, anything you like.
JODL: This incident never came to my knowledge; at least, I
have no recollection of it. As far as I know, it never appeared in the
Armed Forces communiqué, because General Dostler did not report
the incident to his commanding officer, Kesselring, who might have
been able to take, and might have taken, a different course in this
affair.
MR. ROBERTS: Why do you say that you had to circulate this
order? No man can compel another to circulate an order for murder,
unless he does it.
JODL: I have explained at length that this order could not simply
be interpreted as an order to murder, but that very serious and
justified doubts and considerations could arise with regard to
international law and with regard to the justness of this order. In any
case, you should have complete appreciation of such a delicate
situation, because even now, in my position here, I cannot say or do
as I like, and that exactly is what I experienced during these last 5½
years.
MR. ROBERTS: You could have refused. You could have said,
and the other generals could have said, could you not: “We are all
honorable soldiers. We will not publish and issue those orders”?
JODL: Certainly under other circumstances it might have been
possible, first, if at the time I had not had that conflict with the Führer,
and secondly, if the British Ministry of War had made my task a little
easier. However, these events and the statement made by the British
on the 2d of September put the Führer into a rage against which I
was powerless. How much I tried to resist, for that the document
itself is the best proof, because the threat of punishment and
detailed justification for it were directed against me personally.
THE PRESIDENT: Mr. Roberts, would that be a convenient time
to break off?
[A recess was taken.]

MR. ROBERTS: I want to ask you a few questions about the

deportation of the Jews from Denmark. Will you look, please, at a
new exhibit, D-547, which I offer as GB-488. Now, that is the OKW
Operational Staff from the commander, Denmark, dated 20
September 1943. That is before the teletype which has been put in,
2 days before:
“The Führer has agreed in principle with Dr. Best’s telegram
that the Jewish question in Denmark be solved very soon
by deportation.
“Execution of this measure should take place while the
state of military emergency still exists. It is not certain if
sufficient police forces can be provided for the arrest of the
Jews and their families, about 6,000 persons, most of
whom live in Copenhagen. The Army would be heavily
burdened....
“I believe that the results of the deportation will be
serious....
“The armament industry deliveries will be prejudiced.
Considerable disturbances will have to be reckoned with.”
And you made a note on the back of it:
“I know nothing of this. If a political measure is to be carried
out by the commander of Denmark the OKW must be
notified by the Foreign Office.”
Is that right?
JODL: Yes. I would not have recalled this document, but I
certainly wrote the note. It proves that I did not remember until now
that obviously this question had been discussed in Denmark some
days before and that the commander in Denmark had been making
objections. Consequently I wrote, I know nothing of this. This is a
political measure, and if a political measure is to be carried out in
Denmark, then the Foreign Office should kindly notify us.
MR. ROBERTS: I omit one or two unimportant documents. Will
you go to document dated 1 October 1943—the fifth or sixth
document of Your Lordship’s file, Number D-547, dated 1 October
1943. It is to the OKW from Denmark, and quotes as follows:
 “The Reich Plenipotentiary in Denmark has given the
following report to the Minister for Foreign Affairs:
“1) The arrest of the Jews will take place on the night of 1-2
October. Transportation from Zealand will be carried out by
ship....
“2) Should I receive no contrary instruction, I do not intend
allowing the Jewish action to be mentioned, either on the
radio or in the press”—and then
“3) ...I intend leaving the possessions of the evacuated
Jews undisturbed in order that the seizure of these
possessions cannot be imputed to be the reason or one of
the reasons for the action.”
Then you deal with the disadvantages—the writer does—and
there is a question: “Does the Reichsführer SS know?” The answer:
“The Reichsführer SS knows, is in agreement,” and then a
pencil note in Jodl’s handwriting, “The Führer agrees.” Is that in your
writing?
JODL: Yes, that is my handwriting, but that refers only to the
announcement of the release of the interned Danish soldiers.
MR. ROBERTS: I see.
JODL: Then it is important to note in this document that the
commander in Denmark said that he did not intend having the
property of the evacuated Jews disturbed. He said:
“...I intend leaving the possessions of the evacuated Jews
undisturbed....”
He had the executive power at that time.
MR. ROBERTS: Have you got the next document in the same
bundle, 2d of October 1943, to OKW Operations Staff, from
Denmark? I quote:
“Jewish action carried out in the night of the 1-2 October by
the German Police without incidents.”
And then the last document, dated 3 October 1943, to the OKW
Operations Staff:
 “According to the statement of the Reich Plenipotentiary,
the Reichsführer SS has ordered that the Reichsführer SS
alone as the person ordering the Jewish action is to receive
the exact figures on arrests.
“The Plenipotentiary has, therefore, given no figures to the
commander of the German troops in Denmark. 232 Jews
have been handed in by the Police via the collecting points
set up by the Watch Battalion, Copenhagen.”
What was the Watch Battalion?
JODL: I cannot say that at the moment; I do not know how it
was composed. It might have been a unit of the Police; it might have
been part of the Army; I cannot say with certainty. At any rate it was
a unit which was used only for guard duties. But it is interesting that I
wrote the remark: “Is a matter of complete indifference to us,” which
proves that I was not interested in the affair, and refused to have any
part in it.
MR. ROBERTS: Yes, I wonder. First of all, you said that the
Watch Battalion might have been a part of the Wehrmacht. Were
you...
JODL: That is not certain. I do not wish to dispute it definitely.
There were also watch battalions of the Army, but it might equally
well have been a watch unit of the Police. I cannot say it with
certainty, but General Von Hannecken should have information about
it.
MR. ROBERTS: But were your “decent German soldiers,” whom
you mentioned yesterday, were they called upon to round up Jews
who managed to get through the SS net?
JODL: No, it says here, “...it was carried through by the Police,”
and I do not believe that any unit of the Wehrmacht concerned itself
with deportation of Jews. I do not believe it; the Wehrmacht rejected
that.
MR. ROBERTS: Dirty work, was it not?
JODL: I do not believe that it happened; I do not believe it.
MR. ROBERTS: Then your note: “...is a matter of complete
indifference to us”—it was a matter of complete indifference to you
how many Jews were deported, you did not care?
JODL: The note does not imply that, but it does prove that the
matter was a political one, and with political matters I was not
concerned. My attitude to the Jewish question has, I believe, been
made clear already.
MR. ROBERTS: Where did the Jews go to, Auschwitz?
JODL: No. The French Prosecution read it here; these Jews of
whom we are speaking now were taken to Theresienstadt; a few of
the older people died there, but all of them were treated well, and
received clothing and food. I had the same information, and this
document of the Danish Government confirms it.
MR. ROBERTS: You believe that, do you?
JODL: Yes, I believe that, because the Danish Government
confirms it here; it was confirmed in this court by the Prosecution
itself.
MR. ROBERTS: Now I want to deal with one other topic, the
topic of forced labor. Did you say in your speech—will you look at
your notes of your speech, Pages 38 and 39, and it is Page 298 of
Document Book 7, the big one, the paragraph, which begins on
Page 38 in the witness’ copy. It has got a frame; I think it is a piece
of paper headed “38.” I wonder if you can find it for him.
“This dilemma of manpower shortage has led to the idea of
making more thorough use of the manpower reserves in the
territories dominated by us. Right thinking and wrong
thinking are mixed up together. I believe that insofar as
concerns labor, everything has been done that could be
done. Where this has not yet been achieved, it appeared to
be more favorable politically to refrain from measures of
compulsion, and secure in turn order and economic aid. In
my opinion, however, the time has now come to take steps
with remorseless vigor and resolution in Denmark, Holland,
France, and Belgium to compel thousands of idlers to carry
out the fortification work which is more important than any
other work. The necessary orders for this have already
been given.” (Document Number L-172, Exhibit Number
USA-34.)
 Do you remember them?
JODL: There is no doubt that I drafted this once.
MR. ROBERTS: Yes?
JODL: But that does not prove that I said it.
MR. ROBERTS: But had the necessary orders been given for
the civilians in the occupied territories to work on the German
fortification?
JODL: A compulsory labor order was issued in most countries,
but I—you may not know it—I state under my oath that in Denmark
and Holland, and also in Belgium, local firms, which recruited their
own labor under the labor order, worked on these fortifications and
that the populations of these areas were particularly glad about this,
because the stronger their coast was fortified, the more certain were
they that the invasion would not take place in their neighborhood.
And, of course, they were greatly interested in preventing an
invasion, which they knew would destroy everything. Though it
sounds incredible, the local inhabitants did work on these
fortifications, some of them with the greatest enthusiasm. That is a
fact.
MR. ROBERTS: No, I did not stop you. But had the necessary
orders been given—that is in the last sentence—to compel these
people who did not want to, to compel them to work on fortification? I
am not talking about the people who did want it, but the people who
did not.
JODL: I understand. I did not know details of the procedure, as I
did not concern myself with it, but I did know that compulsory labor
orders had been issued in the occupied countries.
MR. ROBERTS: Very good. I will leave that, if you have said all
you want to say. Will you look now, please, at a new document,
Number 1383-PS, which I offer as GB-489. This is a report of a
discussion of the current military situation, 12 December 1942,
Pages 65 and 66, Jodl speaking:
“The military commander of France reports: The number of
French workers deported into the Reich since 1 June has
 now passed 220,000. There are in round figures 100,000
skilled laborers in Berlin.”
How many of these 220,000 were volunteers, did you find out?
JODL: I cannot say that; I only quoted from a report which was
appended to the situation report from France. That a large-scale
exchange between prisoners of war and workers had been in
progress has already been stated in detail by Sauckel.
MR. ROBERTS: I will leave that. I ask only two questions now
on Sagan, Stalag Luft III.
You said yesterday that after the incident of the Sagan shooting,
you thought Hitler was no longer “humane.” Did you say that?
JODL: I said yesterday, I had the impression then that he was
disavowing all humane conceptions of right.
MR. ROBERTS: Had you thought that he was humane up to
March of 1944?
JODL: Before this time, I personally knew of no action of his
which could not be justified legally, at least under international law.
All his previous orders, so far as I knew, could still be justified in
some way. They were reprisals. But this act was not a reprisal.
MR. ROBERTS: This was—would you agree with me—the word
is not too strong—that this was sheer murder of these 50 airmen?
JODL: I completely agree with you: I consider it sheer murder.
MR. ROBERTS: How could you honorable generals go on
serving a murderer with unabated loyalty?
JODL: I did not serve with unabated loyalty after this event, but I
did everything in my power to avoid further injustice.
MR. ROBERTS: Now I come to something else, the question of
destruction in Norway. The document is 754-PS. It has not yet been
exhibited. I offer it as GB-490. This document is signed by you, is it
not?
JODL: I have known this document for a long time; it is signed
by me.
MR. ROBERTS: Yes. Perhaps I might just read parts of it to the
Tribunal. Dated 28 October 1944. It is from your staff, and the
distribution is to the Army supreme command; commander-in-chief,
Norway; to the Reich Commissioner, Norway; and the Navy.
“Because of the unwillingness of the northern Norwegian
population to evacuate voluntarily the Führer has agreed to
the proposals of the Reich Commissioner and has ordered
that the entire Norwegian population east of the Fjord of
Lyngen be evacuated by force in the interest of their own
security, and that all homes are to be burned to the ground
or destroyed.
“The commander, Northern Finland, is responsible that the
Führer’s orders be carried out without consideration. Only
by this method can the Russians with strong forces, aided
by these homesteads and the population familiar with the
terrain, be prevented from following our withdrawal
operations during the winter and shortly appearing in front
of our position in Lyngen. This is not the place for sympathy
for the civilian population.”
Lyngen is in the very north of Norway, is it not, on the west
coast?
JODL: No, on the northern coast, where Finland is closest to the
coast of the polar region and very near Norway.
MR. ROBERTS: Now, that order was carried out, according to
the Norwegian report, UK-79, which the Tribunal will find as the last
document in the small book, 7A, Page 26 of the Norwegian report, at
the bottom of the page, Page 26:
“As a result of the advance of the Russian troops and the
retreat of the German Army in Finnmark, October-
November 1944, the Germans practiced the ‘scorched
earth’ policy for the first time in Norway. Orders were issued
that the civilian population was to evacuate, and that all
houses, transport, and stores were to be destroyed. As a
result of this, about 30,000 houses were damaged apart
from 12,000 items of damage to chattels amounting to 176
million kroner.”
 And then, for photographs will the Tribunal turn to Pages 62 and
63; 62 is a copy of the German order, and 63 is a photograph of the
ruins of a fishing village.
That was a cruel order, was it not, Witness?
JODL: No, not exactly. I should like to make a few explanatory
remarks about it. Typically, as I have always said, this order was
urged upon the Führer by the Reich Commissioner Terboven; not by
the soldiers but much against their will.
Secondly, this order was not carried out, because otherwise the
cities of Kirkenes, Hammerfest, and Alta would today no longer exist.
All these cities are east of the Lyngen Fjord. In practice this order
was moderated by our forces in agreement with me, and in
conversations I had with my brother, who was the commanding
general in that region—and whom I wanted to call as a witness since
I expected this document to be produced—it was moderated to such
an extent that, in fact, only what was necessary from a military point
of view and could be justified under Article 23 of the Hague
Regulations on Land Warfare was destroyed. Otherwise no city or
house would be left today in northern Norway; and if you were to
travel there, you would see that these cities are still standing, not
destroyed.
The Armed Forces commander in Norway strongly protested
against this attitude of Terboven, and I repeated these objections to
the Führer in similarly strong terms, but nevertheless he demanded
that this order be issued. We who retained our humanitarian
sentiments carried out the order only insofar as it was absolutely
necessary for military reasons. These are the facts.
MR. ROBERTS: I think you said, when you were interrogated,
that your brother complained of this order, did he not?
JODL: Yes, quite, he was enraged by this decree.
MR. ROBERTS: Very well. I am now going to turn to two
documents with regard to the treatment of the Norwegian civilian
population.
They are in your Document Book 1, Pages 99 and 100—well, it
begins at Page 98. These are regulations on the conduct during the
occupation of Denmark and Norway. And there are instructions to
the troops to treat the inhabitants politely and well and to behave
themselves with due decorum. That is right, is it not?
JODL: Yes, that is correct.
MR. ROBERTS: And they must be told that they are entering
Norway for the protection of the country and the safety of its
inhabitants. That appears on Page 99. That is rather a euphemistic
description of a sudden invasion with no declaration of war, is it not?
JODL: Yes, but at first it was carried out in a fairly peaceful
manner on the whole.
MR. ROBERTS: From your point of view?
JODL: No, from the point of view of the Norwegians as well. The
most extraordinary things...
MR. ROBERTS: Well, you know, we have seen—we can see in
the Norwegian Government’s report photograph after photograph of
these towns and villages bombed to ruins. Is that your idea of an
orderly occupation?
JODL: What was bombed on the day of the landing is hardly
worth mentioning; just a few coastal batteries and a few fortifications,
but no cities. Villages were destroyed only later in the battle with the
English brigade at Dombass and at Lillehammer, but nothing was
destroyed when the country was first occupied. Then the
Norwegians only stood at the quays, hands in their pockets, and
looked on with great interest.
MR. ROBERTS: And naturally, Witness, if you could have
landed without opposition and occupied the country without
opposition, so much the better for you? That is obvious, is it not?
JODL: Yes, undoubtedly; that would have been even better; and
the Norwegians would certainly have fared very well during the
occupation if Terboven had not come.
MR. ROBERTS: Now, I want you to look at a part of that
document which, quite properly, of course, was not read.
It is Appendix 5 which will be part, My Lord, I assume, of Exhibit
AJ-14, the number which this document was given when it was put in
in the examination-in-chief. But I am handing the Tribunal copies of
Appendix 5, because it does not appear in the Jodl document book.
 [Turning to the defendant.] Well, now, Appendix 5, I can
describe as the sting in the tail of this document:
“Guiding Principles for the Attitude of Troops in Occupied
Areas.
“Only”—I do not read the first few paragraphs—“Only in the
event of the civil population’s putting up a resistance or
behaving rebelliously can the following decisions be carried
out:
“1) If the civilian population offers resistance or if attacks
are to be feared, the arrest of hostages should, on principle,
be resorted to. Hostages should only be arrested on orders
of the commander of a regiment or a commander of
equivalent rank.
“When accommodating and feeding hostages it should be
borne in mind that they are not imprisoned because of
crimes. Hostages and population are to be informed that
the hostages will be shot at any sign of hostile action.
Previous sanction of the shooting by the divisional
commander must be obtained....”
Then:
“Armed resistance by the civilian population is to be
crushed by force of arms.”
The last sentence on that page:
“The death penalty will be imposed for violence of any kind
against the German Armed Forces. Immediate trials will be
held by a field court martial. The regimental commander
can appoint the summary court, composed of one captain,
one sergeant, one corporal, hear witnesses, draw up the
sentence in writing. The verdict will be the death penalty if
guilty, otherwise acquittal. The sentence will be executed
immediately after confirmation by the regimental
commander.
 “The following are to be considered as acts of violence:
Sabotage, destruction of our lines of communications,
cutting of telephone wires, demolitions, et cetera.”
(Document Number Jodl-37, Exhibit Number AJ-14.)
A little drastic, that, was it not? Only the death penalty?
JODL: These instructions are, word for word, in complete accord
with our directives which, in times of peace, were laid down by the
group of experts on international law in co-operation with the Foreign
Office and with German professors of international law. It would have
been well, if only these, our military precepts, our military court
procedure laid down before we went to war, had been followed
consistently everywhere. Our official directives laid down the
question of hostages from the point of view of international law, and
there is no doubt that under international law as applicable in the
year 1939, the taking of hostages was admissible.
MR. ROBERTS: I suggest to you, as you raise that point, that
nowhere in international law will you find the shooting of hostages
legalized at all.
JODL: Then it is not with certainty prohibited anywhere in
international law. I believe it is an open question. In our directives,
even in the Handbook on Tactics, the concept of taking hostages
had been laid down for years.
MR. ROBERTS: That may be so, and I do not want to argue
with you about it. I suggest to you that the Hague Regulations
protect the lives of civilians in occupied countries, unless they
commit crimes, of course, and also prohibit collective punishment of
the innocent.
If you do not want to say any more on that—I do not want to
stop you if you do.
JODL: I can only summarize and say that every word here is in
accord with the directives applicable in the German Army, and these
directives were not illegal. But one would have to argue this problem
with experts on international law.
MR. ROBERTS: Very good. Now, will you look at one other
document dealing with Norway? It is D-582.
 My Lord, it is a new document, and I offer it as GB-491.
[Turning to the defendant.] Is that a document which comes from
your office?
JODL: Yes. It originated with the Armed Forces Operations
Staff, Quartermaster Section.
MR. ROBERTS: Do you know of it or not?
JODL: I cannot recall it, but there are some notes of mine on it,
and so I undoubtedly saw the document.
MR. ROBERTS: Oh, yes. Where are the notes, Witness?
JODL: They are on the back page of the last teleprint message.
MR. ROBERTS: Oh, I see what you mean, yes. Well, will you
take first of all—I had forgotten that you were getting more than one
document. Will you take first of all the document dated the 2d of
February 1945? I think it is the top one.
JODL: There are no remarks of mine on that document, so I
cannot say with certainty whether I have seen it.
MR. ROBERTS: Just have a look at it and tell me whether you
have seen it.
JODL: I do not think I have seen this. I do not—I have no
recollection of having ever read it.
MR. ROBERTS: Well, then, I do not think it would be right to
cross-examine you on that document.
My Lord, in that case, I would ask to withdraw it, and I will not
put it in as an exhibit.
THE PRESIDENT: I think the defendant said that it was from his
office.
MR. ROBERTS: Very well, then. I will—he did that.
[Turning to the defendant.] You see what the document says,
Defendant. It is dated 2 April 1945; it deals with...
JODL: The 2d of February.
MR. ROBERTS: It is the 2d of February. It deals with Reich
Commissioner Terboven’s report to the Führer. It says:
“Those responsible for attempts to murder and to carry out
sabotage are the illegal elements within Norway with a
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

textbookfull.com