Final Project

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 BostonGFX
+Copyright (c) 2021 simondevyoutube
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

background.js

@@ -0,0 +1,194 @@
+import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
+
+import {math} from './math.js';
+
+import {GLTFLoader} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';
+import {FBXLoader} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/FBXLoader.js';
+
+
+export const background = (() => {
+
+  class BackgroundCloud {
+    constructor(params) {
+      this.params_ = params;
+      this.position_ = new THREE.Vector3();
+      this.quaternion_ = new THREE.Quaternion();
+      this.scale_ = 1.0;
+      this.mesh_ = null;
+
+      this.LoadModel_();
+    }
+
+    LoadModel_() {
+      const loader = new GLTFLoader();
+      loader.setPath('./resources/Clouds/GLTF/');
+      loader.load('Cloud' + math.rand_int(1, 3) + '.glb', (glb) => {
+        this.mesh_ = glb.scene;
+        this.params_.scene.add(this.mesh_);
+
+        this.position_.x = math.rand_range(0, 2000);
+        this.position_.y = math.rand_range(100, 200);
+        this.position_.z = math.rand_range(500, -1000);
+        this.scale_ = math.rand_range(10, 20);
+
+        const q = new THREE.Quaternion().setFromAxisAngle(
+            new THREE.Vector3(0, 1, 0), math.rand_range(0, 360));
+        this.quaternion_.copy(q);
+
+        this.mesh_.traverse(c => {
+          if (c.geometry) {
+            c.geometry.computeBoundingBox();
+          }
+
+          let materials = c.material;
+          if (!(c.material instanceof Array)) {
+            materials = [c.material];
+          }
+
+          for (let m of materials) {
+            if (m) {
+              m.specular = new THREE.Color(0x000000);
+              m.emissive = new THREE.Color(0xC0C0C0);
+            }
+          }    
+          c.castShadow = true;
+          c.receiveShadow = true;
+        });
+      });
+    }
+
+    Update(timeElapsed) {
+      if (!this.mesh_) {
+        return;
+      }
+
+      this.position_.x -= timeElapsed * 10;
+      if (this.position_.x < -100) {
+        this.position_.x = math.rand_range(2000, 3000);
+      }
+
+      this.mesh_.position.copy(this.position_);
+      this.mesh_.quaternion.copy(this.quaternion_);
+      this.mesh_.scale.setScalar(this.scale_);
+    }
+  };
+
+  class BackgroundCrap {
+    constructor(params) {
+      this.params_ = params;
+      this.position_ = new THREE.Vector3();
+      this.quaternion_ = new THREE.Quaternion();
+      this.scale_ = 1.0;
+      this.mesh_ = null;
+
+      this.LoadModel_();
+    }
+
+    LoadModel_() {
+      const assets = [
+          ['SmallPalmTree.glb', 'PalmTree.png', 3],
+          ['BigPalmTree.glb', 'PalmTree.png', 5],
+          ['Skull.glb', 'Ground.png', 1],
+          ['Scorpion.glb', 'Scorpion.png', 1],
+          ['Pyramid.glb', 'Ground.png', 40],
+          ['Monument.glb', 'Ground.png', 10],
+          ['Cactus1.glb', 'Ground.png', 5],
+          ['Cactus2.glb', 'Ground.png', 5],
+          ['Cactus3.glb', 'Ground.png', 5],
+      ];
+      const [asset, textureName, scale] = assets[math.rand_int(0, assets.length - 1)];
+
+      const texLoader = new THREE.TextureLoader();
+      const texture = texLoader.load('./resources/DesertPack/Blend/Textures/' + textureName);
+      texture.encoding = THREE.sRGBEncoding;
+
+      const loader = new GLTFLoader();
+      loader.setPath('./resources/DesertPack/GLTF/');
+      loader.load(asset, (glb) => {
+        this.mesh_ = glb.scene;
+        this.params_.scene.add(this.mesh_);
+
+        this.position_.x = math.rand_range(0, 2000);
+        this.position_.z = math.rand_range(500, -1000);
+        this.scale_ = scale;
+
+        const q = new THREE.Quaternion().setFromAxisAngle(
+            new THREE.Vector3(0, 1, 0), math.rand_range(0, 360));
+        this.quaternion_.copy(q);
+
+        this.mesh_.traverse(c => {
+          let materials = c.material;
+          if (!(c.material instanceof Array)) {
+            materials = [c.material];
+          }
+
+          for (let m of materials) {
+            if (m) {
+              if (texture) {
+                m.map = texture;
+              }
+              m.specular = new THREE.Color(0x000000);
+            }
+          }    
+          c.castShadow = true;
+          c.receiveShadow = true;
+        });
+      });
+    }
+
+    Update(timeElapsed) {
+      if (!this.mesh_) {
+        return;
+      }
+
+      this.position_.x -= timeElapsed * 10;
+      if (this.position_.x < -100) {
+        this.position_.x = math.rand_range(2000, 3000);
+      }
+
+      this.mesh_.position.copy(this.position_);
+      this.mesh_.quaternion.copy(this.quaternion_);
+      this.mesh_.scale.setScalar(this.scale_);
+    }
+  };
+
+  class Background {
+    constructor(params) {
+      this.params_ = params;
+      this.clouds_ = [];
+      this.crap_ = [];
+
+      this.SpawnClouds_();
+      this.SpawnCrap_();
+    }
+
+    SpawnClouds_() {
+      for (let i = 0; i < 25; ++i) {
+        const cloud = new BackgroundCloud(this.params_);
+
+        this.clouds_.push(cloud);
+      }
+    }
+
+    SpawnCrap_() {
+      for (let i = 0; i < 50; ++i) {
+        const crap = new BackgroundCrap(this.params_);
+
+        this.crap_.push(crap);
+      }
+    }
+
+    Update(timeElapsed) {
+      for (let c of this.clouds_) {
+        c.Update(timeElapsed);
+      }
+      for (let c of this.crap_) {
+        c.Update(timeElapsed);
+      }
+    }
+  }
+
+  return {
+      Background: Background,
+  };
+})();

base.css

@@ -0,0 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+
+body {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: #000000;
+  margin: 0;
+  padding: 0;
+  overscroll-behavior: none;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.ui {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-family: 'Press Start 2P', cursive;
+}
+
+@keyframes game-over-anim {
+  from {
+    opacity: 0.0;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+
+.game-over-layout {
+  opacity: 0.0;
+
+  visibility: hidden;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+
+.game-over-layout.active {
+  opacity: 1.0;
+  visibility: visible;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.game-over-text {
+  font-size: 5em;
+  color: white;
+  text-shadow: 8px 8px black;
+}
+
+.score-text {
+  font-size: 3em;
+  color: white;
+  padding: 2em;
+  text-shadow: 5px 5px black;
+}
+
+.score-layout {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.game-menu-layout {
+  width: 100%;
+  height: 100%;
+  background: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  font-family: 'Segoe UI', Tahoma, sans-serif;
+}
+
+.game-menu-window {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 400px;
+}
+
+.game-menu-window > img {
+  width: 64px;
+  height: 64px;
+  padding-top: 100px;
+  image-rendering: pixelated;
+}
+
+.game-menu-window > h1 {
+  font-size: 1.6em;
+  line-height: 1.25em;
+  font-weight: 500;
+  color: rgb(32, 33, 36);
+}
+
+.game-menu-window > p, li {
+  margin: 0;
+  font-size: 1em;
+  line-height: 1.55em;
+  color: rgb(95, 99, 104);
+}
+
+.game-menu-window > #error {
+  margin: 0;
+  font-size: 0.8em;
+  line-height: 1.55em;
+  color: rgb(95, 99, 104);
+  margin-top: 12px;
+}

index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Pointlessly 3D Chrome Dinosaur Game</title>
+  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="base.css">
+</head>
+<body>
+  <script src="./main.js" type="module">
+  </script>
+  <div class="container" id="container">
+    <div class="ui">
+      <div class="score-layout">
+        <div class="score-text" id="score-text">
+          00000
+        </div>
+      </div>
+    </div>
+    <div class="ui">
+      <div class="game-over-layout" id="game-over">
+        <div class="game-over-text">GAME OVER</div>
+      </div>      
+    </div>
+    <div class="ui">
+      <div class="game-menu-layout" id="game-menu">
+        <div class="game-menu-window">
+          <img src="./raptor.png"></img>
+          <h1>No internet</h1>
+          <p>Try:</p>
+          <li>Checking the network cables, modem, and router</li>
+          <li>Reconnecting to Wi-Fi</li>
+          <li>Running Windows Network Diagnostics</li>
+          <p id="error">ERR_INTERNET_DISCONNECTED</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>