a4-matthew-mcgourty

README.md

@@ -1,61 +1,20 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
+# Falling Blocks game
 
-Due: October 2nd, by 11:59 AM.
+Glitch link: https://a4-matthew-mcgourty.glitch.me
 
-For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser.
+This application was created using Three JS. 
 
-[WebAudio / Canvas Tutorial](https://github.com/cs-4241-2023/cs4241-2023.github.io/blob/main/using.webaudio_and_canvas.md)  
-[SVG + D3 tutorial](https://github.com/cs-4241-2023/cs-4241-2023.github.io/blob/main/using.svg_and_d3.md)  
+The goal of this application is to move your cube using the WASD keys and avoid the blocks falling from the sky.
+The game gets more difficult over time no matter which difficulty is chosen, as blocks spawn and move faster.
 
-Baseline Requirements
----
+One main challenge I faced for this application was collision detection with 3d rotating objects. In the end, I was able to do this 
+using a hit() function that takes in an two objects and their widths. It then detects if the objects have collided by getting each objects
+edge by its current position (center) +- its width/2. It does this for both x and y axis, and each time the animate() function is called,
+each block is looped through and checks if it has hit the player, if it has the player is sent to the game over screen. This function is not perfect,
+but works well enough that the game is playable.
 
-Your application is required to implement the following functionalities:
+For additional UI elements, there is three difficulties the user can choose from. The difficulties each have a corresponding html and js file,
+and the main difference in them is the rate of the falling blocks being spawned, the speed of the falling blocks being spawned, and the rate at
+which the game gets more difficult. Other than that, the game remains the same. Once a user dies, they are also taken to a game over screen, 
+where they can choose to go back to the main page or play again and choose another difficulty, or the same one.
 
-- A server created using Express. This server can be as simple as needed.
-- A client-side interactive experience using at least one of the following web technologies frameworks.
-  - [Three.js](https://threejs.org/): A library for 3D graphics / VR experiences
-  - [D3.js](https://d3js.org): A library that is primarily used for interactive data visualizations
-  - [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D raster drawing API included in all modern browsers
-  - [SVG](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D vector drawing framework that enables shapes to be defined via XML.
-  - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): An API for audio synthesis, analysis, processing, and file playback.
-- A user interface for interaction with your project, which must expose at least four parameters for user control. [tweakpane](https://cocopon.github.io/tweakpane/) is highly recommended for this, but you can also use regular HTML `<input>` tags (the `range` type is useful to create sliders). You might also explore interaction by tracking mouse movement via the `window.onmousemove` event handler in tandem with the `event.clientX` and `event.clientY` properties. Consider using the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to ensure that that both mouse and touch events will both be supported in your app.
-- Your application should display basic documentation for the user interface when the application first loads.
-
-The interactive experience should possess a reasonable level of complexity. Some examples:
-### Three.js
-- A generative algorithm creates simple agents that move through a virtual world. Your interface controls the behavior / appearance of these agents.
-- A simple 3D game... you really want this to be a simple as possible or it will be outside the scope of this assignment.
-- An 3D audio visualization of a song of your choosing. User interaction should control aspects of the visualization. 
-### Canvas
-- Implement a generative algorithm such as [Conway's Game of Life](https://bitstorm.org/gameoflife/) (or 1D cellular automata) and provide interactive controls. Note that the Game of Life has been created by 100s of people using `<canvas>`; we'll be checking to ensure that your implementation is not a copy of these.
-- Design a 2D audio visualizer of a song of your choosing. User interaction should control visual aspects of the experience. 
-### Web Audio API
-- Create a screen-based musical instrument using the Web Audio API. You can use projects such as [Interface.js](http://charlie-roberts.com/interface/) or [Nexus UI](https://nexus-js.github.io/ui/api/#Piano) to provide common musical interface elements, or use dat.GUI in combination with mouse/touch events (use the Pointer Events API). Your GUI should enable users to control aspects of sound synthesis. If you want to use higher-level instruments instead of the raw WebAudio API sounds, consider trying the instruments provided by [Tone.js]() or [Gibber](https://github.com/charlieroberts/gibber.audio.lib).
-### D3.js
-- Create visualizations using the datasets found at [Awesome JSON Datasets](https://github.com/jdorfman/Awesome-JSON-Datasets). Experiment with providing different visualizations of the same data set, and providing users interactive control over visualization parameters and/or data filtering. Alternatively, create a single visualization with using one of the more complicated techniques shown at [d3js.org](d3js.org) and provide meaningful points of interaction for users.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. *NOTE: If you don't use Glitch for hosting (where we can see the files) then you must include all project files that you author in your repo for this assignment*.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include:
-
-- the goal of the application
-- challenges you faced in realizing the application
-- the instructions you present in the website should be clear enough to use the application, but if you feel any need to provide additional instructions please do so here.

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "a4-matthew-mcgourty",
+  "version": "0.0.1",
+  "description": "CS 4241 Assignment 4 Creative Coding",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2"
+  },
+  "engines": {
+    "node": "14.x"
+  },
+  "repository": {
+    "url": "https://glitch.com/edit/#!/a4-matthew-mcgourty"
+  },
+  "keywords": [
+    "node",
+    "glitch",
+    "express"
+  ]
+}

public/easy.js

@@ -0,0 +1,155 @@
+const { THREE } = window;
+
+// Create a scene
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000
+);
+
+// Lighting 
+const directionalLight = new THREE.DirectionalLight(0xffffff, 7);
+scene.add(directionalLight);
+
+// Size and background of renderer
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setClearColor(0x4CDAE6); // bg color
+document.body.appendChild(renderer.domElement);
+
+// Add player cube
+const playerGeometry = new THREE.BoxGeometry(5, 5, 5);
+const playerMaterial = new THREE.MeshStandardMaterial({color: 0x00ff00});
+const player = new THREE.Mesh(playerGeometry, playerMaterial);
+scene.add(player);
+
+camera.position.z = 30;
+
+// Key booleans
+const keys = {
+  left: {
+    pressed: false,
+  },
+  right: {
+    pressed: false,
+  },
+  up: {
+    pressed: false,
+  },
+  down: {
+    pressed: false,
+  },
+};
+
+// Press keys
+window.addEventListener("keydown", (event) => {
+  switch (event.code) {
+    case "KeyA":
+      keys.left.pressed = true;
+      break;
+    case "KeyD":
+      keys.right.pressed = true;
+      break;
+    case "KeyW":
+      keys.up.pressed = true;
+      break;
+    case "KeyS":
+      keys.down.pressed = true;
+      break;
+  }
+});
+
+// Release keys
+window.addEventListener("keyup", (event) => {
+  switch (event.code) {
+    case "KeyA":
+      keys.left.pressed = false;
+      break;
+    case "KeyD":
+      keys.right.pressed = false;
+      break;
+    case "KeyW":
+      keys.up.pressed = false;
+      break;
+    case "KeyS":
+      keys.down.pressed = false;
+      break;
+  }
+});
+
+let frames = 0;
+let spawnRate = 120;
+let blockSpeed = 0.1;
+
+const blocks = [];
+
+/*
+Check if two objects have hit each other
+Takes in two objects and their width (cubes so width same as height)
+Return true if they have intersected on both x and y axis
+*/
+function hit(ob1, w1, ob2, w2) {
+  const hitX = ((ob1.position.x + w1/2) >= (ob2.position.x - w2/2)
+  && (ob1.position.x - w1/2) <= (ob2.position.x + w2/2));
+  const hitY = ((ob1.position.y - w1/2) <= (ob2.position.y + w2/2)
+  && (ob1.position.y + w1/2) >= (ob2.position.y - w2/2));
+  return hitX && hitY;
+}
+
+// Animate game loop 
+function animate() {
+  requestAnimationFrame(animate);
+  renderer.render(scene, camera);
+
+  // Add new falling block based on spawnrate
+  if (frames % spawnRate == 0) {
+    const blockGeometry = new THREE.BoxGeometry(2,2,2);
+    const blockMaterial = new THREE.MeshStandardMaterial({ color: 0xFF2D00 });
+    const block = new THREE.Mesh(blockGeometry, blockMaterial);
+    block.position.y += 25;
+    block.position.x += Math.random() * (-40 - 40) + 40;
+    scene.add(block);
+    blocks.push(block);
+  }
+
+  // Increase spawn rate and block speed as game goes on
+  if (frames % 200 == 0) {
+    if (spawnRate >= 30) spawnRate -= 5; // increase spawn rate
+    blockSpeed += 0.01; // increase block speed
+  }
+
+  // Move player
+  if (keys.left.pressed) {
+    player.position.x -= 0.2;
+    player.rotation.y += 0.05;
+  }
+  if (keys.right.pressed) {
+    player.position.x += 0.2;
+    player.rotation.y -= 0.05;
+  }
+  if (keys.up.pressed) {
+    player.position.y += 0.2;
+    player.rotation.x -= 0.05;
+  }
+  if (keys.down.pressed) {
+    player.position.y -= 0.2;
+    player.rotation.x += 0.05;
+  }
+
+  // Move falling blocks and check if they have hit player
+  blocks.forEach((block) => {
+    block.position.y -= blockSpeed;
+    block.rotation.x += 0.02;
+    block.rotation.y += 0.02;
+    if (hit(player, 2.5, block, 1)) {
+      location.replace("/gameover");
+    }
+  });
+
+  // increase frames
+  frames++;
+}
+
+animate();