a4-ryan-kornitsky

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.DS_Store

README.md

@@ -1,61 +1,27 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
+# 3D Cube Dash Game
 
-Due: October 2nd, by 11:59 AM.
+## Ryan Kornitsky
 
-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.
+<br>
 
-[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)  
+This is a simple 3D game created using Three.js where you control a cube to avoid obstacles and collect points.
 
-Baseline Requirements
----
+## Play the Game
+You can play the game by clicking [here](https://fluorescent-meteor-albertosaurus.glitch.me/).
 
-Your application is required to implement the following functionalities:
+## Features
+- 3D graphics using Three.js.
+- Interactive gameplay with user controls.
+- Score tracking.
+- Randomly generated obstacles.
 
-- 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.
+## Challenges Faced
+- Implementing 3D graphics and interactions using Three.js.
+- Managing user input for cube movement.
+- Handling collision detection with obstacles.
 
-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.
+## Instructions
+1. Use the WASD or Arrow keys to control the cube.
+2. Avoid the red obstacles.
+3. Collect as many points as possible.
+4. Your score is displayed on the top-left corner of the screen.

app.js

@@ -0,0 +1,147 @@
+import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.min.js';
+
+document.body.style.margin = '0';
+document.body.style.overflow = 'hidden';
+document.body.style.backgroundColor = 'black';
+
+const scene = new THREE.Scene();
+
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 1, 5);
+
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const geometry = new THREE.BoxGeometry();
+const material = new THREE.MeshBasicMaterial({ color: getRandomColor() });
+const cube = new THREE.Mesh(geometry, material);
+scene.add(cube);
+
+const cubeSpeed = 0.1;
+const cubeBounds = { minX: -5, maxX: 5 };
+
+const keyState = {};
+
+document.addEventListener('keydown', (event) => {
+  keyState[event.key] = true;
+});
+
+document.addEventListener('keyup', (event) => {
+  keyState[event.key] = false;
+});
+
+let score = 0;
+const obstacles = [];
+const obstacleGeometry = new THREE.BoxGeometry();
+const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+
+function createObstacle() {
+  const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
+  obstacle.position.x = Math.random() * 10 - 5;
+  obstacle.position.z = -10;
+  scene.add(obstacle);
+  obstacles.push(obstacle);
+}
+
+const instructionsPanel = document.createElement('div');
+instructionsPanel.style.position = 'absolute';
+instructionsPanel.style.top = '50%';
+instructionsPanel.style.left = '50%';
+instructionsPanel.style.transform = 'translate(-50%, -50%)';
+instructionsPanel.style.color = 'white';
+instructionsPanel.style.fontFamily = 'Arial';
+instructionsPanel.style.fontSize = '36px';
+instructionsPanel.innerHTML = 'Welcome to Cube Dash. Try to avoid as many obstacles as possible. Press WASD or Arrow keys to move. Click this text to start.';
+document.body.appendChild(instructionsPanel);
+
+let gameCanBePlayed = false;
+
+instructionsPanel.addEventListener('click', () => {
+  document.body.removeChild(instructionsPanel);
+  gameCanBePlayed = true;
+  gameLoop();
+});
+
+const scoreElement = document.createElement('div');
+scoreElement.style.position = 'absolute';
+scoreElement.style.top = '10px';
+scoreElement.style.left = '10px';
+scoreElement.style.color = 'white';
+scoreElement.style.fontFamily = 'Arial';
+scoreElement.style.fontSize = '24px';
+document.body.appendChild(scoreElement);
+
+const gameLoop = () => {
+  if (!gameCanBePlayed) {
+    return;
+  }
+
+  requestAnimationFrame(gameLoop);
+
+  renderer.clear();
+
+  if (keyState['w'] || keyState['ArrowUp']) {
+    if (cube.position.z - cubeSpeed >= -10) {
+      cube.position.z -= cubeSpeed;
+    }
+  }
+  if (keyState['s'] || keyState['ArrowDown']) {
+    if (cube.position.z + cubeSpeed <= 10) {
+      cube.position.z += cubeSpeed;
+    }
+  }
+  if (keyState['a'] || keyState['ArrowLeft']) {
+    if (cube.position.x - cubeSpeed >= cubeBounds.minX) {
+      cube.position.x -= cubeSpeed;
+    }
+  }
+  if (keyState['d'] || keyState['ArrowRight']) {
+    if (cube.position.x + cubeSpeed <= cubeBounds.maxX) {
+      cube.position.x += cubeSpeed;
+    }
+  }
+
+  camera.position.x = cube.position.x;
+  camera.position.z = cube.position.z + 5;
+  camera.lookAt(cube.position);
+
+  obstacles.forEach((obstacle) => {
+    obstacle.position.z += 0.05;
+    if (cube.position.distanceTo(obstacle.position) < 0.5) {
+      alert(`Game Over! Your Score: ${score}`);
+      resetGame();
+    }
+    if (obstacle.position.z > 5) {
+      score++;
+      scene.remove(obstacle);
+      obstacles.shift();
+    }
+  });
+
+  if (Math.random() < 0.02) {
+    createObstacle();
+  }
+
+  scoreElement.textContent = `Score: ${score}`;
+
+  renderer.render(scene, camera);
+};
+
+function resetGame() {
+  score = 0;
+  cube.position.set(0, 0, 0);
+  camera.position.set(0, 1, 5);
+  camera.rotation.set(0, 0, 0);
+  obstacles.forEach((obstacle) => scene.remove(obstacle));
+  obstacles.length = 0;
+}
+
+function getRandomColor() {
+  const colors = [
+    0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 
+    0xff6600, 0x9900cc, 0x66ff33, 0x0099cc, 0xcc0099
+  ];
+  const randomIndex = Math.floor(Math.random() * colors.length);
+  return colors[randomIndex];
+}

index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Simple 3D Game</title>
+</head>
+<body>
+  <script type="module" src="app.js"></script>
+</body>
+</html>