From e6a09758e5ded7cd0014d03fe38072dde30bb7ea Mon Sep 17 00:00:00 2001
From: Ketan_Sharma <146920220+ketan270@users.noreply.github.com>
Date: Thu, 11 Apr 2024 11:21:32 +0530
Subject: [PATCH] Delete src directory
---
src/index.html | 16 --
src/script.ts | 457 -------------------------------------------------
src/style.scss | 167 ------------------
3 files changed, 640 deletions(-)
delete mode 100644 src/index.html
delete mode 100644 src/script.ts
delete mode 100644 src/style.scss
diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index 0fe6067..0000000
--- a/src/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
0
-
Click (or press the spacebar) to place the block
-
-
Game Over
-
You did great, you're the best.
-
Click or spacebar to start again
-
-
-
diff --git a/src/script.ts b/src/script.ts
deleted file mode 100644
index e958c63..0000000
--- a/src/script.ts
+++ /dev/null
@@ -1,457 +0,0 @@
-console.clear();
-
-interface BlockReturn
-{
- placed?:any;
- chopped?:any;
- plane: 'x' | 'y' | 'z';
- direction: number;
- bonus?: boolean;
-}
-
-class Stage
-{
- private container: any;
- private camera: any;
- private scene: any;
- private renderer: any;
- private light: any;
- private softLight: any;
- private group: any;
-
- constructor()
- {
- // container
-
- this.container = document.getElementById('game');
-
- // renderer
-
- this.renderer = new THREE.WebGLRenderer({
- antialias: true,
- alpha: false
- });
-
- this.renderer.setSize(window.innerWidth, window.innerHeight);
- this.renderer.setClearColor('#D0CBC7', 1);
- this.container.appendChild( this.renderer.domElement );
-
- // scene
-
- this.scene = new THREE.Scene();
-
- // camera
-
- let aspect = window.innerWidth / window.innerHeight;
- let d = 20;
- this.camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, -100, 1000);
- this.camera.position.x = 2;
- this.camera.position.y = 2;
- this.camera.position.z = 2;
- this.camera.lookAt(new THREE.Vector3(0, 0, 0));
-
- //light
-
- this.light = new THREE.DirectionalLight(0xffffff, 0.5);
- this.light.position.set(0, 499, 0);
- this.scene.add(this.light);
-
- this.softLight = new THREE.AmbientLight( 0xffffff, 0.4 );
- this.scene.add(this.softLight)
-
- window.addEventListener('resize', () => this.onResize());
- this.onResize();
- }
-
- setCamera(y:number, speed:number = 0.3)
- {
- TweenLite.to(this.camera.position, speed, {y: y + 4, ease: Power1.easeInOut});
- TweenLite.to(this.camera.lookAt, speed, {y: y, ease: Power1.easeInOut});
- }
-
- onResize()
- {
- let viewSize = 30;
- this.renderer.setSize(window.innerWidth, window.innerHeight);
- this.camera.left = window.innerWidth / - viewSize;
- this.camera.right = window.innerWidth / viewSize;
- this.camera.top = window.innerHeight / viewSize;
- this.camera.bottom = window.innerHeight / - viewSize;
- this.camera.updateProjectionMatrix();
- }
-
- render = function()
- {
- this.renderer.render(this.scene, this.camera);
- }
-
- add = function(elem)
- {
- this.scene.add(elem);
- }
-
- remove = function(elem)
- {
- this.scene.remove(elem);
- }
-}
-
-class Block
-{
- const STATES = {ACTIVE: 'active', STOPPED: 'stopped', MISSED: 'missed'};
- const MOVE_AMOUNT = 12;
-
- dimension = { width: 0, height: 0, depth: 0}
- position = {x: 0, y: 0, z: 0};
-
- mesh:any;
- state:string;
- index:number;
- speed:number;
- direction:number;
- colorOffset:number;
- color:number;
- material:any;
-
- workingPlane:string;
- workingDimension:string;
-
- targetBlock:Block;
-
- constructor(block:Block)
- {
- // set size and position
-
- this.targetBlock = block;
-
- this.index = (this.targetBlock ? this.targetBlock.index : 0) + 1;
- this.workingPlane = this.index % 2 ? 'x' : 'z';
- this.workingDimension = this.index % 2 ? 'width' : 'depth';
-
- // set the dimensions from the target block, or defaults.
-
- this.dimension.width = this.targetBlock ? this.targetBlock.dimension.width : 10;
- this.dimension.height = this.targetBlock ? this.targetBlock.dimension.height : 2;
- this.dimension.depth = this.targetBlock ? this.targetBlock.dimension.depth : 10;
-
- this.position.x = this.targetBlock ? this.targetBlock.position.x : 0;
- this.position.y = this.dimension.height * this.index;
- this.position.z = this.targetBlock ? this.targetBlock.position.z : 0;
-
- this.colorOffset = this.targetBlock ? this.targetBlock.colorOffset : Math.round(Math.random() * 100);
-
- // set color
- if(!this.targetBlock)
- {
- this.color = 0x333344;
- }
- else
- {
- let offset = this.index + this.colorOffset;
- var r = Math.sin(0.3 * offset) * 55 + 200;
- var g = Math.sin(0.3 * offset + 2) * 55 + 200;
- var b = Math.sin(0.3 * offset + 4) * 55 + 200;
- this.color = new THREE.Color( r / 255, g / 255, b / 255 );
- }
-
- // state
-
- this.state = this.index > 1 ? this.STATES.ACTIVE : this.STATES.STOPPED;
-
- // set direction
-
- this.speed = -0.1 - (this.index * 0.005);
- if(this.speed < -4) this.speed = -4;
- this.direction = this.speed;
-
- // create block
-
- let geometry = new THREE.BoxGeometry( this.dimension.width, this.dimension.height, this.dimension.depth);
- geometry.applyMatrix( new THREE.Matrix4().makeTranslation(this.dimension.width/2, this.dimension.height/2, this.dimension.depth/2) );
- this.material = new THREE.MeshToonMaterial( {color: this.color, shading: THREE.FlatShading} );
- this.mesh = new THREE.Mesh( geometry, this.material );
- this.mesh.position.set(this.position.x, this.position.y + (this.state == this.STATES.ACTIVE ? 0 : 0), this.position.z);
-
- if(this.state == this.STATES.ACTIVE)
- {
- this.position[this.workingPlane] = Math.random() > 0.5 ? -this.MOVE_AMOUNT : this.MOVE_AMOUNT;
- }
- }
-
- reverseDirection()
- {
- this.direction = this.direction > 0 ? this.speed : Math.abs(this.speed);
- }
-
- place():BlockReturn
- {
- this.state = this.STATES.STOPPED;
-
- let overlap = this.targetBlock.dimension[this.workingDimension] - Math.abs(this.position[this.workingPlane] - this.targetBlock.position[this.workingPlane]);
-
- let blocksToReturn:BlockReturn = {
- plane: this.workingPlane,
- direction: this.direction
- };
-
- if(this.dimension[this.workingDimension] - overlap < 0.3)
- {
- overlap = this.dimension[this.workingDimension];
- blocksToReturn.bonus = true;
- this.position.x = this.targetBlock.position.x;
- this.position.z = this.targetBlock.position.z;
- this.dimension.width = this.targetBlock.dimension.width;
- this.dimension.depth = this.targetBlock.dimension.depth;
- }
-
- if(overlap > 0)
- {
- let choppedDimensions = { width: this.dimension.width, height: this.dimension.height, depth: this.dimension.depth };
- choppedDimensions[this.workingDimension] -= overlap;
- this.dimension[this.workingDimension] = overlap;
-
- let placedGeometry = new THREE.BoxGeometry( this.dimension.width, this.dimension.height, this.dimension.depth);
- placedGeometry.applyMatrix( new THREE.Matrix4().makeTranslation(this.dimension.width/2, this.dimension.height/2, this.dimension.depth/2) );
- let placedMesh = new THREE.Mesh( placedGeometry, this.material );
-
- let choppedGeometry = new THREE.BoxGeometry( choppedDimensions.width, choppedDimensions.height, choppedDimensions.depth);
- choppedGeometry.applyMatrix( new THREE.Matrix4().makeTranslation(choppedDimensions.width/2, choppedDimensions.height/2, choppedDimensions.depth/2) );
- let choppedMesh = new THREE.Mesh( choppedGeometry, this.material );
-
- let choppedPosition = {
- x: this.position.x,
- y: this.position.y,
- z: this.position.z
- }
-
- if(this.position[this.workingPlane] < this.targetBlock.position[this.workingPlane])
- {
- this.position[this.workingPlane] = this.targetBlock.position[this.workingPlane]
- }
- else
- {
- choppedPosition[this.workingPlane] += overlap;
- }
-
- placedMesh.position.set(this.position.x, this.position.y, this.position.z);
- choppedMesh.position.set(choppedPosition.x, choppedPosition.y, choppedPosition.z);
-
- blocksToReturn.placed = placedMesh;
- if(!blocksToReturn.bonus) blocksToReturn.chopped = choppedMesh;
- }
- else
- {
- this.state = this.STATES.MISSED;
- }
-
- this.dimension[this.workingDimension] = overlap;
-
- return blocksToReturn;
- }
-
- tick()
- {
- if(this.state == this.STATES.ACTIVE)
- {
- let value = this.position[this.workingPlane];
- if(value > this.MOVE_AMOUNT || value < -this.MOVE_AMOUNT) this.reverseDirection();
- this.position[this.workingPlane] += this.direction;
- this.mesh.position[this.workingPlane] = this.position[this.workingPlane];
- }
- }
-}
-
-class Game
-{
- const STATES = {
- 'LOADING': 'loading',
- 'PLAYING': 'playing',
- 'READY': 'ready',
- 'ENDED': 'ended',
- 'RESETTING': 'resetting'
- }
- blocks:Block[] = [];
- state:string = this.STATES.LOADING;
-
- // groups
-
- newBlocks:any;
- placedBlocks:any;
- choppedBlocks:any;
-
- // UI elements
-
- scoreContainer:any;
- mainContainer:any;
- startButton:any;
- instructions:any;
-
- constructor()
- {
- this.stage = new Stage();
-
- this.mainContainer = document.getElementById('container');
- this.scoreContainer = document.getElementById('score');
- this.startButton = document.getElementById('start-button');
- this.instructions = document.getElementById('instructions');
- this.scoreContainer.innerHTML = '0';
-
- this.newBlocks = new THREE.Group();
- this.placedBlocks = new THREE.Group();
- this.choppedBlocks = new THREE.Group();
-
- this.stage.add(this.newBlocks);
- this.stage.add(this.placedBlocks);
- this.stage.add(this.choppedBlocks);
-
- this.addBlock();
- this.tick();
-
- this.updateState(this.STATES.READY);
-
- document.addEventListener('keydown', e =>
- {
- if(e.keyCode == 32) this.onAction()
- });
-
- document.addEventListener('click', e =>
- {
- this.onAction();
- });
-
- document.addEventListener('touchstart', e =>
- {
- e.preventDefault();
- // this.onAction();
-
- // ☝️ this triggers after click on android so you
- // insta-lose, will figure it out later.
- });
- }
-
- updateState(newState)
- {
- for(let key in this.STATES) this.mainContainer.classList.remove(this.STATES[key]);
- this.mainContainer.classList.add(newState);
- this.state = newState;
- }
-
- onAction()
- {
- switch(this.state)
- {
- case this.STATES.READY:
- this.startGame();
- break;
- case this.STATES.PLAYING:
- this.placeBlock();
- break;
- case this.STATES.ENDED:
- this.restartGame();
- break;
- }
- }
-
- startGame()
- {
- if(this.state != this.STATES.PLAYING)
- {
- this.scoreContainer.innerHTML = '0';
- this.updateState(this.STATES.PLAYING);
- this.addBlock();
- }
- }
-
- restartGame()
- {
- this.updateState(this.STATES.RESETTING);
-
- let oldBlocks = this.placedBlocks.children;
- let removeSpeed = 0.2;
- let delayAmount = 0.02;
- for(let i = 0; i < oldBlocks.length; i++)
- {
- TweenLite.to(oldBlocks[i].scale, removeSpeed, {x: 0, y: 0, z: 0, delay: (oldBlocks.length - i) * delayAmount, ease: Power1.easeIn, onComplete: () => this.placedBlocks.remove(oldBlocks[i])})
- TweenLite.to(oldBlocks[i].rotation, removeSpeed, {y: 0.5, delay: (oldBlocks.length - i) * delayAmount, ease: Power1.easeIn})
- }
- let cameraMoveSpeed = removeSpeed * 2 + (oldBlocks.length * delayAmount);
- this.stage.setCamera(2, cameraMoveSpeed);
-
- let countdown = {value: this.blocks.length - 1};
- TweenLite.to(countdown, cameraMoveSpeed, {value: 0, onUpdate: () => {this.scoreContainer.innerHTML = String(Math.round(countdown.value))}})
-
- this.blocks = this.blocks.slice(0, 1);
-
- setTimeout(() => {
- this.startGame();
- }, cameraMoveSpeed * 1000)
-
- }
-
- placeBlock()
- {
- let currentBlock = this.blocks[this.blocks.length - 1];
- let newBlocks:BlockReturn = currentBlock.place();
- this.newBlocks.remove(currentBlock.mesh);
- if(newBlocks.placed) this.placedBlocks.add(newBlocks.placed);
- if(newBlocks.chopped)
- {
- this.choppedBlocks.add(newBlocks.chopped);
- let positionParams = {y: '-=30', ease: Power1.easeIn, onComplete: () => this.choppedBlocks.remove(newBlocks.chopped)}
- let rotateRandomness = 10;
- let rotationParams = {
- delay: 0.05,
- x: newBlocks.plane == 'z' ? ((Math.random() * rotateRandomness) - (rotateRandomness/2)) : 0.1,
- z: newBlocks.plane == 'x' ? ((Math.random() * rotateRandomness) - (rotateRandomness/2)) : 0.1,
- y: Math.random() * 0.1,
- };
- if(newBlocks.chopped.position[newBlocks.plane] > newBlocks.placed.position[newBlocks.plane])
- {
- positionParams[newBlocks.plane] = '+=' + (40 * Math.abs(newBlocks.direction));
- }
- else
- {
- positionParams[newBlocks.plane] = '-=' + (40 * Math.abs(newBlocks.direction));
- }
- TweenLite.to(newBlocks.chopped.position, 1, positionParams);
- TweenLite.to(newBlocks.chopped.rotation, 1, rotationParams);
-
- }
-
- this.addBlock();
- }
-
- addBlock()
- {
- let lastBlock = this.blocks[this.blocks.length - 1];
-
- if(lastBlock && lastBlock.state == lastBlock.STATES.MISSED)
- {
- return this.endGame();
- }
-
- this.scoreContainer.innerHTML = String(this.blocks.length - 1);
-
- let newKidOnTheBlock = new Block(lastBlock);
- this.newBlocks.add(newKidOnTheBlock.mesh);
- this.blocks.push(newKidOnTheBlock);
-
- this.stage.setCamera(this.blocks.length * 2);
-
- if(this.blocks.length >= 5) this.instructions.classList.add('hide');
- }
-
- endGame()
- {
- this.updateState(this.STATES.ENDED);
- }
-
- tick()
- {
- this.blocks[this.blocks.length - 1].tick();
- this.stage.render();
- requestAnimationFrame(() => {this.tick()});
- }
-}
-
-let game = new Game();
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
deleted file mode 100644
index d2d8991..0000000
--- a/src/style.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Comfortaa');
-
-$color-dark: #333344;
-
-html, body
-{
- margin: 0;
- overflow: hidden;
- height: 100%;
- width: 100%;
- position: relative;
- font-family: 'Comfortaa', cursive;
-}
-
-#container
-{
- width: 100%;
- height: 100%;
-
- #score
- {
- position: absolute;
- top: 20px;
- width: 100%;
- text-align: center;
- font-size: 10vh;
- transition: transform 0.5s ease;
- color: $color-dark;
- transform: translatey(-200px) scale(1);
- }
-
- #game
- {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
-
- .game-over
- {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 85%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- *
- {
- transition: opacity 0.5s ease, transform 0.5s ease;
- opacity: 0;
- transform: translatey(-50px);
- color: $color-dark;
- }
-
- h2
- {
- margin: 0;
- padding: 0;
- font-size: 40px;
- }
- }
-
- .game-ready
- {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
-
- #start-button
- {
- transition: opacity 0.5s ease, transform 0.5s ease;
- opacity: 0;
- transform: translatey(-50px);
-
- border: 3px solid $color-dark;
- padding: 10px 20px;
- background-color: transparent;
- color: $color-dark;
- font-size: 30px;
- }
- }
-
- #instructions
- {
- position: absolute;
- width: 100%;
- top: 16vh;
- left: 0;
- text-align: center;
- transition: opacity 0.5s ease, transform 0.5s ease;
-
- opacity: 0;
-
- &.hide
- {
- opacity: 0 !important;
- }
- }
-
- &.playing, &.resetting
- {
- #score
- {
- transform: translatey(0px) scale(1);
- }
- }
-
- &.playing
- {
- #instructions
- {
- opacity: 1;
- }
- }
-
- &.ready
- {
-
-
- .game-ready
- {
- #start-button
- {
- opacity: 1;
- transform: translatey(0);
- }
- }
- }
-
- &.ended
- {
- #score
- {
- transform: translatey(6vh) scale(1.5);
- }
-
- .game-over
- {
- *
- {
- opacity: 1;
- transform: translatey(0);
- }
-
- p
- {
- transition-delay: 0.3s;
- }
- }
- }
-}
-
-
-
-