Hi there! I am currently trying to finish up a project I have been working on for a while. I am making a game from HTML, CSS, and JavaScript. Over this winter break, I have completed the Learn Node Js course and have just finished the webpack lesson in the Learn Build Tools course (both on codecademy). I still don’t really understand node js that well and need to refer to the course when using webpack, but it was enough for me to bundle this game project I have been working on. I now think it is finally ready to put on the world wide web, and I am interested in using google sites to do this. I tried using GitHub pages to get the website running, and then use the embedded code feature to put it on the google site. However, I ran into a bunch of CSP related issues (Content Security Policy). This has happened on one of the codecademy projects in the build tools course, and it was never addressed on how to fix it. At that point I just loaded it locally by running the index.html file and that worked at the time. However, I run into CSP issues when running it locally as well. I don’t really know much about CSP, and I don’t even know where to begin regarding how to fix the issue. I am more confused after research about CSP compared to before. I will link my GitHub repositories (the one named Shape Fight is the original source code and the other is being used for GitHub pages) below because the project is quite large and this would be a very large post if I included all the source files. However, I think it would be helpful if I put the html file as I learned something about using the <meta>
tag to fix CSP related issues. Any help will be greatly appreciated and thank you so much for reading!
shape.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href='https://fonts.googleapis.com/css?family=Press Start 2P' rel='stylesheet'>
<script type="module" defer src="../Final/main.js"></script>
<title>Shape Fight!</title>
</head>
<body>
<div id="play-screen" style="display: block;">
<button id="play-btn">PLAY</button>
</div>
<div id="start-screen" style="display: none">
<h1 id="title">SHAPE FIGHT</h1>
<h2 id="score-display"></h2>
<button id="start-button" class="btn">Start</button>
<button id="how-to-play" class="btn">How To Play</button>
<button id="credits-btn" class="btn">Credits</button>
<br>
<p id="high-score">Score: 0</p>
</div>
<div id="instructions" style="display: none">
<p id="text-instructions">
NOTE: PLEASE USE A MOUSE FOR BEST EXPERIENCE<br><br><br>
Hello Player! <br><br>
In this game, you control a triangular ship that moves around and shoots enemy shapes. <br><br>
Your objective is to last as long as you can by killing as many enemy shapes as you can without getting <br><br> shot 3 times. <br><br><br>
- Use your mouse to point the ship in a given direction <br><br>
- Use W to move foward <br><br>
- Left click to shoot <br><br>
- Space bar to move the shield to where ship is looking <br><br> (teleports or kills enemies on contact) <br><br><br>
Good luck out there! Over and out.
</p>
<button id="back-btn" class="btn">Back</button>
</div>
<div id="credits-screen" style="display: none">
<p id="credits-txt">
Special thanks to Oliver Campbell for some of the music and sound effects!
<br><br>
Created by Yash Vihan Gupta
</p>
<br><br><br><br><br><br><br><br><br><br>
<button id="credits-back-btn" class="btn">Back</button>
</div>
<canvas id="gameCanvas" style="display: none"></canvas>
</body>
</html>