diff --git a/csivit/index.html b/csivit/index.html new file mode 100644 index 0000000..7c94a4c --- /dev/null +++ b/csivit/index.html @@ -0,0 +1,5 @@ + + +

will redirect to csi main page or event main page

+ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f7bdcad --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + BUBBLY + + + +
+
+ +
+ + PLAY +
+ +
+ +
+ +
+ INFO +
+ +
+ +
+ + +
+ EXIT +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/info/index.html b/info/index.html new file mode 100644 index 0000000..2116037 --- /dev/null +++ b/info/index.html @@ -0,0 +1,15 @@ + + + + + Game Information + + + + + + + + + + \ No newline at end of file diff --git a/info/script.js b/info/script.js new file mode 100644 index 0000000..aa354e4 --- /dev/null +++ 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(); + +}); \ No newline at end of file diff --git a/info/style.css b/info/style.css new file mode 100644 index 0000000..ccd3ac0 --- /dev/null +++ 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 new file mode 100644 index 0000000..486f456 Binary files /dev/null and b/piranha/1.png differ diff --git a/piranha/Bruno_Belotti_-_Benvenuta_Estate_Mazurka_Short_Loop(1).ogg b/piranha/Bruno_Belotti_-_Benvenuta_Estate_Mazurka_Short_Loop(1).ogg new file mode 100644 index 0000000..efc7790 Binary files /dev/null and b/piranha/Bruno_Belotti_-_Benvenuta_Estate_Mazurka_Short_Loop(1).ogg differ diff --git a/piranha/Plop.ogg b/piranha/Plop.ogg new file mode 100644 index 0000000..b3d78d0 Binary files /dev/null and b/piranha/Plop.ogg differ diff --git a/piranha/background1.png b/piranha/background1.png new file mode 100644 index 0000000..7c24d51 Binary files /dev/null and b/piranha/background1.png differ diff --git a/piranha/boat.png b/piranha/boat.png new file mode 100644 index 0000000..3ff0934 Binary files /dev/null and b/piranha/boat.png differ diff --git a/piranha/bubble_pop_frame_01.png b/piranha/bubble_pop_frame_01.png new file mode 100644 index 0000000..141bd40 Binary files /dev/null and b/piranha/bubble_pop_frame_01.png differ diff --git a/piranha/bubbles-single2.wav b/piranha/bubbles-single2.wav new file mode 100644 index 0000000..1db0c67 Binary files /dev/null and b/piranha/bubbles-single2.wav differ diff --git a/piranha/enemy1.png b/piranha/enemy1.png new file mode 100644 index 0000000..ede798a Binary files /dev/null and b/piranha/enemy1.png differ diff --git a/piranha/f1sh.png b/piranha/f1sh.png new file mode 100644 index 0000000..b6c413b Binary files /dev/null and b/piranha/f1sh.png differ diff --git a/piranha/fish_swim_left.png b/piranha/fish_swim_left.png new file mode 100644 index 0000000..d38bde2 Binary files /dev/null and b/piranha/fish_swim_left.png differ diff --git a/piranha/fish_swim_right.png b/piranha/fish_swim_right.png new file mode 100644 index 0000000..8cc4169 Binary files /dev/null and b/piranha/fish_swim_right.png differ diff --git a/piranha/icon.png b/piranha/icon.png new file mode 100644 index 0000000..e76635e Binary files /dev/null and b/piranha/icon.png differ diff --git a/piranha/index.html b/piranha/index.html new file mode 100644 index 0000000..c86f7c2 --- /dev/null +++ b/piranha/index.html @@ -0,0 +1,22 @@ + + + + + +Fish game + + + +
+ + + + + + + +
+ + + + diff --git a/piranha/left.png b/piranha/left.png new file mode 100644 index 0000000..d142422 Binary files /dev/null and b/piranha/left.png differ diff --git a/piranha/maiden_voyage-karlson.ogg b/piranha/maiden_voyage-karlson.ogg new file mode 100644 index 0000000..a81b709 Binary files /dev/null and b/piranha/maiden_voyage-karlson.ogg differ diff --git a/piranha/maiden_voyage.ogg b/piranha/maiden_voyage.ogg new file mode 100644 index 0000000..198dfef Binary files /dev/null and b/piranha/maiden_voyage.ogg differ diff --git a/piranha/rick.ogg b/piranha/rick.ogg new file mode 100644 index 0000000..4c6f44f Binary files /dev/null and b/piranha/rick.ogg differ diff --git a/piranha/script.js b/piranha/script.js new file mode 100644 index 0000000..9345e0f --- /dev/null +++ b/piranha/script.js @@ -0,0 +1,626 @@ +//need to work on retry +//polishing +//leaderboard +//high score +//npcs spawning more often +let canvas = document.getElementById("canvas1"); +let ctx = canvas.getContext("2d"); +canvas.width = 1000; // needs to be the same as defined in the CSS stylesheet +canvas.height = 800; + + +//tracks +let soundtrack = document.getElementById('soundtrack'); +let playButton = document.getElementById('playButton'); + +let track1playing = false;//checking which track is being played +let track2playing = false; +playButton.addEventListener('click', () => {//when first playbutton is pressed + if (track2playing == true){ + soundtrack1.pause(); + soundtrack1.currentTime = 0 + } + soundtrack.play(); + track1playing= true; + +}); +let soundtrack1= document.getElementById('soundtrack1'); +let playButton1 = document.getElementById('playButton1'); + +playButton1.addEventListener('click', () => {//when second play button is pressed + if (track1playing == true){ + soundtrack.pause(); + soundtrack.currentTime = 0; + track1playing = false; + } + soundtrack1.play(); + track2playing = true; +}); + +let stop = document.getElementById('stopButton'); +stop.addEventListener('click',() => { + soundtrack.pause(); + soundtrack1.pause(); + soundtrack.currentTime = 0; + soundtrack1.currentTime = 0; + track1playing = false; + track2playing = false; +}) +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +let animationId; +let level = 0; +let score = 0; +localStorage.setItem('highscore','0') +let highscore = parseInt(localStorage.highscore) +let first = false; +let gameFrame = 0; +ctx.font = '40px Georgia'; +let gameSpeed = 1; +let gameOver = false; +// mouse interactivity + +let canvasPosition = canvas.getBoundingClientRect(); // will measure the current size and position of the canvas element + +let mouse = { + x: canvas.width / 3, + y: canvas.height / 2, + click: false +}; +canvas.addEventListener('mousedown', function(event) { + mouse.click = true; + mouse.x = event.x - canvasPosition.left;//to get the position with respect to the canvas + mouse.y = event.y - canvasPosition.top; +}); + +canvas.addEventListener('mouseup', function(event) { + mouse.click = false; +}); + +// player + +let playerLeft = new Image(); +playerLeft.src = 'fish_swim_left.png'; +let playerRight = new Image(); +playerRight.src = 'fish_swim_right.png'; +class Player { + constructor() { + this.x = 0; + this.y = canvas.height / 2; + this.radius = 50; + this.angle = 0; // will later use to point the fish in the given mouse direction + this.frameX = 0; + this.frameY = 0; + this.frame = 0; + this.spriteWidth = 498;//obtained from the sprite image that is being used for the player game asset + this.spriteHeight = 327; + } + reset() { + this.x = 0; + this.y = canvas.height/2; + this.frameX = 0; + this.frameY = 0; + this.frame = 0; + } + update() { + let dx = this.x - mouse.x; + let dy = this.y - mouse.y; + let theta = Math.atan2(dy,dx);//theta = tan(dy/dx) + this.angle = theta; + if (mouse.x !== this.x) {//speed = distance/time; here 30 represents the time taken to travel dx distance, as time decreases -> speed increases + this.x -= dx / 30; // to slow down the animation of the movement of the player + } + if (mouse.y !== this.y) { + this.y -= dy / 30; + } + } + draw() { + if (mouse.click !== true) { + ctx.lineWidth = 0.2; + ctx.beginPath(); + ctx.moveTo(this.x, this.y); + ctx.lineTo(mouse.x, mouse.y); + ctx.stroke(); + } + // ctx.fillStyle = 'red'; + // ctx.beginPath(); + // ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); + // ctx.fill(); + // ctx.closePath(); + // ctx.fillRect(this.x, this.y, this.radius, 10); + ctx.save(); + ctx.translate(this.x,this.y); + ctx.rotate(this.angle); + if (this.x >= mouse.x){//player has to travel towards the left side since the player position is ahead of the mouse position determined by the user playing + ctx.drawImage(playerLeft,this.frameX * this.spriteWidth,this.frameY*this.spriteHeight,this.spriteWidth,this.spriteHeight,0-60,0-45,this.spriteWidth/4,this.spriteHeight/4); + } + else {//player has to travel towards the right side since the player position is behind the mouse position determined by the user playing + ctx.drawImage(playerRight,this.frameX * this.spriteWidth,this.frameY*this.spriteHeight,this.spriteWidth,this.spriteHeight,0-60,0-45,this.spriteWidth/4,this.spriteHeight/4); + } + ctx.restore(); + } +} +//initiating the player -> pc +let player = new Player(); // Added parentheses to instantiate the Player class + +// bubbles + +let bubblesArray = []; +let bubbleImage = new Image(); +bubbleImage.src = 'bubble_pop_frame_01.png';//bubble image that is being used as npc + +class Bubble { + constructor() { + this.x = Math.random() * canvas.width; + this.y = canvas.height + 100; + this.radius = 50; + this.speed = Math.random()*5+1 + 2.5 * level;//range [1,6] + this.distance; + this.counted = false; + this.sound = Math.random() <= 0.5 ? 'sound1' : 'sound2'; + } + update() { + this.y -= this.speed; + let dx = this.x - player.x; + let dy = this.y - player.y; + this.distance = Math.sqrt(dx*dx + dy*dy); + } + draw() { + // ctx.fillStyle='blue'; + // ctx.beginPath(); + // ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); + // ctx.fill(); + // ctx.closePath(); + // ctx.stroke(); + ctx.drawImage(bubbleImage,this.x-65,this.y-65,this.radius*2.6,this.radius*2.6); + } +} + +let bubblePop1 = document.createElement('audio'); +bubblePop1.src = 'Plop.ogg'; +let bubblePop2 = document.createElement('audio'); +bubblePop2.src = 'bubbles-single2.wav'; +function handleBubble() { + if (gameFrame % 50 == 0){ + bubblesArray.push(new Bubble()); + } + for (let i = 0; i < bubblesArray.length;i++) { + + bubblesArray[i].update(); + bubblesArray[i].draw(); + //} + //for (let i = 0; i < bubblesArray.length;i++) { + if (bubblesArray[i].y < 0 - bubblesArray[i].radius* 2) { + bubblesArray.splice(i,1); + i--; + } + else if (bubblesArray[i].distance < bubblesArray[i].radius + player.radius){ + if (!bubblesArray[i].counted){ + if (bubblesArray[i].sound == 'sound1'){ + if (track1playing == true) { + soundtrack.pause(); + bubblePop1.play(); + soundtrack.play(); + } + else if (track2playing == true) { + soundtrack1.pause(); + bubblePop1.play(); + soundtrack1.play(); + + } + else { + bubblePop1.play(); + } + } + else { + if (track1playing == true) { + soundtrack.pause(); + bubblePop2.play(); + soundtrack.play(); + } + else if (track2playing == true) { + soundtrack1.pause(); + bubblePop2.play(); + soundtrack1.play(); + + } + else { + bubblePop2.play(); + } + // soundtrack.pause(); + // bubblePop2.play(); + // soundtrack.play(); + } + + score++; + level = Math.floor(score / 10); + bubblesArray[i].counted = true; + bubblesArray.splice(i,1); + i--; + } + } + } +} + +//Repeating backgrounds +let background = new Image(); +background.src = 'background1.png'; +let BG = { + x1:0, + x2:canvas.width, + y:0, + width: canvas.width, + height: canvas.height +} +function handleBackground() { + BG.x1-= gameSpeed; + if (BG.x1 < -BG.width) BG.x1 = BG.width; + BG.x2-= gameSpeed; + if (BG.x2 < -BG.width) BG.x2 = BG.width; + ctx.drawImage(background,BG.x1,BG.y,BG.width,BG.height); + ctx.drawImage(background,BG.x2,BG.y,BG.width,BG.height); +} + + +//level + +//////////////////////////////////////////////////////////////////// +let boat = new Image(); +boat.src = 'boat.png'; +let boatPosition = { + x: 90, // Set the initial x-position of the boat + y: 70, // Set the initial y-position of the boat + width: 200, // Set the width of the boat image + height: 150, // Set the height of the boat image4 + targetx: canvas.width, + targety: 70 + }; +function drawBoat() { + ctx.drawImage(boat,boatPosition.x/7,boatPosition.y-76,boatPosition.width,boatPosition.height); + boatPosition.x++; +} +let fish = new Image(); +fish.src = 'icon.png'; +let fish2 = new Image(); +fish2.src = 'left.png'; + +let fishPosition = { + x:canvas.width, + y1:Math.random()*(canvas.height-250), + y2:Math.random()*(canvas.height-250 -10) +} + +function friendlyfish() { + ctx.drawImage(fish,fishPosition.x,fishPosition.y1,100,75); + ctx.drawImage(fish2,fishPosition.x/4,fishPosition.y2,100,75); + fishPosition.x--; + +} +// function friendlyfish() { +// ctx.drawImage(fish,fishx/10,fishy,100,75); +// fishx-=fishx/10; +// } +// function friendlyfish() { +// ctx.drawImage(fish, fishx / 10, fishy, 100, 75); +// fishx -= 1; // Decrease the x-position of the friendly fish +// if (fishx < -100) { // If the friendly fish goes off the screen +// fishx = canvas.width - 200; // Reset its x-position +// fishy = Math.random() * (canvas.height - 150) + 150; // Generate a new random y-position +// } +// } +// function drawBoat() { +// if (Math.random() > 0.55) { +// let dx = (canvas.width - boatPosition.x) / 30; +// for (let i = boatPosition.x; i <= canvas.width; i++) { +// ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas before drawing the boat at a new position +// ctx.drawImage(boat, i, boatPosition.y, boatPosition.width, boatPosition.height); +// } +// boatPosition.x = canvas.width; // Update the boat's position after the loop completes +// } +// else { +// ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas when the boat is not moving +// } +// } +// Enemies + +let enemyImage = new Image(); +enemyImage.src = 'enemy1.png'; +class Enemy { + constructor() { + this.x = canvas.width ; + this.y = Math.random() * (canvas.height - 150) + 105; + if (this.y < 90 ) { + this.y = 120; + } + this.radius = 60; + this.speed = Math.random() * 2 + 2; + this.frame = 0; + this.frameX = 0; + this.frameY = 0; + this.spriteWidth = 418; + this.spriteHeight = 397; + } + reset() { + this.x = canvas.width - 200; + this.y = Math.random() * (canvas.height - 150) + 150; + this.speed = Math.random() * 2 + 2 + 2 * level; + this.frame = 0; + this.frameX = 0; + this.frameY = 0; + + } + draw() { + // ctx.fillStyle='red'; + // ctx.beginPath(); + // ctx.arc(this.x,this.y,this.radius,0,Math.PI * 2); + // ctx.fill(); + ctx.drawImage(enemyImage,this.frameX*this.spriteWidth,this.frameY*this.spriteHeight,this.spriteWidth,this.spriteHeight,this.x-60,this.y-70,this.spriteWidth/3,this.spriteHeight/3); + } + update() { + this.x -= this.speed; + if (this.x < 0 - this.radius * 2) { + this.x = canvas.width + 200; + this.y = Math.random() * (canvas.height - 150) + 90; + this.speed = Math.random() * 2 + 2; + } + if (gameFrame % 5 == 0){ + this.frame++; + if (this.frame >= 12) this.frame = 0; + if (this.frame == 3 || this.frame == 7 || this.frame == 11){ + this.frameX = 0; + } + else { + this.frameX++; + } + if (this.frame < 3) this.frameY = 0; + else if (this.frame < 7) this.frameY = 1; + else if (this.frame < 11) this.frameY = 2; + else this.frameY = 0; + } + //collision with player + let dx = this.x - player.x;//checking the distance between the two + let dy = this.y - player.y; + let distance = Math.sqrt(dx*dx + dy*dy); + if (distance < this.radius + player.radius) { + handleGameOver(); + + } + } +} +let enemyArray = [] +enemy1 = new Enemy(); + +// function handleEnemies() { +// console.log(enemyArray.length); +// enemy1.draw(); +// enemy1.update(); +// var temp = false; +// if (temp == false) { +// for (let i = 0; i < level; i++) { +// enemyArray.push(new Enemy()); +// console.log(i); +// } +// temp = true; +// } + +// for (let i = 0; i < enemyArray.length;i++) { +// console.log(i); +// enemyArray[i].draw(); +// enemyArray[i].update(); +// } +// // enemy1.draw(); +// // enemy1.update(); +// } + + +//let spawnedEnemy = false; +let spawn = 1; +function handleEnemies() { + enemy1.draw(); + enemy1.update(); + if (score % 10 == 0 && score != 0 && spawn == level) {//!spawnedEnemy + enemyArray.push(new Enemy()); + spawn++; + console.log(enemyArray.length); + //spawnedEnemy = true; + } + + for (let i = 0; i < enemyArray.length; i++) { + enemyArray[i].draw(); + enemyArray[i].update(); + } +} + +function handleGameOver() { + ctx.clearRect(0,0,canvas.width,canvas.height); + ctx.fillStyle = 'white'; + ctx.fillText('GAME OVER, you reached score ' + score,110,250); + if (score > highscore) { + localStorage.removeItem('highscore') + localStorage.setItem('highscore',score) + highscore = parseInt(localStorage.highscore) + } + ctx.fillText('High score:' + highscore,110,300); + gameOver = true; + retry(); + +} +function retry() { + if (gameOver == true) { + let retryButton = document.getElementById('retryButton'); + //console.log(retryButton,score,gameFrame,level,mouse.x,bubl); + retryButton.style.display = 'block'; + retryButton.addEventListener('click', function() { + // Reset game variables + ctx.clearRect(0, 0, canvas.width, canvas.height); + score = 0; + level = Math.floor(score/10); + gameFrame = 0; + gameOver = false; + gameSpeed = 1; + // bubblesArray.length = 0; + mouse.x= canvas.width / 3; + mouse.y= canvas.height / 2; + // // Hide retry button + // retryButton.style.display = 'none'; + // // Restart animation + player.reset(); + // enemy1.reset(); + bubblesArray = []; + enemyArray = []; + // animate(); + cancelAnimationFrame(animationId); + //location.reload(); + highscore = parseInt(localStorage.highscore) + animate(); + }); + } + } + + +/**** BUBBLE TEXT ***/ +let bubbleTextArray = []; +let adjustX = -3; +let adjustY = -3; +ctx.fillStyle = "white"; +ctx.font = "17px Verdana"; +ctx.fillText("black", 20, 42); +//ctx.font = '19px Verdana'; +//ctx.fillText('TEXT', 36, 49); +let textCoordinates = ctx.getImageData(0, 0, 100, 100); + +class Particle2 { + constructor(x, y) { + this.x = x; + this.y = y; + this.size = 7; + this.baseX = this.x; + this.baseY = this.y; + this.density = Math.random() * 15 + 1; + this.distance; + } + draw() { + ctx.lineWidth = 3; + ctx.strokeStyle = "rgba(34,147,214,1)"; + ctx.fillStyle = "rgba(255,255,255,1)"; + ctx.beginPath(); + if (this.distance < 50) { + this.size = 14; + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.stroke(); + ctx.closePath(); + ctx.beginPath(); + ctx.arc(this.x + 4, this.y - 4, this.size / 3, 0, Math.PI * 2); + ctx.arc(this.x - 6, this.y - 6, this.size / 5, 0, Math.PI * 2); + } else if (this.distance <= 80) { + this.size = 8; + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.stroke(); + ctx.closePath(); + ctx.beginPath(); + ctx.arc(this.x + 3, this.y - 3, this.size / 2.5, 0, Math.PI * 2); + ctx.arc(this.x - 4, this.y - 4, this.size / 4.5, 0, Math.PI * 2); + } else { + this.size = 5; + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.stroke(); + ctx.closePath(); + ctx.beginPath(); + ctx.arc(this.x + 1, this.y - 1, this.size / 3, 0, Math.PI * 2); + } + ctx.closePath(); + ctx.fill(); + } + update() { + let dx = player.x - this.x; + let dy = player.y - this.y; + let distance = Math.sqrt(dx * dx + dy * dy); + this.distance = distance; + let forceDirectionX = dx / distance; + let forceDirectionY = dy / distance; + let maxDistance = 100; + let force = (maxDistance - distance) / maxDistance; + let directionX = forceDirectionX * force * this.density; + let directionY = forceDirectionY * force * this.density; + + if (distance < 100) { + this.x -= directionX; + this.y -= directionY; + } else { + if (this.x !== this.baseX) { + let dx = this.x - this.baseX; + this.x -= dx / 20; + } + if (this.y !== this.baseY) { + let dy = this.y - this.baseY; + this.y -= dy / 20; + } + } + } +} + +function init2() { + bubbleTextArray = []; + for (let y = 0, y2 = textCoordinates.height; y < y2; y++) { + for (let x = 0, x2 = textCoordinates.width; x < x2; x++) { + if ( + textCoordinates.data[y * 4 * textCoordinates.width + x * 4 + 3] > 128 + ) { + let positionX = x + adjustX; + let positionY = y + adjustY; + bubbleTextArray.push(new Particle2(positionX * 8, positionY * 8)); + } + } + } +} +init2(); +console.log(bubbleTextArray); +/** bubble text end **/ + + + +// animation + +function animate() { + //console.log() + ctx.clearRect(0, 0, canvas.width, canvas.height); + handleBackground(); + drawBoat();/////////////////////////////////////////////////////////////// + //friendlyfish(); + friendlyfish(); + handleBubble(); + player.update(); + player.draw(); + handleEnemies(); + ctx.fillStyle = "black"; + ctx.fillText('score: ' + score,canvas.width/2,50); + ctx.fillText('Highscore:' + highscore,200,50); + ctx.fillStyle = "rgba(34,147,214,1)"; + ctx.font = "20px Georgia"; + // ctx.fillStyle = "rgba(255,255,255,0.8)"; + // ctx.fillText("score: " + score, 141, 336); + // ctx.fillStyle = "rgba(34,147,214,1)"; + // ctx.fillText("score: " + score, 140, 335); + gameFrame++; + if (!gameOver) { + animationId = requestAnimationFrame(animate);//recurrsion + } + else { + //handleGameOver(); + + + soundtrack.pause(); + soundtrack.currentTime = 0; + soundtrack1.pause(); + soundtrack1.currentTime = 0; + } +} +var gamebeginning = false; +if (gamebeginning == false){ + animate(); + gamebeginning = true; +} + + +window.addEventListener('resize',function(){ + canvasPosition=canvas.getBoundingClientRect(); +}); \ No newline at end of file diff --git a/piranha/style.css b/piranha/style.css new file mode 100644 index 0000000..e90fbb2 --- /dev/null +++ b/piranha/style.css @@ -0,0 +1,35 @@ +* { + margin : 0; + padding : 0; + box-sizing:border-box; +} +body { + width:100vw; + height:100vh; + display:flex; + justify-content:center; + align-items:center; + background: black; + /* flex-direction: column; */ +} + +#canvas1 { + width:1000px; + height:800px; + border: 4px solid black; + background: linear-gradient(to bottom, lightblue,darkblue,black); + margin-left: 40px; +} + +.controls { + display: flex; + flex-direction: column; + justify-content: space-around; + height: 25%; + align-items: center; +} + +button,a { + width: 100%; + padding: 5px 4px; +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a41a827 --- /dev/null +++ b/script.js @@ -0,0 +1,88 @@ +// const canvas = document.getElementById('canvas1'); +// const ctx = canvas.getContext('2d'); + +// canvas.width = window.innerWidth; +// canvas.height = window.innerHeight; + +// // measure buttons +// const buttonElements = document.querySelectorAll('.button'); +// let buttonMeasurements = []; +// function measureButtons(){ +// buttonMeasurements = []; +// buttonElements.forEach(button => { +// buttonMeasurements.push(button.getBoundingClientRect()); +// }); +// }; +// measureButtons(); + +// // sound +// const fireSound = new Audio(); +// fireSound.src = 'fire.wav'; + +// // create particles +// let particlesArray = []; +// class Particle { +// constructor(x, y, size){ +// this.x = x; +// this.y = y; +// this.size = size; +// this.weight = (Math.random() * 1.5) + 1.5; +// this.directionX = Math.random() * 2; +// } +// update() { +// this.weight -= 0.01; +// this.y -= this.weight; +// this.x += this.directionX; +// if (this.size >= 0.3) this.size -= 0.2; +// } +// draw() { +// ctx.beginPath(); +// ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); +// ctx.fillStyle = 'orange'; +// ctx.fill(); +// } +// } + +// let activeButton = -1; +// buttonElements.forEach(button => button.addEventListener('mouseenter', function(){ +// activeButton = button.dataset.number; +// fireSound.play(); +// })); +// buttonElements.forEach(button => button.addEventListener('mouseleave', function(){ +// activeButton = -1; +// fireSound.stop(); +// })); + +// ctx.lineWidth = 1; +// function handleParticles(){ +// for (let i = 0; i < particlesArray.length; i++){ + +// particlesArray[i].update(); +// particlesArray[i].draw(); +// if (particlesArray[i].size <= 1){ +// particlesArray.splice(i, 1); +// i--; +// } +// } +// } + +// function animate(){ +// ctx.clearRect(0, 0, canvas.width, canvas.height); +// if (activeButton > -1) { +// let size = Math.random() * 40 + 10; +// let x = Math.random() * (buttonMeasurements[activeButton].width - size * 2) + buttonMeasurements[activeButton].x + size; +// let y = buttonMeasurements[activeButton].y + 40; + +// particlesArray.push(new Particle(x, y, size)); +// } +// handleParticles(); + +// requestAnimationFrame(animate); +// } +// animate(); + +// window.addEventListener('resize', function(){ +// canvas.width = window.innerWidth; +// canvas.height = window.innerHeight; +// measureButtons(); +// }); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..30c257f --- /dev/null +++ b/style.css @@ -0,0 +1,53 @@ +* { + box-sizing: border-box; +} +.container { + width: 200px; + height: 160px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.button_wrapper { + position: relative; + width: 100%; + height: 50px; + margin-bottom: 5px; + filter: url("#shake0"); +} +button, .button_label { + position: absolute; + width: 100%; + height: 100%; +} +.button_label { + line-height: 50px; + text-align: center; + font-size: 35px; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + color: white +} +button { + background: black; + outline: none; + border: none; +} +.button_wrapper:hover { + transform: scale(1.8); + z-index: 100; + animation: distort .5s linear infinite; +} +.button_wrapper:hover button{ + background: white; +} +.button_wrapper:hover .button_label { + color: black; +} +@keyframes distort { + 0% { filter: url("#shake0");} + 25% { filter: url("#shake1");} + 50% { filter: url("#shake2");} + 75% { filter: url("#shake3");} + 100% { filter: url("#shake4");} +} \ No newline at end of file