PropanBen

Projekt Halloween


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 mit
npm 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.