Secure Real Time Multiplayer Game - External script not running

JavaScript
1

Please I am just starting my game project but I cant get the externaL script to run.

I have the below code in game.mjs file

import Player from './Player.mjs';
import Collectible from './Collectible.mjs';

const socket = io();
const canvas = document.getElementById('game-window');
const context = canvas.getContext('2d');

const load = () => {
context.fillStyle ="#000000";
context.fillRect(0,0,canvas.width,canvas.height);
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText("Coin Race", 100, 30);
context.strokeStyle = "yellow";
context.strokeRect(5,35,canvas.width-10,canvas.height-40)
  
//window.requestAnimationFrame(load);
}

load();
//window.requestAnimationFrame(load);

I have the below code in index.html file

<!DOCTYPE html>
<html>
  <head>
    <title>Secure Real-Time Multiplayer Game</title>
    <meta
      name="description"
      content="An example for the fCC InfoSec Secure Real-Time Multiplayer Game project"
    />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../public/style.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <header>
      <h1>Secure Real Time Multiplayer Game</h1>
    </header>
    <hr style="margin: 25px" />
    <div class="container">
      <canvas 
        ref="game"
        id="game-window" 
        width="640" 
        height="480"
      >
      </canvas>
    </div>
  </body>
 <script src="../public/game.mjs" type="module"></script>
</html>

The external file isnt running using “src” in the script tag but if I add the code directly into the html file in the script tag it works.

Can someone please tell me what am doing wrong.

Thank you

2

Are you sure that src path is accurate? Can you load the .mjs file directly from that?

3

Hello,

Yes it is. I notice when comment out the below lines in the game.mjs file, the script runs. I don’t know if am supposed to require something in the package.json file for that to work

import Player from './Player.mjs';
import Collectible from './Collectible.mjs';

const socket = io();
4

Are you using websockets in this project?

5

How are you running the HTML? Are you serving it?

From the same domain

If your front is served on the same domain as your server, you can simply use:

const socket = io();

The server URL will be deduced from the window.location object.

1 Like
6

Hello, thanks for pointing me in the right direction. seems Its not working because i havent set up my socket.io connection in the server.js file which is why am getting the error. Hopefully once i get that done everything will be alright.

For the lines with import, once i added “type”: “module” to the package .jso n file, it worked

1 Like
7

Hello, yes I had done all this. I believe once I set up my socket.io connection in my server.js file. the issue will be resolved. Will get to it. Thanks for your input

8

@snowmonkey @lasjorg just found the issue,

I changed app.listen in my server.js file to http.listen and its working fine now.

Thank you

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.