Add files via upload

0ju1c3 · Jun 1, 2023 · b8819da · b8819da
commit b8819da
Show file tree

Hide file tree

Showing 26 changed files with 1,062 additions and 0 deletions.
diff --git a/csivit/index.html b/csivit/index.html
@@ -0,0 +1,5 @@
+<html>
+ <body>
+ <p>will redirect to csi main page or event main page</p>
+ </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>BUBBLY</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <div class="container">
+ <div class="button_wrapper">
+ <a href="piranha/index.html"><button></button>
+ <div class="button_label">
+
+ PLAY
+ </div>
+ </a>
+ </div>
+
+ <div class="button_wrapper">
+ <a href="info/index.html" target="_blank"><button></button>
+ <div class="button_label">
+ INFO
+ </div>
+ </a>
+ </div>
+
+ <div class="button_wrapper">
+ <a href="csivit/index.html">
+ <button></button>
+ <div class="button_label">
+ EXIT
+ </div>
+ </a>
+ </div>
+ </div>
+ <svg>
+ <defs>
+ <filter id='shake0'>
+ <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" seed="0"/>
+ <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="7"/>
+ </filter>
+ <filter id='shake1'>
+ <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" seed="1"/>
+ <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="5"/>
+ </filter>
+ <filter id='shake2'>
+ <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" seed="2"/>
+ <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="8"/>
+ </filter>
+ <filter id='shake3'>
+ <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" seed="3"/>
+ <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6"/>
+ </filter>
+ <filter id='shake4'>
+ <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" seed="4"/>
+ <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="4"/>
+ </filter>
+ </defs>
+ </svg>
+</body>
+</html>
diff --git a/info/index.html b/info/index.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+ <meta charset="UTF-8">
+ <meta name ="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Game Information</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <canvas id="canvas1"></canvas>
+ <input type="text" id="text" placeholder="Type something" style="display:none;">
+
+ <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/info/script.js b/info/script.js
@@ -0,0 +1,142 @@
+window.addEventListener('load', function(){
+ const canvas = document.getElementById('canvas1');
+ const ctx = canvas.getContext('2d');
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ class Particle {
+ constructor(effect, x, y, color){
+ this.effect = effect;
+ this.x = this.originX = x;
+ this.y = this.originY = y;
+ this.size = 2;
+ this.color = color;
+ this.dx = 0;
+ this.dy = 0;
+ this.vx = 0;
+ this.vy = 0;
+ this.force = 0;
+ this.angle = 0;
+ this.distance = 0;
+ this.friction = 0.98;
+ this.ease = 0.2;
+ }
+ update(){
+ this.dx = this.effect.mouse.x - this.x;
+ this.dy = this.effect.mouse.y - this.y;
+ this.distance = this.dx * this.dx + this.dy * this.dy;
+ this.force = -this.effect.mouse.radius / this.distance;
+ if(this.distance < this.effect.mouse.radius) {
+ this.angle = Math.atan2(this.dy, this.dx);
+ this.vx += this.force * Math.cos(this.angle);
+ this.vy += this.force * Math.sin(this.angle);
+ }
+ this.x += (this.vx *= this.friction) + (this.originX - this.x) * this.ease;
+ this.y += (this.vy *= this.friction) + (this.originY - this.y) * this.ease;
+ }
+ }
+
+ class Effect {
+ constructor(width, height, context){
+ this.context = context;
+ this.width = width;
+ this.height = height;
+ this.text = 'FIND IT YOURSELF XD';
+ this.textWidth;
+ this.fontSize = 75;
+ this.centerX = this.width / 2;
+ this.centerY = this.height / 2 ;
+ this.x;
+ this.y;
+ this.particles = [];
+ this.gap = 2;
+ this.mouse = {
+ radius: 5000,
+ x: 0,
+ y: 0
+ }
+ window.addEventListener("mousemove", event => {
+ this.mouse.x = event.x;
+ this.mouse.y = event.y;
+ });
+
+ window.addEventListener("touchstart", event => {
+ this.mouse.x = event.changedTouches[0].clientX;
+ this.mouse.y = event.changedTouches[0].clientY;
+ }, false);
+
+ window.addEventListener("touchmove", event => {
+ event.preventDefault();
+ this.mouse.x = event.targetTouches[0].clientX;
+ this.mouse.y = event.targetTouches[0].clientY;
+ }, false);
+
+ window.addEventListener("touchend", event => {
+ event.preventDefault();
+ this.mouse.x = 0;
+ this.mouse.y = 0;
+ }, false);
+ text.addEventListener('keyup', e => {
+ this.text = e.target.value;
+ this.init(this.context);
+ })
+ }
+ init(context){
+ context.clearRect(0, 0, this.width, this.height);
+
+ this.particles = [];
+ context.font = this.fontSize + 'px Helvetica';
+ this.textWidth = context.measureText(this.text).width;
+ this.centerX = this.width / 2;
+ this.centerY = this.height / 2 ;
+ this.x = this.centerX - this.textWidth/2;
+ this.y = this.centerY - this.fontSize/2;
+ const gradient = context.createLinearGradient(this.x, this.y, this.textWidth, this.fontSize);
+ gradient.addColorStop(0, 'red');
+ gradient.addColorStop(1, 'blue');
+ context.fillStyle = gradient;
+ context.fillText(this.text, this.x, this.y);
+ var pixels = context.getImageData(0, 0, this.width, this.height).data;
+ var index;
+ for(var y = 0; y < this.height; y += this.gap) {
+ for(var x = 0; x < this.width; x += this.gap) {
+ index = (y * this.width + x) * 4;
+ const red = pixels[index];
+ const green = pixels[index + 1];
+ const blue = pixels[index + 2];
+ const color = 'rgb(' + red + ',' + green + ',' + blue + ')';
+
+ const alpha = pixels[index + 3];
+ if(alpha > 0) {
+ this.particles.push(new Particle(this, x, y, color));
+ }
+ }
+ }
+ context.clearRect(0, 0, this.width, this.height);
+ }
+ update(){
+ for(var i = 0; i < this.particles.length; i++) {
+ this.particles[i].update();
+ }
+ }
+ render(context){
+ context.clearRect(0, 0, this.width, this.height);
+ for(var i = 0; i < this.particles.length; i++) {
+ var p = this.particles[i];
+ context.fillStyle = p.color;
+ context.fillRect(p.x, p.y, p.size, p.size);
+ }
+ }
+ }
+
+ const effect = new Effect(canvas.width, canvas.height, ctx);
+ effect.init(ctx);
+
+ function animate() {
+ effect.update();
+ effect.render(ctx);
+ requestAnimationFrame(animate);
+ }
+ animate();
+
+});
diff --git a/info/style.css b/info/style.css
@@ -0,0 +1,14 @@
+canvas {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ background-color: #1a162a; 
+}
+input {
+ position: absolute;
+ z-index: 100;
+ top: 20px;
+ left: 20px;
+}
diff --git a/piranha/1.png b/piranha/1.png
diff --git a/piranha/Bruno_Belotti_-_Benvenuta_Estate_Mazurka_Short_Loop(1).ogg b/piranha/Bruno_Belotti_-_Benvenuta_Estate_Mazurka_Short_Loop(1).ogg
diff --git a/piranha/Plop.ogg b/piranha/Plop.ogg
diff --git a/piranha/background1.png b/piranha/background1.png
diff --git a/piranha/boat.png b/piranha/boat.png
diff --git a/piranha/bubble_pop_frame_01.png b/piranha/bubble_pop_frame_01.png
diff --git a/piranha/bubbles-single2.wav b/piranha/bubbles-single2.wav
diff --git a/piranha/enemy1.png b/piranha/enemy1.png
diff --git a/piranha/f1sh.png b/piranha/f1sh.png
diff --git a/piranha/fish_swim_left.png b/piranha/fish_swim_left.png
diff --git a/piranha/fish_swim_right.png b/piranha/fish_swim_right.png
diff --git a/piranha/icon.png b/piranha/icon.png
diff --git a/piranha/index.html b/piranha/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name ="viewport" content="width=device-width, initial-scale=1.0">
+<title>Fish game</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <div class="controls">
+ <audio id="soundtrack" src="rick.ogg" loop></audio>
+ <button id="playButton">Play Soundtrack</button>
+ <audio id="soundtrack1" src="maiden_voyage.ogg" loop></audio>
+ <button id="playButton1">Play Soundtrack2</button>
+ <button id="retryButton">Retry</button>
+ <button id="stopButton">Stop</button>
+ <a href="../index.html"><button id="retryButton">Exit</button></a>
+ </div>
+ <canvas id="canvas1"></canvas>
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/piranha/left.png b/piranha/left.png
diff --git a/piranha/maiden_voyage-karlson.ogg b/piranha/maiden_voyage-karlson.ogg
diff --git a/piranha/maiden_voyage.ogg b/piranha/maiden_voyage.ogg
diff --git a/piranha/rick.ogg b/piranha/rick.ogg