Add files via upload

RedEdge967 · Dec 23, 2021 · 6422ea5 · 6422ea5
1 parent c2a8a12
commit 6422ea5
Show file tree

Hide file tree

Showing 39 changed files with 1,268 additions and 0 deletions.
diff --git a/audio/60-theme-song.mp3 b/audio/60-theme-song.mp3
diff --git a/audio/amazing-spider-man-2.mp3 b/audio/amazing-spider-man-2.mp3
diff --git a/audio/animated-series-theme.mp3 b/audio/animated-series-theme.mp3
diff --git a/audio/old-theme.mp3 b/audio/old-theme.mp3
diff --git a/audio/shooting-web.mp3 b/audio/shooting-web.mp3
diff --git a/css/spiderman-game.css b/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/fonts/Adventure.ttf b/fonts/Adventure.ttf
diff --git a/fonts/pixel.otf b/fonts/pixel.otf
diff --git a/images/background.jpg b/images/background.jpg
diff --git a/images/background.png b/images/background.png
diff --git a/images/building.png b/images/building.png
diff --git a/images/doctor-octopus.png b/images/doctor-octopus.png
diff --git a/images/goblin.png b/images/goblin.png
diff --git a/images/heart.png b/images/heart.png
diff --git a/images/jump.png b/images/jump.png
diff --git a/images/knife.png b/images/knife.png
diff --git a/images/mysterio.png b/images/mysterio.png
diff --git a/images/running-change-step.png b/images/running-change-step.png
diff --git a/images/running-left-step.png b/images/running-left-step.png
diff --git a/images/running-right-step.png b/images/running-right-step.png
diff --git a/images/sandman.png b/images/sandman.png
diff --git a/images/shoot-change-step.png b/images/shoot-change-step.png
diff --git a/images/shoot-jump.png b/images/shoot-jump.png
diff --git a/images/shoot-left-step.png b/images/shoot-left-step.png
diff --git a/images/shoot-right-step.png b/images/shoot-right-step.png
diff --git a/images/shoot.png b/images/shoot.png
diff --git a/images/slide.png b/images/slide.png
diff --git a/images/spider-head.jpeg b/images/spider-head.jpeg
diff --git a/images/spider-head.png b/images/spider-head.png
diff --git a/images/standing.png b/images/standing.png
diff --git a/images/thug-light.png b/images/thug-light.png
diff --git a/images/thug.png b/images/thug.png
diff --git a/images/venom-original.png b/images/venom-original.png
diff --git a/images/venom.png b/images/venom.png
diff --git a/images/wall.jpg b/images/wall.jpg
diff --git a/images/web.png b/images/web.png
diff --git a/images/whole.psd b/images/whole.psd
diff --git a/index.html b/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Welcome to Mini Spidey!</title>
+	<link rel="shortcut icon" href="images/standing.png" />
+</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 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 class="link">
+			View Source on 
+			<a href="https://github.com/RedEdge967/mini-spidey" target="_blank">Github</a>
+		</div>
+	</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>