Initial

avolon42x · Jan 23, 2019 · 8cad9a2 · 8cad9a2
commit 8cad9a2
Show file tree

Hide file tree

Showing 17 changed files with 13,570 additions and 0 deletions.
diff --git a/images/1331900690_fire.png b/images/1331900690_fire.png
diff --git a/images/1331900805_cross.png b/images/1331900805_cross.png
diff --git a/images/1331901174_bullet_red.png b/images/1331901174_bullet_red.png
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<html>
+	<head>
+		<title>Battleship</title>
+
+		<script type="text/javascript" src="javascripts/ext/underscore.js"></script>
+		<script type="text/javascript" src="javascripts/ext/jquery-1.7.1.js"></script>
+		<script type="text/javascript" src="javascripts/ext/jshashtable-2.1.js"></script>
+		<script type="text/javascript" src="javascripts/ext/jquery.numeric.js"></script>
+		<script type="text/javascript" src="javascripts/ext/jquery.numberformatter.js"></script>
+		<script type="text/javascript" src="javascripts/ext/backbone.js"></script>
+		<script type="text/javascript" src="javascripts/ext/icanhaz.js"></script>
+
+		<script type="text/javascript" src="javascripts/app/Boat.js"></script>
+		<script type="text/javascript" src="javascripts/app/Cell.js"></script>
+		<script type="text/javascript" src="javascripts/app/Board.js"></script>
+		<script type="text/javascript" src="javascripts/app/Game.js"></script>
+
+		<script type="text/javascript" src="javascripts/boot.js"></script>
+
+
+		<link rel="stylesheet" href="stylesheets/main.css" type="text/css" media="screen" charset="utf-8">
+
+		<script id="board" type="text/html">
+			<td>{{ name }}</td>
+		</script>
+	</head>
+	<body>
+		<label for="shotsPerIteration">Shots per iteration: </label>
+		<input id="shotsPerIteration" type="number" min="1" max="20" value="20"/>
+		<button id="newGame">New game</button>
+		<br/>
+
+		<div id="container"></div>
+
+		<table id="info">
+			<tr>
+				<td id="endGameResult" colspan="2">&nbsp;</td>
+			</tr>
+			<tr>
+				<td>Total shots remaining:</td>
+				<td id="totalShotsRemaining">&nbsp;</td>
+			</tr>
+			<tr>
+				<td>Shots remaining for iteration:</td>
+				<td id="shotsRemainingForIteration">&nbsp;</td>
+			</tr>
+			<tr>
+				<td>Balance:</td>
+				<td id="funds">&nbsp;</td>
+			</tr>
+
+		</table>
+	</body>
+
+	<script type="text/javascript">
+
+  		var _gaq = _gaq || [];
+  		_gaq.push(['_setAccount', 'UA-38246571-1']);
+  		_gaq.push(['_trackPageview']);
+
+  		(function() {
+    		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  		})();
+	</script>
+</html>
diff --git a/javascripts/app/Board.js b/javascripts/app/Board.js
@@ -0,0 +1,139 @@
+var Board = Backbone.Model.extend({
+  defaults: {
+    gridSize: {
+      x: 10,
+      y: 10
+    }
+  },
+  initialize: function(args) {
+    this.fleet = [];
+    this.grid = [];
+    this.targets = [];
+    _.bindAll(this, "fire");
+
+    for (var y = 0; y < this.get('gridSize').y; y++) {
+      this.grid[y] = [];
+      for (var x = 0; x < this.get('gridSize').x; x++) {
+        var cell = new Cell({x: x, y: y});
+        cell.bind("fire", this.fire);
+        this.grid[y][x] = cell;
+      }
+    }
+  },
+  getGrid: function() {
+    return this.grid;
+  },
+  getCell: function(x, y) {
+    if(this.grid[y] === undefined) {
+      return undefined;
+    } else {
+      return this.grid[y][x];
+    }
+  },
+  fire: function(cell) {
+    this.targets.push(cell);
+
+    this.trigger("fire");
+  },
+  showFeedback: function() {
+    _(this.targets).each(function(cell) {
+      cell.updateState();
+    });
+    this.targets = [];
+  },
+  addBoat: function(boat) {
+    this.fleet.push(boat);
+    var cells = this.getCellsForBoat(boat);
+    boat.setCells(cells);
+    this.trigger("add:boat", boat);
+  },
+  getCellsForBoat: function(boat) {
+    var cells = [];
+    if (boat.get("direction") === "horizontal") {
+      for(var i = boat.get("x"); i < boat.get("x") + boat.length(); i++) {
+        cells.push(this.getCell(i, boat.get("y")));
+      }
+    } else {
+      for(var i = boat.get("y"); i < boat.get("y") + boat.length(); i++) {
+        cells.push(this.getCell(boat.get("x"), i));
+      }
+    }
+    return cells;
+  },
+  validBoatPlacement: function(boat) {
+    var self = this;
+    var cells = this.getCellsForBoat(boat);
+    return !_(cells).any(function(cell) {
+
+      if (!cell) {
+        return true;
+      }
+      var edgeCells = [];
+      edgeCells.push(self.getCell(cell.get("x") + 1, cell.get("y")));
+      edgeCells.push(self.getCell(cell.get("x") - 1, cell.get("y")));
+      edgeCells.push(self.getCell(cell.get("x"), cell.get("y") + 1));
+      edgeCells.push(self.getCell(cell.get("x"), cell.get("y") - 1));
+
+      return _(edgeCells).any(function(cell) {
+        return cell === undefined || cell.has("boat");
+      });
+
+    });
+  },
+  fleetSize: function() {
+    return this.fleet.length;
+  },
+  disable: function() {
+    this.set("disabled", true);
+    for (var y = 0; y < this.get('gridSize').y; y++) {
+      for (var x = 0; x < this.get('gridSize').x; x++) {
+        this.grid[y][x].set("disabled", true);
+      }
+    }
+  },
+  showFleet: function() {
+    _(this.fleet).each(function(boat) {
+      boat.set("visible", true);
+    });
+  }
+});
+
+var BoardView = Backbone.View.extend({
+  tagName: "table",
+  className: "board",
+  initialize: function() {
+    _.bindAll(this, "removeBoard");
+    this.model.bind("destroy", this.removeBoard);
+  },
+  removeBoard: function() {
+    this.remove();
+  },
+  renderHorizontalGuide: function() {
+    var guide = $("<tr />").addClass("horizontal-guide");
+    guide.append($("<td class='empty' />"));
+
+    _(this.model.get('gridSize').x).times(function(i) {
+      guide.append($("<td />").addClass("guide").html(String.fromCharCode(65 + i)));
+    });
+
+    this.$el.append(guide);
+  },
+  renderVerticalGuide: function(tr, i) {
+    tr.append($("<td class='guide'/>").html(i + 1));
+  },
+  render: function() {
+    var self = this;
+
+    this.renderHorizontalGuide();
+
+    _(this.model.getGrid()).each(function(row, i) {
+      var tr = $("<tr />");
+      self.renderVerticalGuide(tr, i);
+      _(row).each(function(cell) {
+        tr.append(new CellView({model: cell}).render().el);
+      });
+      self.$el.append(tr);
+    });
+    return this;
+  }
+});
diff --git a/javascripts/app/Boat.js b/javascripts/app/Boat.js
@@ -0,0 +1,35 @@
+var Boat = Backbone.Model.extend({
+  initialize: function(args) {
+    this.hits = 0;
+  },
+  boatLengths: {
+    "aircraft-carrier": 5,
+    "battleship": 4,
+    "submarine": 3,
+    // "cruiser": 3,
+    "destroyer": 2
+  },
+  defaults: {
+    "visible": false
+  },
+  length: function() {
+    return this.boatLengths[this.get("type")];
+  },
+  setCells: function(cells) {
+    this.cells = cells;
+    var self = this;
+    _(cells).each(function(cell) {
+      cell.set("boat", self);
+    });
+  },
+  hit: function(cell) {
+    this.hits++;
+    if (this.sunken()) {
+      this.set("visible", true);
+      this.trigger("sunken", this);
+    }
+  },
+  sunken: function() {
+    return this.cells.length <= this.hits;
+  }
+});
diff --git a/javascripts/app/Cell.js b/javascripts/app/Cell.js
@@ -0,0 +1,59 @@
+var Cell = Backbone.Model.extend({
+  defaults: {
+    state: "empty"
+  },
+  fire: function() {
+    this.trigger("fire", this);
+  },
+  updateState: function() {
+    if (this.has("boat")) {
+      this.get("boat").hit(this);
+      this.set("state", "hit");
+    } else {
+      this.set("state", "miss");
+    }
+  }
+});
+
+var CellView = Backbone.View.extend({
+  tagName: "td",
+  className: "cell",
+  events: {
+    "click": "fire"
+  },
+  initialize: function() {
+    _.bindAll(this, "renderBoat", "updateState", "disable");
+    this.model.bind("change:boat", this.renderBoat)
+    this.model.bind("change:state", this.updateState)
+    this.model.bind("change:disabled", this.disable);
+  },
+  render: function() {
+    this.$el.attr("id", "cell-" + this.model.get("x") + "-" + this.model.get("y"));
+    this.renderBoat();
+    return this;
+  },
+  renderBoat: function() {
+    if (this.model.has('boat')) {
+      if (this.model.get("boat").get("visible")) {
+        this.$el.addClass("showBoat");
+        this.$el.addClass(this.model.get("boat").get("type"));
+      }
+      this.model.get('boat').bind("change:visible", this.renderBoat);
+    }
+  },
+  updateState: function() {
+    if (this.model.get("state") == "hit") {
+      this.$el.addClass("hit");
+    } else if (this.model.get("state") == "miss") {
+      this.$el.addClass("miss");
+    }
+  },
+  fire: function() {
+    this.$el.addClass("target");
+    this.model.fire();
+    this.$el.unbind("click");
+  },
+  disable: function() {
+    this.$el.unbind("click");
+  }
+});