New spooky birb game

ramyamahi · Oct 2, 2021 · 22db8c5 · 22db8c5
1 parent 3bf3b90
commit 22db8c5
Show file tree

Hide file tree

Showing 13 changed files with 336 additions and 0 deletions.
diff --git a/Images/pixel-bat-1.gif b/Images/pixel-bat-1.gif
diff --git a/Images/pixel-bat-2.gif b/Images/pixel-bat-2.gif
diff --git a/Images/pixel-grave-flip.png b/Images/pixel-grave-flip.png
diff --git a/Images/pixel-grave-tall.png b/Images/pixel-grave-tall.png
diff --git a/Images/pixel-grave.png b/Images/pixel-grave.png
diff --git a/Images/pixel-graveyard.gif b/Images/pixel-graveyard.gif
diff --git a/Images/pixel-restart.png b/Images/pixel-restart.png
diff --git a/Images/spooky-birb-start.png b/Images/spooky-birb-start.png
diff --git a/birb-squeak.mp3 b/birb-squeak.mp3
diff --git a/spooky-birb.html b/spooky-birb.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/png" sizes="32x32" href="Images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="Images/favicon-16x16.png">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spooky Birb</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+</head>
+<body style="height: 100%;min-height: 100%;">
+    <navbar class="topnav">
+        <a href="index.html">Home</a>
+        <a href="contact.html">Contact</a>
+        <a class="active" href="#Spooky">Play Spooky Birb</a>
+        <a href="https://www.youtube.com/watch?v=n_qbGJuxCYY">Click Me!</a>
+    </navbar>
+    <div class="intro">
+        <h1>Play Spooky Birb</h1>
+    </div>
+    <div id="spooky-birb">
+        <img src="Images/spooky-birb-start.png" id="spooky-birb-load-img">
+        <img src="Images/pixel-restart.png" id="spooky-birb-restart-img" style="display: none;">
+    </div>
+    <div class="spooky-controls">
+        <h2 class="spooky-controls-item">Controls</h2>
+        <h4 class="spooky-controls-item">Click to start/restart</h4>
+        <h4 class="spooky-controls-item">Arrow keys / WASD to move birb</h4>
+    </div>
+    <div class="spooky-thanks">
+        <div class="spooky-thanks-item"><h2>Thanks to the below creators for the assets!</h2></div>
+        <div class="spooky-thanks-item"><a href="https://freesound.org/s/337653/" target="_blank">Background music: hmmm101</a></div>
+        <div class="spooky-thanks-item"><a href="https://freesound.org/s/445958/" target="_blank">Birb squeak: Breviceps</a></div>
+        <div class="spooky-thanks-item"><a href="https://www.pixilart.com/art/pastel-graveyard-5974f85db3d6648" target="_blank">Background: skele-pixel</a></div>
+    </div>
+
+    <script src="spooky-birb.js"></script>
+</body>
+
+</html>
diff --git a/spooky-birb.js b/spooky-birb.js
@@ -0,0 +1,251 @@
+//Spooky birb game
+
+var spookyBirb;
+var spookyObstacles = [];
+var spookyScoreObstacles = [];
+var spookyScore;
+var spookyScoreValue = 0;
+var spookyBackground;
+var birbSound;
+var pass = false;
+
+//load it up
+$("#spooky-birb-load-img").click(function(){
+    console.log('Time to get spooky');
+	$("#spooky-birb-load-img").css("display","none");
+    myGameArea.start();
+    spookyBirb = new component(50, 30, "Images/pixel-bat-1.gif", 15, 270, "image");
+	spookyScore = new component("30px", "Consolas", "black", 5, 30, "text");
+	spookyBackground = new component(1100, 600, "Images/pixel-graveyard.gif", 0, 0, "background");
+	birbSound = new sound("birb-squeak.mp3");
+	spookyMusic = new sound("spooky-music.mp3", true);
+	spookyMusic.play();
+
+});
+
+//game canvas
+var myGameArea = {
+    canvas : document.createElement("canvas"),
+    start : function() {
+        this.canvas.width = 1068;
+        this.canvas.height = 600;
+        this.context = this.canvas.getContext("2d");
+        $("#spooky-birb").append(this.canvas, document.body.childNodes[0]);
+		this.frameNo = 0; 
+        this.interval = setInterval(updateGameArea, 10);
+		window.addEventListener('keydown', function (e) {
+			myGameArea.keys = (myGameArea.keys || []);
+			myGameArea.keys[e.keyCode] = true;
+		})
+		window.addEventListener('keyup', function (e) {
+			myGameArea.keys[e.keyCode] = false;
+		})
+    },
+    clear : function() {
+    	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+	stop : function() {
+		clearInterval(this.interval);
+	}
+}
+
+//birb component
+function component(width, height, color, x, y, type) {
+	//create an object
+	this.type = type;
+	if (type == "image" || type == "background") {
+		this.image = new Image();
+		this.image.src = color;
+	}
+    this.width = width;
+    this.height = height;
+    this.speedX = 0;
+    this.speedY = 0;
+    this.x = x;
+    this.y = y;    
+    this.update = function(){
+        ctx = myGameArea.context;
+		if (this.type == "text") {
+			ctx.font = this.width + " " + this.height;
+			ctx.fillStyle = color;
+			ctx.fillText(this.text, this.x, this.y);
+		} else if (this.type == "image" || this.type == "background") {
+			ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+			if (this.type == "background") {
+				ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
+			}
+		} else {
+			ctx.fillStyle = color;
+			ctx.fillRect(this.x, this.y, this.width, this.height);
+		}
+    }
+    this.newPos = function(type) {
+		//move object
+        this.x += this.speedX;
+        this.y += this.speedY;
+		if (this.type == "background") {
+			if (this.x == -(this.width)) {
+				this.x = 0;
+			}
+		}
+		if(type == "birb"){
+			this.birbPrison();
+		}
+    }
+	this.crashWith = function(otherobj) {
+		//check if an object touches another object
+		var myleft = this.x;
+		var myright = this.x + (this.width);
+		var mytop = this.y;
+		var mybottom = this.y + (this.height);
+		var otherleft = otherobj.x;
+		var otherright = otherobj.x + (otherobj.width);
+		var othertop = otherobj.y;
+		var otherbottom = otherobj.y + (otherobj.height);
+		var crash = true;
+		if ((mybottom < othertop) ||
+		(mytop > otherbottom) ||
+		(myright < otherleft) ||
+		(myleft > otherright)) {
+			crash = false;
+		}
+		return crash;
+	}
+	this.passThrough = function(otherobj) {
+		//check if an object passes through another object
+		var myleft = this.x;
+		var otherright = otherobj.x + (otherobj.width);
+		if (myleft > otherright){
+			pass = true;
+		}
+		return pass;
+	}
+	this.birbPrison = function() {
+		//stop the spooky birb escaping
+
+		//get max x and y values to stop escaping from the bottom and right
+        var rockbottom = myGameArea.canvas.height - this.height;
+        if (this.y > rockbottom) this.y = rockbottom;
+		var prisonbars = myGameArea.canvas.width - this.width;
+        if (this.x > prisonbars) this.x = prisonbars;
+
+		//use 0 for top and left
+		if (this.y < 0) this.y = 0;
+		if (this.x < 0) this.x = 0;
+
+    }
+}
+
+function updateGameArea() {
+
+	var x, height, gap, minHeight, maxHeight, minGap, maxGap;
+
+	//obstacle hit
+	for (i = 0; i < spookyObstacles.length; i += 1) {
+		if (spookyBirb.crashWith(spookyObstacles[i])) {
+			spookyMusic.stop();
+			birbSound.play();
+			myGameArea.stop();
+			$('#spooky-birb-restart-img').css("display","block");
+			return;
+		}
+	}
+
+	//increase score
+	for (i = 0; i < spookyScoreObstacles.length; i += 1) {
+		if (spookyBirb.passThrough(spookyScoreObstacles[i])) {
+			spookyScoreObstacles.splice(i,1);
+			pass = false;
+			spookyScoreValue += 1;
+		}
+	}
+
+	//clear the canvas
+	myGameArea.clear();
+	//increase frame number
+	myGameArea.frameNo += 1;
+
+	//show background
+	spookyBackground.speedX = -0.5;
+	spookyBackground.newPos();
+	spookyBackground.update();
+
+	//make the obstacles
+	if (myGameArea.frameNo == 1 || everyinterval(150)) {
+		x = myGameArea.canvas.width;
+		y = myGameArea.canvas.height;
+		minHeight = 20;
+		maxHeight = 200;
+		height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
+		minGap = 60;
+		maxGap = 200;
+		gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
+		spookyObstacles.push(new component(60, height, "Images/pixel-grave-flip.png", x, 0, "image"));
+		spookyObstacles.push(new component(60, x - height - gap, "Images/pixel-grave-tall.png", x, height + gap, "image"));
+		spookyScoreObstacles.push(new component(60, 600, "rgba(255, 255, 255, 0)", x, 0));
+	  }
+	for (i = 0; i < spookyObstacles.length; i += 1) {
+		spookyObstacles[i].x += -1;
+		spookyObstacles[i].update();
+	}
+	for (i = 0; i < spookyScoreObstacles.length; i += 1) {
+		spookyScoreObstacles[i].x += -1;
+		spookyScoreObstacles[i].update();
+	}
+
+	//show score
+	spookyScore.text = "SPOOKS: " + spookyScoreValue;
+	spookyScore.update();
+
+	//move birb
+	spookyBirb.speedX = 0;
+	spookyBirb.speedY = 0;
+	if (myGameArea.keys && (myGameArea.keys[37] || myGameArea.keys[65])) {spookyBirb.speedX = -1.2; }
+	if (myGameArea.keys && (myGameArea.keys[39] || myGameArea.keys[68])) {spookyBirb.speedX = 1.2; }
+	if (myGameArea.keys && (myGameArea.keys[38] || myGameArea.keys[87])) {spookyBirb.speedY = -1.2; }
+	if (myGameArea.keys && (myGameArea.keys[40] || myGameArea.keys[83])) {spookyBirb.speedY = 1.2; }
+
+	//show spooky birb
+	spookyBirb.newPos("birb");
+	spookyBirb.update();
+
+	//flap the birb
+	if(everyinterval(10)){
+		spookyBirb.image.src = (spookyBirb.image.src.endsWith("Images/pixel-bat-1.gif")) ? "Images/pixel-bat-2.gif" : "Images/pixel-bat-1.gif";
+	}
+
+}
+
+//interval func
+function everyinterval(n) {
+	if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
+	return false;
+}
+
+//movement
+function stopMove() {
+	spookyBirb.speedX = 0;
+	spookyBirb.speedY = 0;
+}
+
+//sound
+function sound(src,loop) {
+	this.sound = document.createElement("audio");
+	this.sound.src = src;
+	this.sound.setAttribute("preload", "auto");
+	this.sound.setAttribute("controls", "none");
+	this.sound.style.display = "none";
+	if(loop) this.sound.loop = true;
+	document.body.appendChild(this.sound);
+	this.play = function(){
+	  this.sound.play();
+	}
+	this.stop = function(){
+	  this.sound.pause();
+	}
+}
+
+//restart (refreshes page)
+$('#spooky-birb-restart-img').click(function() {
+    location.reload();
+});
diff --git a/spooky-music.mp3 b/spooky-music.mp3
diff --git a/styles.css b/styles.css
@@ -628,4 +628,46 @@ footer {
 
 .soc {
   background-color: rgb(236, 119, 10);
+}
+
+#spooky-birb {
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.spooky-thanks {
+  width: 100%;
+  height: 400px;
+  text-align: center;
+  background-color: rgb(236, 119, 10);
+}
+.spooky-thanks-item {
+  width: 100%;
+  margin: 30px;
+}
+.spooky-thanks-item a{
+  text-decoration: none;
+  color: white;
+  padding: 10px 20px;
+  border: 1px solid #000;
+  border-radius: 5px;
+  transition: all 0.2s ease-in-out;
+}
+.spooky-thanks-item a:hover {
+  background-color: #000;
+  color: orange;
+}
+#spooky-birb-restart-img{
+  position: absolute;
+  top:235px;
+}
+.spooky-controls {
+  width: 100%;
+  text-align: center;
+  color: white;
+}
+.spooky-controls-item {
+  width: 100%;
+  margin: 10px;
 }