How do I share my javascript game with my friends-CodePudding

I am practicing making games with HTML canvas and JavaScript. I am making a flappy bird clone, and it is almost done. One of my friends wanted to see it but I couldn't figure out how they could play it. I sent them the folder with all the files in it, but it looked like the only problem was that when he tried to play it, he couldn't load the images. How would I go about letting people play the games I make. Was I on the right track, just sending them the folder?

const canvas = document.getElementById("canvas");
const c = canvas.getContext("2d");
const backgroundImage = document.getElementById("image")
const flappyBirdImage = document.getElementById("flappy-bird-image");
const topPipe1Image = document.getElementById("top-pipe-image");
const bottomPipe1Image = document.getElementById("bottom-pipe-image");
const gainAPointSound = document.getElementById("gain-a-point-sound");
const startButtonImage = document.getElementById("start-button-image")
let pause = true;
let scoreSet = 0;
let controlsKeyDown = {up: false, right: false, down: false, left: false};
let dx = 2;
let dy = 2;
let score = 0;
let seconds = 0;
if(pause === false) {
let secondsInterval = setInterval(() => {
    seconds   ;
    console.log(seconds)
}, 1000)
}
canvas.width = innerWidth;
canvas.height = innerHeight;



class Bird {
    constructor(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
    
    draw() {
        c.beginPath();
        c.fillStyle = 'blue';
        c.strokeStyle = 'lightBlue';
        c.drawImage(flappyBirdImage, this.x, this.y, this.width, this.height)
        c.fill()
        c.stroke();
        c.closePath();
    }
    
}



class Pipe {
    constructor(x, y, height, width) {
        this.x = x;
        this.y = y;
        this.height = height;
        this.width = width;
    }
    
    draw() {
        c.beginPath();
        c.drawImage(bottomPipe1Image, this.x, this.y, this.width, this.height)
        c.fill();
        
    }

    drawtop() {
        c.beginPath();
        c.drawImage(topPipe1Image, this.x, this.y, this.width, this.height);
        c.closePath()
    }
}


class Button {
    constructor(x,y,height,width) {
        this.x = x;
        this.y = y;
        this.height = height;
        this.width = width;
    }

    draw() {
        c.beginPath();
        c.drawImage(startButtonImage, this.x, this.y, this.height, this.width);
        c.closePath();
    }
}

// Game Objects
const topPipe1 = new Pipe(canvas.width - 300, 0, 300, 200)

const bottomPipe1 = new Pipe(canvas.width - 300, canvas.height - 300, 300, 200)

const topPipe2 = new Pipe(canvas.width   300, 0, 300, 200);

const bottomPipe2 = new Pipe(canvas.width   300, canvas.height - 300, 300, 200);

const myBird = new Bird(200, 200, 60, 60)

const startButton = new Button(canvas.width/2 - 300, canvas.height/2 - 75, 400, 150)
console.log(startButton)

// Game Mechanics
function birdControlsKeyDown(Event) {
    if(Event.key === 'ArrowUp') {
        controlsKeyDown.up = true;
    }
    if(Event.key === 'ArrowRight') {
        controlsKeyDown.right = true;
    }
    
    if(Event.key === 'ArrowLeft') {
        controlsKeyDown.left = true;
    }
    
    if(Event.key === "ArrowDown") {
        controlsKeyDown.down = true;
    }
}
function birdControlsKeyUp(Event) {
    if(Event.key === 'ArrowUp') {
        controlsKeyDown.up = false;
    }
    
    if(Event.key === 'ArrowRight') {
        controlsKeyDown.right = false;
    }
    
    if(Event.key === 'ArrowLeft') {
        controlsKeyDown.left = false;
    }
    
    if(Event.key === 'ArrowDown') {
        controlsKeyDown.down = false;
    }
}

//Bird  With Edge Collision Detection

function birdCollisionDetection() {
    // Bird Hits Bottom Of Screen
    if(myBird.y   myBird.height >= canvas.height){
        myBird.y = canvas.height - 100;
        alert("You Lost")
        document.location.reload()
    }
    
    // Bird Hits Top Of Screen
    if(myBird.y <= 0) {
        myBird.y  = dy;
    } 
    
    // Bird Hits Left Of Screen
    if(myBird.x<= 0) {
        myBird.x  = dx;
    }
    
    // Bird Hits Right Of Screen
    if(myBird.x   myBird.height >= canvas.width) {
        myBird.x -= dx;
    }
    
    // Bird With Pipe Collision Detection
    
}
function birdWithPipeCollisionDetection(a,b) {
    
    if(a.x   a.width >= b.x && a.x <= b.x   b.width && a.y  <= b.y   b.height && a.y   a.height >= b.y){
        console.log('test');
        document.location.reload()   
        alert("You Lost")
    }

}

function writeScore() {
    c.font = '30px Georgia'
c.fillStyle = 'black';
c.fillText(`Score: ${score}`, 30, 30)
}

function writeTime() {
    c.font = '30px Georgia';
    c.fillStyle = 'black';
    c.fillText(`Seconds: ${seconds}`, canvas.width/2 - 100, 30)
}
function writeStats() {
    writeScore()
    writeTime()
}

function resetPipePositions() {
    if(topPipe1.x   topPipe1.width/2 < 0) {
        topPipe1.x = canvas.width
        topPipe1.height = Math.floor(Math.random() * 200   300);
        scoreSet  ;
    }

    if(bottomPipe1.x   bottomPipe1.width/2 < 0) {
        bottomPipe1.x = canvas.width
        bottomPipe1.height = canvas.height - topPipe1.height
    }

    if(bottomPipe2.x   bottomPipe2.width/2 < 0) {
        bottomPipe2.x = canvas.width
        bottomPipe2.height = canvas.height - topPipe2.height
    }

    if(topPipe2.x   topPipe2.width/2 < 0) {
        topPipe2.x = canvas.width
        topPipe2.height = canvas.height - bottomPipe2.height
    }

  
}

function resetBirdPosition() {
    if(myBird.x < 200) {
        myBird. x  = dx;
    }
}

function updateScore() {
    if(myBird.x   myBird.width >= bottomPipe1.x && myBird.x <= bottomPipe1.x   bottomPipe1.width && myBird.y   myBird.height <= bottomPipe1.y && myBird.y >= topPipe1.y   topPipe1.height) {
        score = (scoreSet   1)
    }
}

function ifPause() {
    addEventListener('keypress', (Event) => {
        if(Event.key === 'Enter') {
            console.log(pause)
            pause = false;
        } else if(Event.key === ' ') {
            console.log(pause)
            pause = true
        }
        console.log(pause)
    })

}

function resizeScreen()  {
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;   
}

function startButtonOnClick() {
    pause = false;
}

// Game Loop

function draw() {


c.drawImage(backgroundImage, 0,0,canvas.width,canvas.height);
myBird.draw();
topPipe1.drawtop();
bottomPipe1.draw();
topPipe2.drawtop();
bottomPipe2.draw()
startButton.draw()
resetPipePositions();
resetBirdPosition();
updateScore();
ifPause()
writeStats();
// Check If Paused
if(pause === false) {
    
    // Bird Controls

    addEventListener('keydown', birdControlsKeyDown)
    
    addEventListener('keyup', birdControlsKeyUp)
    
    if(controlsKeyDown.up) {
        setInterval(myBird.y -= dy, 10);
    } else {
        myBird.y  = dy;
    }

    topPipe1.x -= dx;
    bottomPipe1.x -= dx;
    topPipe2.x -= dx;
    bottomPipe2.x -= dx;
    birdCollisionDetection();


    birdWithPipeCollisionDetection(myBird, topPipe1);

    birdWithPipeCollisionDetection(myBird, bottomPipe1);

    birdWithPipeCollisionDetection(myBird, bottomPipe2);

    birdWithPipeCollisionDetection(myBird, topPipe2);



}
requestAnimationFrame(draw)
}


draw()

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

canvas {
    overflow: hidden;
}

image {
    background: transparent;
}


#start-button {
    z-index: 100
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="./Flappy Bird Pictures and Animations/Flappy Bird Icon.png" type="icon" height="100px" width="75px">
    <script src="Flappy Bird.js" defer></script>
    <link rel="stylesheet" href="Flappy Bird.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <img src="./Flappy Bird Pictures and Animations/background image.png" id="image">
    <img src="./Flappy Bird Pictures and Animations/The Flappy Bird.png" id="flappy-bird-image">
    <img src="./Flappy Bird Pictures and Animations/Bottom Pipe.png" id="bottom-pipe-image">
    <img src="./Flappy Bird Pictures and Animations/Top Pipe.png" id="top-pipe-image">
    <audio src="D:/Coding/2d Games/Flappy Bird/Audio" id="gain-a-point-sound"></audio>
    <img src="./Flappy Bird Pictures and Animations/Start Button_files/Start-button-sprite.png"  id="start-button-image">
</body>
</html>

CodePudding user response：

Well, the simplest solution is to put the game online :). Services like Netlify allow you to do this in no time and for free. To get started, you can literally drag and drop the files to Netlify. Netlify creates a public link* of the form somename.netlify.app for you which you can then share with your friends.

When uploading your files make sure that there is no absolute path since this will not work on other machines let alone the internet. In your source code, "D:/Coding/2d Games/Flappy Bird/Audio" is an example of an absolute path. You need to use relative paths instead. As for your images, you need to make sure that your project folder has a directory "/Flappy Bird Pictures and Animations" and that this gets uploaded to Netlify (or other services) as well.

*You can also edit the link in case it is not taken already.