[GAME SUGGESTION] Cubefield !

views/archive/cubefield/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Chris Hayes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

views/archive/cubefield/README.md

@@ -0,0 +1,4 @@
+# cubefield
+Cubefield clone using Three.JS
+
+Live at [christopher-hayes.github.io/cubefield](https://christopher-hayes.github.io/cubefield)

views/archive/cubefield/assets/styles/main.css

@@ -0,0 +1,164 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Arial";
+}
+body {
+  height: 100vh;
+  background-color: #A3A3A3;
+  transition: background 2s;
+  overflow: hidden;
+}
+canvas {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: inherit;
+  transition: filter 1000ms;
+}
+/* overlay */
+.newGame {
+  position: absolute;
+  z-index: 3;
+  width: 150px;
+  height: 50px;
+  outline: none;
+  border: none;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  font-size: 1em;
+  left: calc( 50% - 75px);
+  top: 45%;
+  cursor: pointer;
+  /*
+  -webkit-transition: color 300ms, background 300ms;
+  transition: color 300ms, background 300ms;
+  */
+}
+.newGame:hover {
+  background-color: white;
+  color: black;
+}
+.score {
+  position: absolute;
+  color: white;
+  z-index: 3;
+  font-size: 4em;
+  font-weight: 700;
+  text-align: center;
+  width: 500px;
+  top: 50px;
+  left: calc( 50% - 250px );
+}
+.highscore {
+  position: absolute;
+  z-index: 3;
+  width: 300px;
+  left: 30px;
+  top: 50px;
+  text-align: center;
+  color: #6d6d6d;
+}
+.instr {
+  position: absolute;
+  width: 500px;
+  height: 200px;
+  z-index: 3;
+  right: 30px;
+  top: 50px;
+  text-align: right;
+  color: #6d6d6d;
+}
+.info {
+  position: absolute;
+  z-index: 3;
+  width: 660px;
+  left: calc( 50% - 330px);
+  top: calc( 50% - 270px );
+  text-align: center;
+  font-size: 1.4em;
+}
+.settings {
+  position: absolute;
+  z-index: 3;
+  width: 100%;
+  bottom: 0;
+  background-color: rgba( 0, 0, 0, 0.2 );
+  opacity: 0;
+  height: 0;
+  text-align: center;
+  -webkit-transition: opacity 1500ms, height 1500ms;
+  transition: opacity 1500ms, height 1500ms;
+}
+.settingsVis { 
+  opacity: 1;
+  height: 40%;
+}
+.group {
+  position: relative;
+  display: block;
+  width: 306px;
+  height: 70px;
+  margin: 20px 30px;
+  color: white;
+  background-color: rgba( 0, 0, 0, 0.3);
+  padding: 20px 50px;
+  float: left;
+}
+.group h3 {
+  margin-bottom: 10px;
+  font-size: 1.4em;
+  font-weight: 100;
+}
+.select {
+  width: 100px;
+  height: 30px;
+  line-height: 30px;
+  float: left;
+  cursor: pointer;
+  opacity: 0.5;
+  border: 1px solid rgba(0,0,0,0);
+}
+.select:hover {
+  opacity: 1;
+}
+.focus {
+  opacity: 1;
+  border: 1px solid white;
+}
+#bounce {
+  opacity: 0;
+  transition: opacity 1s;
+}
+.pause {
+  position: absolute;
+  width: 400px;
+  height: 200px;
+  z-index: 4;
+  background-color: rgba(255, 255, 255, 0.4);
+  left: calc( 50% - 150px );
+  top: calc( 50% - 75px );
+  text-align: center;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 500ms;
+  transition: opacity 500ms;
+}
+.pause h3 {
+  height: 50px;
+  line-height: 60px;
+  background-color: rgba( 255, 255, 255, 0.3 )
+}
+.menu, .unpause {
+  width: 180px;
+  color: white;
+  background-color: rgba( 0, 0, 0, 0.4 );
+  padding: 10px;
+  margin: 20px auto;
+  cursor: pointer;
+}
+.menu:hover, .unpause:hover {
+  background-color: rgba( 0, 0, 0, 0.7 );
+}

views/archive/cubefield/cube.js

@@ -0,0 +1,147 @@
+// GLOBALS
+var cubeColors = [ 0xFFF535, 0xFFA428, 0xFF5015 ];
+var meshMaterials = [
+                      [ // Level 1
+                        new THREE.MeshBasicMaterial({ color: cubeColors[ 0 ] }), // 0xFFF535
+                        new THREE.MeshBasicMaterial({ color: cubeColors[ 1 ] }), // 0xFFA428
+                        new THREE.MeshBasicMaterial({ color: cubeColors[ 2 ] })  // 0xFF5015
+                      ],
+                      [ // Level 2
+                        new THREE.MeshBasicMaterial({ color: 0x000000 }) // 0x000000
+                      ],
+                      [ // Level 3
+                        new THREE.MeshBasicMaterial({ color: 0x000000 }) // 0x000000
+                      ],
+                      [ // Level 4
+                        new THREE.MeshBasicMaterial({ color: 0x000000 }) // 0x000000
+                      ],
+                      [ // Level 5
+                        new THREE.MeshBasicMaterial({ color: 0xFF326C  }) // 0xFF326C 
+                      ]
+                    ];
+// var edgeMaterials = [ 0x000000, 0x00ff00, 0x000000, 0x000000, 0xffffff ];
+var edgeMaterials = [ new THREE.MeshBasicMaterial({ color: 0x000000 }),
+                      new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
+                      new THREE.MeshBasicMaterial({ color: 0x000000 }),
+                      new THREE.MeshBasicMaterial({ color: 0x000000 }),
+                      new THREE.MeshBasicMaterial({ color: 0xffffff })
+                    ];
+var cubeGeo = new THREE.BoxBufferGeometry( 0.1, 0.12, 0.05 );
+
+// CUBE CLASS
+class Cube {
+
+  constructor (scene) {
+    // Material
+    var material = meshMaterials[0][Math.floor(Math.random() * 3)];
+
+    // Mesh
+    this.mesh = new THREE.Mesh(cubeGeo, material);
+    this.mesh.castShadow = true;
+    this.mesh.position.x = Math.random() * 12 - 6.0;
+    this.mesh.position.y = 0.06;
+    this.mesh.position.z = Math.random() * -30.0;
+    var edgeGeo = new THREE.EdgesGeometry(cubeGeo);
+    this.edges = new THREE.LineSegments(edgeGeo, edgeMaterials[0]);
+    this.edges.position.set(this.mesh.position.x, this.mesh.position.y, this.mesh.position.z);
+
+    // Add to scene
+    scene.add(this.mesh);
+    scene.add(this.edges);
+
+    // Object properties
+    this.fromBelow = false;
+    this.ySpeed = 0.0;
+    this.opacity = 0.0;
+  }
+
+  update (rate, levelSpeed, triangle, levelBreak, level, bounce, block, diff) {
+    // Update position
+    if (this.mesh.position.z > triangle.position.z - Math.pow(levelSpeed, 1.2) * 150) {
+      this.ySpeed += 0.005 * rate * ( phase == -1 ? 3.0 : 1.0 );
+      this.mesh.position.y -= this.ySpeed;
+    }
+
+    if (this.mesh.position.y < 0.06 && !this.fromBelow) {
+      this.ySpeed *= -0.4 * bounce;
+      this.mesh.position.y = ( this.mesh.position.y - 0.06 ) * -1 + 0.06;
+    } else if (this.fromBelow && this.mesh.position.y > 0.06) {
+      this.fromBelow = false;
+    }
+
+    // Update edge position too
+    this.edges.position.set(this.mesh.position.x, this.mesh.position.y, this.mesh.position.z);
+
+    // check collision
+    if (Math.abs(this.mesh.position.z - triangle.position.z - 0.4) < 0.5 &&
+        Math.abs(this.mesh.position.x - triangle.position.x) < 0.055 &&
+        Math.abs(this.mesh.position.y - triangle.position.y - 0.06) < 0.03)
+    {
+      return true;
+    }
+
+    // Reset position once past screen
+    if (this.mesh.position.z > triangle.position.z + 3.0) {
+      const threshold = triangle.position.z - 20.0 - level * 5 * diff - (this.mesh.position.z - triangle.position.z);
+      this.resetPos(triangle, threshold, levelBreak, block);
+    }
+
+    // Return if cube collided with player
+    return false;
+  }
+
+  // reset position after passes user
+  resetPos (triangle, threshold, levelBreak, block) {
+    this.fromBelow = block == 2;
+    // this.opacity = 0.0;
+    // this.mesh.material.opacity = 0.0;
+    // this.edges.material.opacity = 0.0;
+    this.ySpeed = block == 2 ? -0.045 : 0;
+    // Star further back if in break between levels
+    this.mesh.position.z = threshold - (levelBreak > 0 ? 40 + Math.random() * 60 : 0);
+    this.mesh.position.x = triangle.position.x + Math.random() * 12.0 - 6.0;
+    this.mesh.position.y = block == 0 ? 0.06 : block == 1 ? Math.random() * 4 + 0.5 : -1.0;
+
+    // Update edge position too
+    this.edges.position.set(this.mesh.position.x, this.mesh.position.y, this.mesh.position.z);
+  }
+
+  // Reset position
+  reset (block, buffer, diff) {
+    var threshold = -20.0 * ( 1 + diff * 0.5 );
+    this.fromBelow = block == 2;
+    // this.opacity = 0.0;
+    // this.mesh.material.opacity = 0.0;
+    // this.edges.material.opacity = 0.0;
+    this.ySpeed = block == 2 ? -0.045 : 0;
+    this.mesh.position.x = Math.random() * 64.0 - 32.0;
+    this.mesh.position.y = block == 0 ? 0.06 : block == 1 ? Math.random() * 4 + 0.5 : -1.0;
+    this.mesh.position.z = Math.random() * threshold + ( buffer ? threshold * 2 : 0.0 );
+
+    // Update edge position too
+    this.edges.position.set(this.mesh.position.x, this.mesh.position.y, this.mesh.position.z);
+  }
+
+  // Update visuals
+  updateDesign(level) {
+    switch (level % 5) {
+      case 0:
+        this.mesh.material = meshMaterials[0][ Math.floor(Math.random() * 3) ];
+        this.edges.material = edgeMaterials[0];
+        break;
+      case 1:
+        this.mesh.material = meshMaterials[1][0];
+        this.edges.material = edgeMaterials[1];
+        break;
+      case 2:
+        this.mesh.material = meshMaterials[2][0];
+        this.edges.material = edgeMaterials[2];
+        break;
+      case 3:
+        break;
+      case 4:
+        this.mesh.material = meshMaterials[4][0];
+        this.edges.material = edgeMaterials[4];
+    }
+  }
+}

views/archive/cubefield/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Cubefield in JS</title>
+		<link rel="stylesheet" href="assets/styles/main.css">
+    <!-- THREE.JS -->
+		<script src="assets/three.min.js"></script>
+    <!-- CLASSES -->
+		<script src="cube.min.js"></script>
+</head>
+<body>
+  <button class="newGame" id="newGame" type="button" onclick="gameReset()">New Game</button>
+  <div class="score" id="score">0.0</div>
+  <div class="highscore">Highscore:<br><span id="highScore">15.0</span></div>
+  <div class="instr">Use the left and right arrow keys to dodge the cubes.<br>See how far you can get without hitting any cubes.<br>Press P to pause.</div>
+  <div class="info" id="info">
+      <h2>Cubefield in JS</h2>
+      <br>a hobby project to learn WebGL<br><br>Powered by Three.JS (Credit to Mr. Doob)<br>Credit to Cubefield creator, Max Abernethy of flecko.net
+  </div>
+  <div class="settings settingsVis" id="settings">
+    <div style="margin:0 auto;height:150px;width:100%;max-width:1398px">
+        <div class="group" id="difficulty">
+            <h3>Difficulty</h3>
+            <div class="select focus" onmousedown="updateDiff(0)" style="background-color:rgb(64, 167, 175)">Rookie</div>
+            <div class="select" onmousedown="updateDiff(1)" style="background-color:rgb(118, 57, 170)">Skilled</div>
+            <div class="select" onmousedown="updateDiff(2)" style="background-color:rgb(159, 40, 90)">Master</div>
+        </div>
+        <div class="group" id="camera">
+            <h3>Camera</h3>
+            <div class="select focus" onmousedown="updateCam(0)" style="background-color:rgb(64, 167, 175)">Hawk</div>
+            <div class="select" onmousedown="updateCam(1)" style="background-color:rgb(118, 57, 170)">Chase</div>
+            <div class="select" onmousedown="updateCam(2)" style="background-color:rgb(159, 40, 90)">1st person</div>
+        </div>
+        <div class="group" id="block">
+            <h3>Blocks</h3>
+            <div class="select focus" onmousedown="updateBlock(0)" style="background-color:rgb(64, 167, 175)">Normal</div>
+            <div class="select" onmousedown="updateBlock(1)" style="background-color:rgb(118, 57, 170)">Falling</div>
+            <div class="select" onmousedown="updateBlock(2)" style="background-color:rgb(159, 40, 90)">Pop up</div>
+        </div>
+        <div class="group" id="bounce">
+            <h3>Bounce</h3>
+            <div class="select focus" onmousedown="updateBounce(0)" style="background-color:rgb(64, 167, 175)">None</div>
+            <div class="select" onmousedown="updateBounce(1)" style="background-color:rgb(118, 57, 170)">Some</div>
+            <div class="select" onmousedown="updateBounce(2)" style="background-color:rgb(159, 40, 90)">Too Much</div>
+        </div>
+    </div>
+  </div>
+  <div class="pause" id="pause">
+      <h3>PAUSE</h3>
+      <div class="menu" onmousedown="returnToMenu()">Return to Menu</div>
+      <div class="unpause" onmousedown="pauseGameScreen()">Resume</div>
+  </div>
+  <!-- js code -->
+  <script src="main.min.js"></script>
+</body>
+</html>