Initial version

9 years ago · 99e74c71f8
4 changed files with 279 additions and 0 deletions
--- a/carrier.png
+++ b/carrier.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width">
+		<script src="https://cdn.rawgit.com/dgsprb/quick/master/releases/quick-2.0.3.js"></script>
+
+		<style>
+			#assets {
+				height: 1px;
+				overflow: hidden;
+				visibility: hidden;
+				width: 1px;
+			}
+
+			body {
+				background-color: Black;
+				margin: 0;
+				overflow: hidden;
+				padding: 0;
+			}
+
+			canvas {
+				cursor: none;
+			}
+
+			div#score {
+				position: fixed;
+				top: 0;
+				left: 40px;
+				color: white;
+				text-shadow: 5px 5px 5px black;
+				font-size: 10em;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id='score'>0</div>
+
+		<div align="center">
+			<canvas id="canvas" width="640" height="400"></canvas>
+		</div>
+
+		<div id="assets">
+			<img id="ship" src="carrier.png" width="32" />
+			<img id='rock' src='ss_browncave.png' width='64' />
+
+			<!-- <audio id="sound0" src="sounds/sound0.ogg"></audio> -->
+
+			<!-- <audio id="theme0" src="themes/theme0.ogg" loop></audio> -->
+		</div>
+
+		<script src="main.js"></script>
+	</body>
+</html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,222 @@
+(function () {
+	"use strict";
+
+	// imports
+	var CommandEnum = com.dgsprb.quick.CommandEnum;
+	var Quick = com.dgsprb.quick.Quick;
+	var GameObject = com.dgsprb.quick.GameObject;
+	var Scene = com.dgsprb.quick.Scene;
+	var BaseTransition = com.dgsprb.quick.BaseTransition;
+	var Rect = com.dgsprb.quick.Rect;
+
+	var COLUMN_WIDTH = 20;			/* with of a column */
+	var COLUMN_VARIATION = 50;		/* how much a column can bounce up or down */
+	var PLAYER_SPEED = 5;			/* how much the player ship moves */
+	var CAVE_DECAY = 2;				/* how much the cave will shrink over time */
+	var CAVE_SPEED = 2;				/* how much the cave scrolls */
+
+	// functions
+	function main() {
+		Quick.setName("Skel");
+		Quick.setNumberOfLayers(2);
+		Quick.init(function () { return new GameScene() });
+	}
+
+	// class GameScene extends Scene
+	var GameScene = (function () {
+		function GameScene() {
+			Scene.call(this);
+			var background = new Background();
+			this.add(background);
+			this.player = new Player();
+			this.cave = [];
+			var pos = 0;
+			var previous = null;
+			while (pos < Quick.getCanvasWidth() + COLUMN_WIDTH) {
+				var wall = new Column(previous);
+				wall.setRight(Quick.getCanvasWidth() + pos);
+				pos += COLUMN_WIDTH;
+				this.cave.push(wall);
+				this.add(wall);
+				previous = wall;
+			}
+
+			this.player.setLayerIndex(1);
+			this.add(this.player);
+		}; GameScene.prototype = Object.create(Scene.prototype);
+
+		GameScene.prototype.getNext = function () {
+			return new GameScene();
+		};
+
+		GameScene.prototype.getTransition = function () {
+			return new BaseTransition();
+		};
+
+		GameScene.prototype.popWall = function () {
+			this.cave.shift();
+		};
+
+		GameScene.prototype.addWall = function (wall) {
+			this.cave.push(wall);
+			this.add(wall);
+		};
+
+		GameScene.prototype.gameOver = function () {
+			this.cave.forEach(function(elem, idx, array) {
+				elem.stop();
+				elem.top.stop();
+				elem.bottom.stop();
+			});
+		};
+
+		GameScene.prototype.speedUp = function () {
+			this.cave.forEach(function(elem, idx, array) {
+				elem.setSpeedX(-(CAVE_SPEED * 2));
+			});
+		};
+
+		GameScene.prototype.speedDown = function () {
+			this.cave.forEach(function(elem, idx, array) {
+				elem.setSpeedX(-CAVE_SPEED);
+			});
+		};
+
+		return GameScene;
+	})();
+
+	// class Background extends GameObject
+	var Background = (function () {
+		function Background() {
+			GameObject.call(this);
+			this.setColor("#101");
+			this.setHeight(Quick.getCanvasHeight());
+			this.setWidth(Quick.getCanvasWidth());
+		}; Background.prototype = Object.create(GameObject.prototype);
+
+		return Background;
+	})();
+
+	var Cave = (function () {
+		function Cave() {
+			GameObject.call(this);
+			this.addTag('cave');
+			this.setColor('#600613')
+			this.setHeight(Quick.getCanvasHeight());
+			this.setSolid();
+		}; Cave.prototype = Object.create(GameObject.prototype);
+
+		return Cave;
+	})();
+
+	var Column = (function () {
+		function Column (previous) {
+			GameObject.call(this);
+			var top,
+			    height;
+			if (previous) {
+				var top = previous.getTop() + (Quick.random(COLUMN_VARIATION) - (COLUMN_VARIATION / 2));
+				if (top < 0) {
+					top = 0;
+				}
+				height = previous.getHeight() - CAVE_DECAY;
+				if (height < 32) {
+					height = 32;
+				}
+			} else {
+				top = Quick.random(Quick.getCanvasHeight() / 4);
+				height = Quick.getCanvasHeight() / 2;
+			}
+
+			this.addTag('column');
+			this.setHeight(height);
+			this.setTop(top);
+			this.setWidth(COLUMN_WIDTH);
+			this.setColor('#1a1a1a');
+			this.setLeft(Quick.getCanvasRight());
+			this.setSpeedX(-CAVE_SPEED);
+			this.setBoundary(new Rect(Quick.getCanvasWidth() % COLUMN_WIDTH, 0,
+							 		  Quick.getCanvasWidth() * 2, Quick.getCanvasHeight()));
+		}; Column.prototype = Object.create(GameObject.prototype);
+
+		Column.prototype.init = function () {
+			this.top = new Cave();
+			this.top.setBottom(this.getTop() - 1);
+			this.top.setSpeedX(this.getSpeedX());
+			this.top.setWidth(this.getWidth());
+			this.top.setLeft(this.getLeft());
+			this.top.setSolid();
+			this.top.addTag('cave');
+			this.getScene().add(this.top);
+
+			this.bottom = new Cave();
+			this.bottom.setTop(this.getBottom() + 1);
+			this.bottom.setSpeedX(this.getSpeedX());
+			this.bottom.setWidth(this.getWidth());
+			this.bottom.setLeft(this.getLeft());
+			this.bottom.setSolid();
+			this.bottom.addTag('cave');
+			this.getScene().add(this.bottom);
+		};
+
+		Column.prototype.offBoundary = function () {
+			this.expire();
+			this.top.expire();
+			this.bottom.expire();
+			this.getScene().addWall(new Column(this));
+			this.getScene().popWall();
+			this.getScene().player.upScore();
+		};
+
+		return Column;
+	})();
+
+	// class Player extends GameObject
+	var Player = (function () {
+		function Player() {
+			GameObject.call(this);
+			this.controller = Quick.getController();
+			this.setImageId("ship");
+			this.setX(50);
+			this.setY(Quick.getCanvasHeight() / 2);
+			this.setSolid();
+			this.isDead = false;
+			this.score = 0;
+		}; Player.prototype = Object.create(GameObject.prototype);
+
+		Player.prototype.respond = function () {
+			if (!this.isDead) {
+				if (this.controller.keyDown(CommandEnum.UP) && this.getTop() > 0) {
+					this.moveY(-PLAYER_SPEED);
+				} else if (this.controller.keyDown(CommandEnum.DOWN) && this.getBottom() < Quick.getCanvasHeight()) {
+					this.moveY(PLAYER_SPEED);
+				} else if (this.controller.keyPush(CommandEnum.RIGHT)) {
+					this.getScene().speedUp();
+				} else if (this.controller.keyUp(CommandEnum.RIGHT)) {
+					this.getScene().speedDown();
+				}
+			}
+		};
+
+		// override
+		Player.prototype.update = function () {
+			this.respond();
+		};
+
+		Player.prototype.onCollision = function (other) {
+			if (other.hasTag('cave')) {
+				this.getScene().gameOver();
+			}
+			this.isDead = true;
+		};
+
+		Player.prototype.upScore = function () {
+			this.score += 1;
+			document.getElementById('score').innerHTML = this.score;
+		}
+
+		return Player;
+	})();
+
+	main();
+})();
--- a/ss_browncave.png
+++ b/ss_browncave.png