1. Projekt Setup
Welche Programme werden benötigt ?
– Visual Studion Code Download
– Node JS Download
– PhaserJS, phaser.min.js Download
– Tilemap Download
Nachdem die Programme installiert sind, erstellst du einen neuen Ordner auf dem Desktop und nennst ihn Halloween. Öffne VS Code und öffne diesen Ordner.
Starte in VS Code das Terminal und gebe ein.
npm init
package name : halloween
version : 1.0.0
description : Enter drücken
entrypoint : game.js
test command: Enter drücken
git repository : Enter drücken
keywords : Enter drücken
author : Dein Name eingeben
license : Enter drücken
Mit yes bestätigen
Deine Projekt Konfiguration ist jetzt erstellt.
Installiere jetzt express mit
npm install express --save
Installiere socket.io mitnpm install socket.io --save
Damit ist deine Installation abgeschlossen.
2. Express Server mit SocketIO erstellen
Erstelle in deinem Projekt Ordner Halloween einen neuen Ordner ‚public‘.
Im Ordner public erstellst du eine neue index.html Datei mit folgendem Inhalt.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="head">
<h1>Halloween</h1>
</div>
<div id="gameCanvas"></div>
<script src="js/phaser.min.js"></script>
<script src="js/game.js"></script>
<script src="/socket.io/socket.io.js"></script>
</body>
</html>
Erstelle im Ordner public die Datei style.css mit diesem Inhalt.
style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#head
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Canvas styles */
#gameCanvas {
display: block;
width: 90%;
height: 100%;
margin: 0 auto;
border: 2px solid black;
margin-left: 5%;
margin-right: 5%;
}
Erstelle im Ordner public den Ordner js, kopiere das heruntergelade Framework phaser.min.js rein und erstelle eine neue Datei mit game.js. Füge in game.js folgenden Inhalt ein
game.js
var config = {
type: Phaser.AUTO,
parent: 'gameCanvas',
width: document.getElementById("gameCanvas").clientWidth,
height: 800,
pixelArt: true,
physics: {
default: 'arcade',
arcade: {
debug: false,
gravity: { y: 0 }
}
},
scene: [],
};
var game = new Phaser.Game(config);
function preload() {
}
function create() {
}
function update() {
}
Erstelle im Halloween Ordner eine neue Datei server.js mit folgendem Inhalt
server.js
var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var players = {};
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
server.listen(8081, function () {
io.on('connection', function (socket) {
players[socket.id] = {
playerId: socket.id,
};
// Emit the current players to the connected client
socket.emit('currentPlayers', players);
// Broadcast the new player to all other clients
socket.broadcast.emit('newPlayer', players[socket.id]);
socket.on('disconnect', function () {
// Delete the player from the players object
delete players[socket.id];
// Emit logout event to the disconnected client
socket.emit('logout', socket.id);
// Broadcast the updated player list to all other clients
socket.broadcast.emit('currentPlayers', players);
});
});
console.log(`Listening on ${server.address().port}`);
});
Nun kannst du im VS Code Terminal den Befehl node server.js eingeben und damit den Express Server starten.
Gib im Browser nun http://localhost:8081 ein um die Seite aufzurufen.