repl.it
@rafaelcastrocouto/

Web Game Tutorial

Express

Learn how to make a space shooter with basic HTML, CSS and JS. Just follow each file and have fun!

fork
loading
Files
  • index.js
  • p02-index.html
  • p03-styles.css
  • p04-http-server.js
  • p05-world.js
  • p06-player-manager.js
  • p07-server-sockets.js
  • p08-client-socket.js
  • p09-client-ui.js
  • p10-client-keyboard.js
  • p11-client-mouse.js
  • p12-client-draw.js
  • p13-client-world.js
  • p14-client-player.js
  • Packager files
  • package-lock.json
  • package.json
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/*=================================================

Our goal is to build a space shooter!
If you wanna take a look at the final game,
just click the [ start ▶ ] button above.

At any time during this tutorial you can change
the code to test how it works. Don't worry if you
break it, you can always undo with ctrl+z or just
navigate back to the original repl.it to reset.

We are gonna use three languages, HTML, CSS and JS. 
If you are not familiar with then, please 
take some time to learn the basics:
https://www.w3schools.com/html/
https://www.w3schools.com/css/
https://www.w3schools.com/js/

We will use JS to control both our client and our
server. On the client side, the browser will handle 
the JS code. On the server side, let's use
Node.js to run our scripts.
https://nodejs.org

Again, if you never heard of Node.js, please 
take some time to learn how it work. 
Remember, you don't need to install anything, 
since we are using repl.it.  
https://www.w3schools.com/nodejs/

This tutorial aims to build the game from scratch,
but we are going to use two libraries that
will let us focus on the game stuff:

Express is a web framework that will handle the
http server, static files, mime types, 404, etc.
https://expressjs.com/

Socket.io enables real-time bidirectional communication.
In other words: we will use sockets to
exchange data between server and client 
without reloading the page.
https://socket.io/docs/

Now that we are familiar with our tools,
let's put'em to good use. 

=================================================

PART 1: The main server JS file "index.js"

This file is our "main" file, everything starts
here. Outside repl we would need to install
nodejs and use a terminal or a prompt to run 
this file with the following command:
> node index.js

The first thing we will write is our server.
Without a server we cannot have a multiplayer game. 

Here we will write the main loop, and
import all that we need on the back-end.
So let's get everything started.

Below we use the Node.js module system to import
our two back-end libraries:

=================================================*/

var express  = require('express');
var io = require('socket.io');

/*=================================================

Now lets import our own server lesson files. 
I'm gonna explain how each of this files 
work on the next lessons. 

=================================================*/

var Http     = require('./p04-http-server.js');
var Map      = require('./p05-world.js');
var Player   = require('./p06-player-manager.js');
var Socket   = require('./p07-server-sockets.js');

/*=================================================

Ok, enouth of importing stuff! 
Let's put our servers to work. 

Don't worry about the details of this calls for now.
We are gonna look at them in detail later 
on their own lessons. If you are courious
the httpServer is defined on lesson 4 
and the Socket is defined in lesson 7.

=============================================*/

var httpServer = Http.server(express);
Socket.connect(httpServer, io);

/*=================================================

At last we print a beautyful message to the log
to make sure everything worked as expected.

=============================================*/

console.log("Server started");

/*=================================================

We've finished our first file and our first lesson! 
It's important to remember to add each 
server library to the dependencies list on the 
packages.json file. Learn more about this file
https://docs.npmjs.com/creating-a-package-json-file

We also need to add each client library to index.html
But we are going to talk about HTML next.
So go on and open the next file "p02-index.html"

=============================================*/