ssitvit · AnmolChauhan123 · Jun 2, 2023
diff --git a/index.html b/index.html
@@ -211,6 +211,14 @@ <h3 class="card__heading">Memory Game</h3>
       </div>
     </a>
 
+    <a class="card" href="projects/3d_Box_Game/index.html">
+      <div class="card__background" style="background-image: url(projects/3d_Box_Game/images/3d_Box.png)"></div>
+      <div class="card__content">
+        <p class="card__category">Game</p>
+        <h3 class="card__heading">3D-Box Game</h3>
+      </div>
+    </a>
+
   <div>
 </section>  
 

diff --git a/projects/3d_Box_Game/images/3d_Box.png b/projects/3d_Box_Game/images/3d_Box.png
diff --git a/projects/3d_Box_Game/images/ss2.JPG b/projects/3d_Box_Game/images/ss2.JPG
diff --git a/projects/3d_Box_Game/images/ss3.JPG b/projects/3d_Box_Game/images/ss3.JPG
diff --git a/projects/3d_Box_Game/index.html b/projects/3d_Box_Game/index.html
@@ -0,0 +1,330 @@
+<!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>3d Box Game</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body></body>
+</html>
+
+<script
+  async
+  src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"
+></script>
+
+<script type="importmap">
+  {
+    "imports": {
+      "three": "https://unpkg.com/three@0.150.1/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
+    }
+  }
+</script>
+
+<script type="module">
+  import * as THREE from "three";
+  import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+  );
+  camera.position.set(1.1, 3, 8);
+
+  const renderer = new THREE.WebGLRenderer({
+    alpha: true,
+    antialias: true,
+  });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.shadowMap.enabled = true;
+  document.body.appendChild(renderer.domElement);
+
+  const controls = new OrbitControls(camera, renderer.domElement);
+
+  class Box extends THREE.Mesh {
+    constructor({
+      width,
+      height,
+      depth,
+      color = "#00ff00",
+      velocity = { x: 0, y: 0, z: 0 },
+      position = { x: 0, y: 0, z: 0 },
+      zAcceleration = false,
+    }) {
+      super(
+        new THREE.BoxGeometry(width, height, depth),
+        new THREE.MeshStandardMaterial({ color: color })
+      );
+      this.height = height;
+      this.depth = depth;
+      this.width = width;
+
+      this.position.set(position.x, position.y, position.z);
+
+      this.right = this.position.x + this.width / 2;
+      this.left = this.position.x - this.width / 2;
+
+      this.bottom = this.position.y - this.height / 2;
+      this.top = this.position.y + this.height / 2;
+
+      this.front = this.position.z + this.depth / 2;
+      this.back = this.position.z - this.depth / 2;
+
+      this.velocity = velocity;
+      this.gravity = -0.005;
+
+      this.zAcceleration = zAcceleration;
+    }
+
+    updateSides() {
+      this.right = this.position.x + this.width / 2;
+      this.left = this.position.x - this.width / 2;
+
+      this.bottom = this.position.y - this.height / 2;
+      this.top = this.position.y + this.height / 2;
+
+      this.front = this.position.z + this.depth / 2;
+      this.back = this.position.z - this.depth / 2;
+    }
+
+    update(ground) {
+      this.updateSides();
+
+      if (this.zAcceleration) {
+        this.velocity.z += 0.0007;
+      }
+
+      this.position.x += this.velocity.x;
+      this.position.z += this.velocity.z;
+      this.applyGravity(ground);
+    }
+    applyGravity(ground) {
+      this.velocity.y += this.gravity;
+
+      //this is where we hit the ground
+      if (
+        boxCollision({
+          box1: this,
+          box2: ground,
+        })
+      ) {
+        const friction = 0.7;
+        this.velocity.y *= friction;
+        this.velocity.y = -this.velocity.y;
+      } else this.position.y += this.velocity.y;
+    }
+  }
+
+  function boxCollision({ box1, box2 }) {
+    //detect the collision on the x axis
+    const zCollision = box1.front >= box2.back && box1.back <= box2.front;
+    const yCollision =
+      box1.bottom + box1.velocity.y <= box2.top && box1.top >= box2.bottom;
+    const xCollision = box1.right >= box2.left && box1.left <= box2.right;
+
+    return xCollision && zCollision && yCollision;
+  }
+
+  const cube = new Box({
+    width: 1,
+    height: 1,
+    depth: 1,
+    velocity: {
+      x: 0,
+      y: -0.02,
+      z: 0,
+    },
+  });
+  cube.castShadow = true;
+  scene.add(cube);
+
+  const ground = new Box({
+    width: 10,
+    height: 1,
+    depth: 50,
+    color: "#202020",
+    position: {
+      x: 0,
+      y: -2,
+      z: 0,
+    },
+  });
+
+  ground.receiveShadow = true;
+  scene.add(ground);
+
+  const light = new THREE.DirectionalLight(0xffffff, 1);
+  light.position.z = 1;
+  light.position.y = 3;
+  light.castShadow = true;
+  scene.add(light);
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+
+  camera.position.z = 5;
+
+  const keys = {
+    a: {
+      pressed: false,
+    },
+    d: {
+      pressed: false,
+    },
+    s: {
+      pressed: false,
+    },
+    w: {
+      pressed: false,
+    },
+    up: {
+      pressed: false,
+    },
+    down: {
+      pressed: false,
+    },
+    left: {
+      pressed: false,
+    },
+    right: {
+      pressed: false,
+    },
+  };
+
+  window.addEventListener("keydown", (event) => {
+    switch (event.code) {
+      case "KeyA":
+        keys.a.pressed = true;
+        break;
+      case "KeyD":
+        keys.d.pressed = true;
+        break;
+      case "KeyS":
+        keys.s.pressed = true;
+        break;
+      case "KeyW":
+        keys.w.pressed = true;
+        break;
+      case "ArrowUp":
+        keys.up.pressed = true;
+        break;
+      case "ArrowDown":
+        keys.down.pressed = true;
+        break;
+      case "ArrowLeft":
+        keys.left.pressed = true;
+        break;
+      case "ArrowRight":
+        keys.right.pressed = true;
+        break;
+      case "Space":
+        cube.velocity.y = 0.12;
+        break;
+    }
+  });
+
+  window.addEventListener("keyup", (event) => {
+    // console.log(event);
+    switch (event.code) {
+      case "KeyA":
+        keys.a.pressed = false;
+        break;
+      case "KeyD":
+        keys.d.pressed = false;
+        break;
+      case "KeyS":
+        keys.s.pressed = false;
+        break;
+      case "KeyW":
+        keys.w.pressed = false;
+        break;
+      case "ArrowUp":
+        keys.up.pressed = false;
+        break;
+      case "ArrowDown":
+        keys.down.pressed = false;
+        break;
+      case "ArrowLeft":
+        keys.left.pressed = false;
+        break;
+      case "ArrowRight":
+        keys.right.pressed = false;
+        break;
+    }
+  });
+
+  const enemies = [];
+
+  let frames = 0;
+  let spawnRate = 200;
+  function animate() {
+    const animationID = requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+
+    //movement code
+    cube.velocity.x = 0; //initially zero
+    cube.velocity.z = 0; //initially zero
+    if (keys.a.pressed || keys.left.pressed) {
+      cube.velocity.x = -0.06;
+    } else if (keys.d.pressed || keys.right.pressed) {
+      cube.velocity.x = 0.06;
+    }
+
+    if (keys.s.pressed || keys.down.pressed) {
+      cube.velocity.z = 0.06;
+    } else if (keys.w.pressed || keys.up.pressed) {
+      cube.velocity.z = -0.06;
+    }
+
+    cube.update(ground);
+    enemies.forEach((enemy) => {
+      enemy.update(ground);
+      if (
+        boxCollision({
+          box1: cube,
+          box2: enemy,
+        })
+      ) {
+        cancelAnimationFrame(animationID);
+        const h2 = document.createElement("H2");
+        h2.innertext = "Anmol";
+      }
+    });
+    if (frames % spawnRate === 0) {
+      if (spawnRate > 20) {
+        spawnRate -= 15;
+      }
+      const enemy = new Box({
+        width: 1,
+        height: 1,
+        depth: 1,
+        position: {
+          x: (Math.random() - 0.5) * 9,
+          y: 0,
+          z: -20,
+        },
+        velocity: {
+          x: 0,
+          y: 0,
+          z: 0.015,
+        },
+        color: "red",
+        zAcceleration: true,
+      });
+      enemy.castShadow = true;
+      scene.add(enemy);
+      enemies.push(enemy);
+    }
+    frames++;
+
+    // cube.position.y += -0.01;
+    // cube.rotation.x += 0.01;
+    // cube.rotation.y += 0.01;
+  }
+  animate();
+</script>
diff --git a/projects/3d_Box_Game/styles.css b/projects/3d_Box_Game/styles.css
@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  background-color: #ffffff;
+  background-image: linear-gradient(
+    6deg,
+    #ffffff 0%,
+    #6284ff 50%,
+    #ff0000 100%
+  );
+}