Merge pull request #2173 from Damini2004/Spider-man-go

Spider man go Added
Sulagna-Dutta-Roy · Jul 7, 2024 · df88e7f · df88e7f
2 parents 0060181 + 462220c
commit df88e7f
Show file tree

Hide file tree

Showing 12 changed files with 1,341 additions and 0 deletions.
diff --git a/Spider Man Go/audio/60-theme-song.mp3 b/Spider Man Go/audio/60-theme-song.mp3
diff --git a/Spider Man Go/audio/amazing-spider-man-2.mp3 b/Spider Man Go/audio/amazing-spider-man-2.mp3
diff --git a/Spider Man Go/audio/animated-series-theme.mp3 b/Spider Man Go/audio/animated-series-theme.mp3
diff --git a/Spider Man Go/audio/old-theme.mp3 b/Spider Man Go/audio/old-theme.mp3
diff --git a/Spider Man Go/audio/shooting-web.mp3 b/Spider Man Go/audio/shooting-web.mp3
diff --git a/Spider Man Go/css/spiderman-game.css b/Spider Man Go/css/spiderman-game.css
@@ -0,0 +1,57 @@
+@font-face {
+	font-family: SpidermanGamePixelFont;
+	src: url(../fonts/pixel.otf);
+}
+
+.spiderman-game-menu-container,
+.spiderman-game-menu-container * {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    cursor: default;
+}
+
+.spiderman-game-menu-container {
+	position: absolute;
+	display: none;
+	height: auto;
+
+	-webkit-transform: translate(-50%, -50%);
+	-moz-transform: translate(-50%, -50%);
+	-ms-transform: translate(-50%, -50%);
+	-o-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+}
+
+.spiderman-game-menu-title {
+	text-align: center;
+	font-size: 20px;
+	line-height: 60px;
+	font-family: SpidermanGamePixelFont;
+	color: white;
+	display: block;
+	padding: 5px;
+}
+
+.spiderman-game-menu-button {
+    line-height: 30px;
+    font-size: 15px;
+    text-align: center;
+    font-family: SpidermanGamePixelFont;
+    color: white;
+}
+
+.spiderman-game-menu-button:hover {
+    color: red;
+}
+
+.spiderman-game-menu-button:active {
+	color: rgb(200, 0, 0);
+}
diff --git a/Spider Man Go/fonts/Adventure.ttf b/Spider Man Go/fonts/Adventure.ttf
diff --git a/Spider Man Go/fonts/pixel.otf b/Spider Man Go/fonts/pixel.otf
diff --git a/Spider Man Go/index.html b/Spider Man Go/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="description"
+                content="A Simple Spiderman Game in HTML5, CSS3 and Javascript" />
+        <meta name="author" content="Chandula Janith (RedEdge967)" />
+	<title>Spider-Man Game | A spiderman game to fight with more Villains of Spider-Man</title>
+	<link rel="shortcut icon" href="images/spider-head.png" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+<link rel="stylesheet" href="styles.css">
+</head>
+<style type="text/css">
+	html,
+	body {
+		height: 100%;
+		width: 100%;
+		margin: 0;
+		font-size: 0;
+		background: #000;
+	}
+
+	.canvas-wrapper {
+		float: left;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+
+		-webkit-transform: translate(-50%, -50%);
+		-moz-transform: translate(-50%, -50%);
+		-ms-transform: translate(-50%, -50%);
+		-o-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+	}
+
+	.key {
+	    height: 30px;
+	    min-width: 20px;
+	    line-height: 30px;
+	    text-align: center;
+	    border: 1px solid #ccc;
+	    border-bottom: 3px solid #bbb;
+	    background: white;
+	    display: inline-block;
+	    padding: 0 5px;
+	    border-radius: 5px;
+	    box-shadow: inset 0 -1px 0 #ccc;
+	    color: #333;
+	    font-weight: bold;
+	}
+
+	.key.spacebar {
+		padding: 0 40px;
+	}
+
+	.keyboard {
+		margin: 5px 0;
+		font-size: 15px;
+	    font-family: Helvetica;
+	    color: white;
+	}
+
+	.action {
+		margin-right: 15px;
+	}
+
+	.link {
+		width: 100%;
+		text-align: center;
+		font-size: 20px;
+		color: #ccc;
+		font-family: SpidermanGamePixelFont, Helvetica, Arial;
+		margin-top: 20px;
+	}
+</style>
+<body>
+	<div style="text-align: left; margin-left: 40px;
+        margin-top: 30px;
+        font-size: 30px;
+        padding: 5px; "><a href=""><i style="color:white;" class="fas fa-home home-icon"></i></a></div>
+	<div class="canvas-wrapper">
+		<div class="keyboard">
+			<div class="key spacebar">Spacebar</div>
+			<span class="action">- Shoot</span>
+
+			<div class="key">←</div>
+			<div class="key">→</div>
+			<span class="action">- Left/Right</span>
+
+			<div class="key">↑</div>
+			<span class="action">- Jump</span>
+
+			<div class="key">Esc</div>
+			<span class="action">- Pause</span>
+		</div>
+		<canvas id="canvas"></canvas>
+
+	</div>
+</body>
+<script type="text/javascript" src="spiderman-game.js"></script>
+<script type="text/javascript">
+
+var game = new SpidermanGame({
+	canvas: "#canvas"
+});
+game.load();
+
+</script>
+</html>
diff --git a/Spider Man Go/manifest.json b/Spider Man Go/manifest.json
@@ -0,0 +1,10 @@
+{
+    "name": "Spider Man Go",
+    "short_name": "spider man go",
+    "description": "A fun game to play.",
+    "start_url": "index.html",
+    "display": "standalone",
+    "background_color": "#f9f9f9",
+    "theme_color": "#006400"
+  }
+