Trijam 199: project setup

michael-tanner-coder · Dec 18, 2022 · 6134d79 · 6134d79
commit 6134d79
Show file tree

Hide file tree

Showing 15 changed files with 1,481 additions and 0 deletions.
diff --git a/fonts/PressStart2P-Regular.ttf b/fonts/PressStart2P-Regular.ttf
diff --git a/images/sungradient.png b/images/sungradient.png
diff --git a/images/sungradient2.png b/images/sungradient2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!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" />
+    <title>Trijam 198</title>
+    <style></style>
+    <style>
+      html,
+      body {
+        margin: 0px;
+        background-color: #000;
+      }
+      canvas {
+        width: 640px;
+        height: 480px;
+        image-rendering: -moz-crisp-edges;
+        image-rendering: -webkit-crisp-edges;
+        image-rendering: pixelated;
+        image-rendering: crisp-edges;
+        padding-left: 0;
+        padding-right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        border: 1px solid white;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- CANVAS -->
+    <canvas id="canvas" width="320" height="240"></canvas>
+
+    <!-- JS -->
+    <script src="js/canvas.js" type="text/javascript"></script>
+    <script src="js/fontloading.js" type="text/javascript"></script>
+    <script src="js/imageloading.js" type="text/javascript"></script>
+    <script src="js/soundloading.js" type="text/javascript"></script>
+    <script src="js/colors.js" type="text/javascript"></script>
+    <script src="js/constant.js" type="text/javascript"></script>
+    <script src="js/globalvars.js" type="text/javascript"></script>
+    <script src="js/utils.js" type="text/javascript"></script>
+    <script src="js/particles.js" type="text/javascript"></script>
+    <script src="js/game.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/js/canvas.js b/js/canvas.js
@@ -0,0 +1,2 @@
+const canvas = document.getElementById("canvas");
+const context = canvas.getContext("2d");
diff --git a/js/colors.js b/js/colors.js
@@ -0,0 +1,13 @@
+const RED = "#f2735c";
+const BURNT_ORANGE = "#f0966c";
+const ORANGE = "#f0ab5d";
+const YELLOW = "#f0c95d";
+const PURPLE = "#522152";
+const MID_PURPLE = "#75304b";
+const VIOLET = "#873b58";
+const DEEP_PURPLE = "#221529";
+const NAVY = "#323b46";
+const DARK_GRAY = "#4b5561";
+const GRAY = "#879ba3";
+const AQUAMARINE = "#37ada2";
+const GREEN = "#8cde8c";
diff --git a/js/constant.js b/js/constant.js
@@ -0,0 +1,3 @@
+const GRAVITY = 6;
+const SCREENSHAKE_MAX_SIZE = 1;
+const HIT_SCREENSHAKES = 16;
diff --git a/js/fontloading.js b/js/fontloading.js
@@ -0,0 +1,54 @@
+var fontFace = new FontFace(
+  "PressStart2P",
+  "url(fonts/PressStart2P-Regular.ttf)"
+);
+
+fontFace.load().then((font) => {
+  document.fonts.add(font);
+  console.log("Font loaded");
+});
+
+context.font = "8px PressStart2P";
+
+// if (TRY_TO_MAKE_FONTS_MORE_CRISP) {
+//   context.real_fillText = context.fillText;
+//   context.fillText = function (text, x, y, scale = 4) {
+//     // idea #1: nudge text half a pixel over: +=0.5
+//     // result: does not work as hoped - no effect. =(
+
+//     // idea #2: some texts are using width/2 to center
+//     // let's make sure coords are integers
+//     x = Math.round(x);
+//     y = Math.round(y);
+
+//     //console.log("text hack pos="+x+","+y);
+//     //context.real_fillText(text,x,y,maxWidth);
+
+//     // idea #3 - render larger on a temp canvas
+//     // a temp canvas used to make fonts crisp
+//     if (!window.fontcanvas) {
+//       // only created the first time, reused after that
+//       window.fontcanvas = document.createElement("canvas");
+//       fontcanvas.width = canvas.width * scale;
+//       fontcanvas.height = canvas.height * scale;
+//       window.fontctx = fontcanvas.getContext("2d");
+//     }
+//     fontctx.clearRect(0, 0, fontcanvas.width, fontcanvas.height);
+
+//     // quadruple the font size
+//     let smallsize = parseInt(context.font.split("px")[0]);
+//     let bigsize = smallsize * scale;
+//     fontctx.font = bigsize + "px PressStart2P";
+//     fontctx.fillStyle = context.fillStyle;
+//     fontctx.fillText(text, x * scale, y * scale); //,maxWidth);
+
+//     // now copy it while scaling the text bitmap down
+//     context.drawImage(
+//       fontcanvas,
+//       0,
+//       0,
+//       fontcanvas.width / scale,
+//       fontcanvas.height / scale
+//     );
+//   };
+// }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		const canvas = document.getElementById("canvas");
		const context = canvas.getContext("2d");