Javascript 2D Game Engine Source

Code Documentation and User Manual

Introduction 3

Sample Game 4

Modules 5
advertising.js 5
audio.js 5
codedgui.js 5
configuration.js 5
csfuncs.js 5
functions.js 6
gamedataonline.js 6
guiconfig.js 6
index.html 6
init.js 6
main.js 6
network.js 6
particle.js 7
recorder.js 7
renderer.js 7
resources.js 7

Source Code Licence 8

 Introduction

This Javascript 2D Game Engine is an updated version of my web browser game engine
which incorporates some of the updates I made in the C# version over the last couple of
years.

The basis for the engine goes back to 2014, when I first wrote a browser game using the
techniques I began using in this engine with a list renderer. It was then updated to run using
C# (and later Java) before I made some very recent additions in 2022 to use it on web
browsers again.

The main features of this engine are as follows:

1. A list renderer - an array of draw commands gets sent to a render function each
frame.
2. An easy to use gui system.
3. A simple particle engine.
4. Lightweight filesize.

The documentation included here details the function of each of the main modules in the
code base.

More documentation is found within the actual source code itself.

My web browser games use various versions of this code - going back to 2014, and so there
are changes along the way with each game I made as the engine became more fully
featured and complete.
 Sample Game

There is a sample game that is made with this engine at

https://www.mattiesgames.com/dungeon

It is a Javascript browser version of my C# Windows game Escape from Deathmark

Dungeon.

Feel free to use the code and assets from that game to play around with as you desire.

Here is a screenshot below:

 Modules

advertising.js

The advertising module is used if you decide to go with one of the various internet browser
game platforms that use their own advertising modules. The main change you will need to
make to this module is - if you use the advertising module of one of the various html5 game
platforms - enter their game id number they provide you and set a couple of the variables at
the top of the code to ‘true’ to enable.

If you don’t use advertising you can ignore this module and leave the various flags in the top
of the file set to false.

audio.js
The audio module handles music and audio. However loading takes place inside the init.js
file. The audio module is fairly simple and easy to understand with commands such as
playsound(audio), and playmusic(audio) and stopmusic(audio).

codedgui.js
This module is no longer used - use the gui found in csfuncs.js instead - this has been left for
historical reasons.

configuration.js
The configuration module holds a few parameters that need to be set at the beginning of
development. These are the name of the game and whether metrics are sent to a server.

csfuncs.js

This module is the heart of the game engine. That and the renderer.js module in any case. In
here you will find the gui code, as well as space to enter your own variables, data structures,
and code to run during each game frame update.

The gui is built up using a text file copied into the index.html area in the div marked ‘gui.txt’.
It is then read from there using code found in this module and then updated and drawn each
frame.

The particle engine is also found here. Particle data is also read in from a file copied into the
area marked ‘ptypes.txt’ in the div in the index.html file.
The main sections you ought to change in this code are at the header where new data
structures and variables are added, the gameupdate() function, and the case
gamegui[i].action statement to allow for new functionality with the gui you create.

functions.js
The main feature that is useful in this module is the random number generator as this mainly
exists for historical reasons. You will not need to modify this.

gamedataonline.js

This module was once used in all my browser games to handle the game frame updates,
and mostly exists for historical reasons. It is better to use the csfuncs.js module nowadays.
However my other games all use this module.

guiconfig.js

Deprecated, do not use.

index.html

The index.html contains the canvas element and links to the various scripts and modules this
game engine calls. You will need to change the values in the header indicating the title of the
game.

init.js

The init.js module contains the initialisation routines of the game including loading of the
various elements, set up of the canvas, and keypress and mouse or touch press actions.

You may wish to change the AUTHOR section at the top of the code.

main.js

You shouldn’t need to alter this module, it simply contains the main loop that runs each
frame.

network.js

The network module handles writing metrics back to the server. You can disable this in the
configuration.js section.
particle.js

Deprecated. Do not use.

recorder.js

Deprecated. Do not use.

renderer.js

The renderer.js module is where the drawing takes place of all the elements you draw on the
screen. It is well documented within the code. You will not need to change this. Though you
will likely need to call the various draw commands found within. Have a look at the
documentation for each draw command.

resources.js

Resources.js is the module where all your graphic and audio resources are loaded at
runtime. You will need to customise this according to your own needs depending on the
game you create.
 Source Code Licence

Licence:

"You may use the Javascript 2D Game Engine and associated source code and files as you
see fit. The code and licence is supplied on a 'common sense' basis - in other words - use it
as you would hope someone might use your own code and treat it with respect. Beyond that
- go nuts with it. As a small-time one man developer, if I write a law-speak licence I'm not
going to have the ability to enforce it."

French

"Vous pouvez utiliser ce Javascript 2D Game Engine et le code source associé et les fichiers
comme bon vous semble. Cette licence est fourni sur une base de `` bon sens '' - en d'autres
termes - utilisez-le comme vous espérez que quelqu'un pourrait l'utiliser votre propre code et
le traiter avec respect. Au-delà de cela, devenez fou avec ça. Comme un petit temps un
homme
développeur si je mets une licence Law-Speak, pensez-vous vraiment que je vais avoir la
capacité de l'appliquer? "

German

"Sie können diese Javascript 2D Game Engine und den zugehörigen Quellcode und die
zugehörigen Dateien nach Belieben verwenden. Diese Lizenz ist auf der Basis des
"gesunden Menschenverstandes" geliefert - mit anderen Worten - verwenden Sie es so, wie
Sie hoffen würden, dass jemand es verwenden könnte Ihren eigenen Code und behandeln
Sie ihn mit Respekt. Darüber hinaus - verrückt damit. Als kleine Zeit ein Mann Entwickler,
wenn ich eine Law-Speak-Lizenz einsetze, glauben Sie wirklich, dass ich die Möglichkeit
haben werde, diese durchzusetzen? "

Spanish

"Puede utilizar este Javascript 2D Game Engine y el código fuente y los archivos asociados
como mejor le parezca. Esta licencia es suministrado sobre una base de "sentido común",
en otras palabras, utilícelo como esperaría que alguien pudiera su propio código y trátelo
con respeto. Más allá de eso, vuélvete loco con eso. Como un pequeño tiempo un hombre
desarrollador, si pongo una licencia para hablar de la ley, ¿realmente cree que tendré la
capacidad para hacerla cumplir? "

Russian

"Вы можете использовать этот Javascript 2D Game Engine и связанный с ним исходный
код и файлы по своему усмотрению. Эта лицензия предоставляется на основе
«здравого смысла» - другими словами - используйте его так, как вы надеетесь, что
кто-то может использовать свой собственный код и относитесь к нему с уважением.
Помимо этого - сходите с ума. Как короткое время один человек разработчик, если я
поставлю лицензию на знание закона, вы действительно думаете, что у меня будет
возможность обеспечить ее соблюдение? "

Romanian

"Puteți utiliza acest Javascript 2D Game Engine și codul sursă și fișierele asociate după cum
doriți. Această licență este furnizat pe baza „bunului simț” - cu alte cuvinte - folosiți-l așa cum
ați spera că ar putea folosi cineva propriul cod și tratați-l cu respect. Dincolo de asta -
înnebuniți cu el. Ca un om mic, un singur om dezvoltator dacă pun o licență legală, chiar
crezi că voi avea capacitatea de a o aplica? "

Simplified Chinese

“您可以视需要使用此Javascript 2D Game Engine以及相关的源代码和文件。此许可为 以“常

识”为基础提供-换句话说-使用它，就像您希望某人可以使用 您自己的代码，并予以尊重。除此
之外-发疯。小时候一个人 开发人员，如果我加入了具有法律效力的许可证，您是否真的认为
我将有能力执行该许可证？”