From 5eae2308102d5dbc5d5fefbd491143f69489f4cf Mon Sep 17 00:00:00 2001 From: david Date: Sun, 8 Oct 2023 13:36:17 +0200 Subject: [PATCH] Randomized color scheme each game --- js/script.js | 16 ++++++++-------- js/script.min.js | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/js/script.js b/js/script.js index 360fab2..94364f2 100644 --- a/js/script.js +++ b/js/script.js @@ -1,8 +1,4 @@ -// DEFINE STACK COLOR -const colorDesign = [ - [200, 80, 60], - [30, 70, 50], -]; + // GAME DETAILS let GAME_ = { status: false, @@ -12,11 +8,15 @@ let GAME_ = { combo: 0, bestResult: (window.localStorage.getItem('bestResult')) ? window.localStorage.getItem('bestResult') : 0, newRecord: false, // TO RESET SCREEN - designPalette: Math.floor(Math.random()*(colorDesign.length)) + designPalette: 0 } // ================================== - +// DEFINE STACK COLOR +const colorDesign = [ + [200, 80, 60], + [30, 70, 50], +]; // DEFINE BOX SIZE const boxSize = { @@ -138,7 +138,7 @@ window.addEventListener('load', ()=>{ // RESET COLISION WORLD AND SCENE function reset(){ - // GAME_.designPalette = Math.floor(Math.random() * colorDesign.length); + GAME_.designPalette = Math.floor(Math.random() * colorDesign.length); // CAMERA camera.position.set(4, 4, 4); diff --git a/js/script.min.js b/js/script.min.js index d1ee37d..a75aea8 100644 --- a/js/script.min.js +++ b/js/script.min.js @@ -1 +1 @@ -const colorDesign=[[200,80,60],[30,70,50],];let GAME_={status:!1,end:!1,active:!1,score:0,combo:0,bestResult:window.localStorage.getItem("bestResult")?window.localStorage.getItem("bestResult"):0,newRecord:!1,designPalette:Math.floor(Math.random()*colorDesign.length)};const boxSize={x:3,y:1,z:3,range:10},c_width=10,cameraPos={width:10,height:10*(window.innerHeight/window.innerWidth),near:1,far:100,size:window.innerWidth>700?1:2};let world,scene,camera,renderer,stackBoxArr=[],outBoxArr=[];function playConfetti(e,t){party.confetti(party.Rect.fromScreen(),{count:party.variation.range(e||60,t||80)})}function playBot(e,t,o=!0){setInterval(()=>{let t=stackBoxArr[stackBoxArr.length-1],s=stackBoxArr[stackBoxArr.length-2],r=t.direction,n=t.threejs.position[r]-s.threejs.position[r],i="x"===r?t.width:t.depth,a=(i-Math.abs(n))/i;a>=(e||.9)&&(document.body.click(),o&&console.log(a))},t||20)}window.addEventListener("load",()=>{let e=document.querySelector(".result-area"),t=document.querySelector(".point-result"),o=document.querySelector(".score-tab"),s=document.querySelector(".combo-strike"),r=document.querySelector(".combo-extra-point");function n(e){scene.background=new THREE.Color(h(colorDesign[GAME_.designPalette][0]+120+stackBoxArr.length,colorDesign[GAME_.designPalette][1],colorDesign[GAME_.designPalette][2]))}function i(e){t.innerHTML=e}function a(e,t,o,s){let r=boxSize.y*(stackBoxArr.length-1),n=d(e,r,t,o,s,!0);outBoxArr.push(n)}function c(){world.step(1/60),outBoxArr.forEach(e=>{e.threejs.position.copy(e.cannonjs.position),e.threejs.quaternion.copy(e.cannonjs.quaternion)})}function l(e,t,o,s,r){let n=boxSize.y*stackBoxArr.length,i=d(e,n,t,o,s,!1);i.direction=r,i.positive=!0,stackBoxArr.push(i)}function d(e,t,o,s,r,n=!1){let i=n?(stackBoxArr.length-1)*4:4*stackBoxArr.length,a=new THREE.Color(h(colorDesign[GAME_.designPalette][0]+i,colorDesign[GAME_.designPalette][1],colorDesign[GAME_.designPalette][2])),c=new THREE.BoxGeometry(s,boxSize.y,r),l=new THREE.MeshLambertMaterial({color:a}),d=new THREE.Mesh(c,l);d.position.set(e,t,o);let $=new CANNON.Box(new CANNON.Vec3(s/2,boxSize.y/2,r/2)),x=new CANNON.Body({mass:n?5:0,shape:$});return x.position.set(e,t,o),world.addBody(x),scene.add(d),{threejs:d,geometry:c,material:l,cannonjs:x,x:e,y:t,z:o,width:s,depth:r}}function h(e,t,o){o=o>101?100:o,o/=100;let s=t*Math.min(o,1-o)/100,r=t=>{let r=(t+e/30)%12,n=o-s*Math.max(Math.min(r-3,9-r,1),-1);return Math.round(255*n).toString(16).padStart(2,"0")};return`#${r(0)}${r(8)}${r(4)}`}function $(){camera.position.set(4,4,4),camera.lookAt(0,0,0),stackBoxArr.forEach(e=>{scene.remove(e.threejs),e.geometry.dispose(),e.material.dispose(),world.removeBody(e.cannonjs)}),outBoxArr.forEach(e=>{scene.remove(e.threejs),e.geometry.dispose(),e.material.dispose(),world.removeBody(e.cannonjs)}),stackBoxArr=[],outBoxArr=[],GAME_.score=0,GAME_.combo=0,n(),l(0,0,boxSize.x,boxSize.z,"x")}(world=new CANNON.World).gravity.set(0,-9.8,0),world.broadphase=new CANNON.NaiveBroadphase,world.solver.interations=40,i(GAME_.bestResult),scene=new THREE.Scene,n(),l(0,0,boxSize.x,boxSize.z,"x");let x=new THREE.AmbientLight(16777215,.6);scene.add(x);let p=new THREE.DirectionalLight(16777215,.6);p.position.set(10,20,0),scene.add(p),(camera=new THREE.OrthographicCamera(-(cameraPos.width/cameraPos.size),cameraPos.width/cameraPos.size,cameraPos.height/cameraPos.size,-(cameraPos.height/cameraPos.size),cameraPos.near,cameraPos.far)).position.set(4,4,4),camera.lookAt(0,0,0),(renderer=new THREE.WebGLRenderer({antialias:!0})).setSize(window.innerWidth,window.innerHeight),renderer.render(scene,camera),document.body.appendChild(renderer.domElement);let A=()=>{if(GAME_.status){let c,d,h=stackBoxArr[stackBoxArr.length-1],x=stackBoxArr[stackBoxArr.length-2],p=h.direction,A=h.threejs.position[p]-x.threejs.position[p],m=Math.abs(A),u="x"===p?h.width:h.depth,w=u-m;if(w>0){let _=w/u;_>=.9?([9,19,29,39,49].includes(GAME_.combo)&&(r.classList.add("active"),setTimeout(()=>{r.classList.remove("active")},1100),GAME_.score+=10),GAME_.combo+=1,s.innerHTML=`x${GAME_.combo}`,s.classList.add("open"),setTimeout(()=>{s.classList.remove("open")},700)):GAME_.combo&&(GAME_.combo=0),c="x"===p?w:h.width,d="z"===p?w:h.depth,h.width=c,h.depth=d,h.threejs.scale[p]=_,h.threejs.position[p]-=A/2,h.cannonjs.position[p]-=A/2;let y=new CANNON.Box(new CANNON.Vec3(c/2,boxSize.y/2,d/2));h.cannonjs.shapes=[],h.cannonjs.addShape(y);let b=Math.sign(A)*(w/2+m/2),B={x:"x"===p?h.threejs.position.x+b:h.threejs.position.x,z:"z"===p?h.threejs.position.z+b:h.threejs.position.z,width:"x"===p?m:c,depth:"z"===p?m:d};a(B.x,B.z,B.width,B.depth);let E="x"===p?h.threejs.position.x:-(boxSize.range-1),k;l(E,"z"===p?h.threejs.position.z:-(boxSize.range-1),c,d,"x"===p?"z":"x"),GAME_.score++,n(),i(GAME_.score)}else{GAME_.end=!0,world.remove(h.cannonjs);let M=new CANNON.Box(new CANNON.Vec3(h.width/2,boxSize.y/2,h.depth/2)),f=5,z=new CANNON.Body({mass:f,shape:M});z.position.set(h.threejs.position.x,h.threejs.position.y,h.threejs.position.z),world.addBody(z),h.cannonjs=z,e.classList.toggle("disable"),t.classList.toggle("active"),GAME_.status=!1,GAME_.score>GAME_.bestResult&&(playConfetti(),GAME_.bestResult=GAME_.score,window.localStorage.setItem("bestResult",GAME_.score),o.classList.add("new"),GAME_.newRecord=!0),enableDownload&&document.querySelector("#pwa-install").classList.add("display")}}else GAME_.active?$():(renderer.setAnimationLoop(g),GAME_.active=!0),i(GAME_.score),l(0,0,boxSize.x,boxSize.z,"z"),e.classList.toggle("disable"),t.classList.toggle("active"),document.querySelector("#pwa-install").classList.remove("display"),GAME_.newRecord&&(GAME_.newRecord=!1,o.classList.remove("new")),GAME_.status=!0,GAME_.end=!1};function g(){if(GAME_.end)stackBoxArr[stackBoxArr.length-1].threejs.position.copy(stackBoxArr[stackBoxArr.length-1].cannonjs.position),stackBoxArr[stackBoxArr.length-1].threejs.quaternion.copy(stackBoxArr[stackBoxArr.length-1].cannonjs.quaternion);else{let e=stackBoxArr[stackBoxArr.length-1],t=e.positive?.15:-.15;e.threejs.position[e.direction]>=boxSize.range-5&&(e.positive=!1),e.threejs.position[e.direction]<=-(boxSize.range-5)&&(e.positive=!0),e.threejs.position[e.direction]+=t,e.cannonjs.position[e.direction]+=t,camera.position.y{e.target.className.split(" ").some(e=>/pwa-.*/.test(e))||(e.preventDefault(),A())});let u=!0;window.addEventListener("keydown",function(e){(32===e.keyCode||40===e.keyCode||" "===e.key)&&(e.preventDefault(),u&&(u=!1,A()))}),window.addEventListener("keyup",function(e){(32===e.keyCode||40===e.keyCode||" "===e.key)&&(u=!0)})}); \ No newline at end of file +let GAME_={status:!1,end:!1,active:!1,score:0,combo:0,bestResult:window.localStorage.getItem("bestResult")?window.localStorage.getItem("bestResult"):0,newRecord:!1,designPalette:0};const colorDesign=[[200,80,60],[30,70,50],],boxSize={x:3,y:1,z:3,range:10},c_width=10,cameraPos={width:10,height:10*(window.innerHeight/window.innerWidth),near:1,far:100,size:window.innerWidth>700?1:2};let world,scene,camera,renderer,stackBoxArr=[],outBoxArr=[];function playConfetti(e,t){party.confetti(party.Rect.fromScreen(),{count:party.variation.range(e||60,t||80)})}function playBot(e,t,o=!0){setInterval(()=>{let t=stackBoxArr[stackBoxArr.length-1],s=stackBoxArr[stackBoxArr.length-2],r=t.direction,n=t.threejs.position[r]-s.threejs.position[r],i="x"===r?t.width:t.depth,a=(i-Math.abs(n))/i;a>=(e||.9)&&(document.body.click(),o&&console.log(a))},t||20)}window.addEventListener("load",()=>{let e=document.querySelector(".result-area"),t=document.querySelector(".point-result"),o=document.querySelector(".score-tab"),s=document.querySelector(".combo-strike"),r=document.querySelector(".combo-extra-point");function n(e){scene.background=new THREE.Color(h(colorDesign[GAME_.designPalette][0]+120+stackBoxArr.length,colorDesign[GAME_.designPalette][1],colorDesign[GAME_.designPalette][2]))}function i(e){t.innerHTML=e}function a(e,t,o,s){let r=boxSize.y*(stackBoxArr.length-1),n=d(e,r,t,o,s,!0);outBoxArr.push(n)}function c(){world.step(1/60),outBoxArr.forEach(e=>{e.threejs.position.copy(e.cannonjs.position),e.threejs.quaternion.copy(e.cannonjs.quaternion)})}function l(e,t,o,s,r){let n=boxSize.y*stackBoxArr.length,i=d(e,n,t,o,s,!1);i.direction=r,i.positive=!0,stackBoxArr.push(i)}function d(e,t,o,s,r,n=!1){let i=n?(stackBoxArr.length-1)*4:4*stackBoxArr.length,a=new THREE.Color(h(colorDesign[GAME_.designPalette][0]+i,colorDesign[GAME_.designPalette][1],colorDesign[GAME_.designPalette][2])),c=new THREE.BoxGeometry(s,boxSize.y,r),l=new THREE.MeshLambertMaterial({color:a}),d=new THREE.Mesh(c,l);d.position.set(e,t,o);let $=new CANNON.Box(new CANNON.Vec3(s/2,boxSize.y/2,r/2)),x=new CANNON.Body({mass:n?5:0,shape:$});return x.position.set(e,t,o),world.addBody(x),scene.add(d),{threejs:d,geometry:c,material:l,cannonjs:x,x:e,y:t,z:o,width:s,depth:r}}function h(e,t,o){o=o>101?100:o,o/=100;let s=t*Math.min(o,1-o)/100,r=t=>{let r=(t+e/30)%12,n=o-s*Math.max(Math.min(r-3,9-r,1),-1);return Math.round(255*n).toString(16).padStart(2,"0")};return`#${r(0)}${r(8)}${r(4)}`}function $(){GAME_.designPalette=Math.floor(Math.random()*colorDesign.length),camera.position.set(4,4,4),camera.lookAt(0,0,0),stackBoxArr.forEach(e=>{scene.remove(e.threejs),e.geometry.dispose(),e.material.dispose(),world.removeBody(e.cannonjs)}),outBoxArr.forEach(e=>{scene.remove(e.threejs),e.geometry.dispose(),e.material.dispose(),world.removeBody(e.cannonjs)}),stackBoxArr=[],outBoxArr=[],GAME_.score=0,GAME_.combo=0,n(),l(0,0,boxSize.x,boxSize.z,"x")}(world=new CANNON.World).gravity.set(0,-9.8,0),world.broadphase=new CANNON.NaiveBroadphase,world.solver.interations=40,i(GAME_.bestResult),scene=new THREE.Scene,n(),l(0,0,boxSize.x,boxSize.z,"x");let x=new THREE.AmbientLight(16777215,.6);scene.add(x);let p=new THREE.DirectionalLight(16777215,.6);p.position.set(10,20,0),scene.add(p),(camera=new THREE.OrthographicCamera(-(cameraPos.width/cameraPos.size),cameraPos.width/cameraPos.size,cameraPos.height/cameraPos.size,-(cameraPos.height/cameraPos.size),cameraPos.near,cameraPos.far)).position.set(4,4,4),camera.lookAt(0,0,0),(renderer=new THREE.WebGLRenderer({antialias:!0})).setSize(window.innerWidth,window.innerHeight),renderer.render(scene,camera),document.body.appendChild(renderer.domElement);let A=()=>{if(GAME_.status){let c,d,h=stackBoxArr[stackBoxArr.length-1],x=stackBoxArr[stackBoxArr.length-2],p=h.direction,A=h.threejs.position[p]-x.threejs.position[p],m=Math.abs(A),u="x"===p?h.width:h.depth,w=u-m;if(w>0){let _=w/u;_>=.9?([9,19,29,39,49].includes(GAME_.combo)&&(r.classList.add("active"),setTimeout(()=>{r.classList.remove("active")},1100),GAME_.score+=10),GAME_.combo+=1,s.innerHTML=`x${GAME_.combo}`,s.classList.add("open"),setTimeout(()=>{s.classList.remove("open")},700)):GAME_.combo&&(GAME_.combo=0),c="x"===p?w:h.width,d="z"===p?w:h.depth,h.width=c,h.depth=d,h.threejs.scale[p]=_,h.threejs.position[p]-=A/2,h.cannonjs.position[p]-=A/2;let y=new CANNON.Box(new CANNON.Vec3(c/2,boxSize.y/2,d/2));h.cannonjs.shapes=[],h.cannonjs.addShape(y);let b=Math.sign(A)*(w/2+m/2),B={x:"x"===p?h.threejs.position.x+b:h.threejs.position.x,z:"z"===p?h.threejs.position.z+b:h.threejs.position.z,width:"x"===p?m:c,depth:"z"===p?m:d};a(B.x,B.z,B.width,B.depth);let E="x"===p?h.threejs.position.x:-(boxSize.range-1),M;l(E,"z"===p?h.threejs.position.z:-(boxSize.range-1),c,d,"x"===p?"z":"x"),GAME_.score++,n(),i(GAME_.score)}else{GAME_.end=!0,world.remove(h.cannonjs);let k=new CANNON.Box(new CANNON.Vec3(h.width/2,boxSize.y/2,h.depth/2)),f=5,z=new CANNON.Body({mass:f,shape:k});z.position.set(h.threejs.position.x,h.threejs.position.y,h.threejs.position.z),world.addBody(z),h.cannonjs=z,e.classList.toggle("disable"),t.classList.toggle("active"),GAME_.status=!1,GAME_.score>GAME_.bestResult&&(playConfetti(),GAME_.bestResult=GAME_.score,window.localStorage.setItem("bestResult",GAME_.score),o.classList.add("new"),GAME_.newRecord=!0),enableDownload&&document.querySelector("#pwa-install").classList.add("display")}}else GAME_.active?$():(renderer.setAnimationLoop(g),GAME_.active=!0),i(GAME_.score),l(0,0,boxSize.x,boxSize.z,"z"),e.classList.toggle("disable"),t.classList.toggle("active"),document.querySelector("#pwa-install").classList.remove("display"),GAME_.newRecord&&(GAME_.newRecord=!1,o.classList.remove("new")),GAME_.status=!0,GAME_.end=!1};function g(){if(GAME_.end)stackBoxArr[stackBoxArr.length-1].threejs.position.copy(stackBoxArr[stackBoxArr.length-1].cannonjs.position),stackBoxArr[stackBoxArr.length-1].threejs.quaternion.copy(stackBoxArr[stackBoxArr.length-1].cannonjs.quaternion);else{let e=stackBoxArr[stackBoxArr.length-1],t=e.positive?.15:-.15;e.threejs.position[e.direction]>=boxSize.range-5&&(e.positive=!1),e.threejs.position[e.direction]<=-(boxSize.range-5)&&(e.positive=!0),e.threejs.position[e.direction]+=t,e.cannonjs.position[e.direction]+=t,camera.position.y{e.target.className.split(" ").some(e=>/pwa-.*/.test(e))||(e.preventDefault(),A())});let u=!0;window.addEventListener("keydown",function(e){(32===e.keyCode||40===e.keyCode||" "===e.key)&&(e.preventDefault(),u&&(u=!1,A()))}),window.addEventListener("keyup",function(e){(32===e.keyCode||40===e.keyCode||" "===e.key)&&(u=!0)})}); \ No newline at end of file