PrototypeBattle

Prototype battle for an RPG. Works very similar to sword and sorcery does it.

by Sam Fereday

HTML

<ul id="output"></ul>
<button id="attack">
  Attack
</button>
<button id="defend">
  Defend
</button>
<button id="start">
  Start
</button>
<button id="stop">
  Stop
</button>

CSS

html,
body {
  font: 75%/1.2em arial;
}

#output {
  padding: 1em;
  margin-bottom: 1em;
  height: 30em;
  background: #333;
  overflow-y: auto;
}

li {
  padding-bottom: 1em;
  color: #999;
}

span {
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
}

JavaScript

console.clear();

var op = document.getElementById("output");
var start = document.getElementById("start");
var stop = document.getElementById("stop");

function logger(str) {
  op.innerHTML += "<li><span>" + str + "</span> - " + new Date() + "</li>";
  op.scrollTop = op.scrollHeight;
}

// ...
var Actor = function(options) {
  this.name = options.name;
  this.automated = options.automated;
  this.stop = false;
  this.defending = false;
  this.attacking = false;
  this.willBlock = false;
  this.vulnerable = false;
  this.timeSince = 0;
};

Actor.prototype.counterAttack = function(actionId) {

  if(this.attacking)
    return;
    
  logger(this.name + " launched a counter attack!");
    
  this.attack(actionId);

}

Actor.prototype.attack = function(actionId) {

  // If defending or attack has been called from elsewhere, don't do it again.
  if (this.defending || this.attacking)
    return;

  logger(this.name + " launched an attack!");

  var self = this;
  var animLength = 500; // Gets from data of move.

  // Starts animation event.
  // this.startAttack();
  this.attacking = true;

  // Deflections... start and end time.
  // Start opportunity moment (only allow for player to use?)

  // Launch time of impact through animation.
  setTimeout(function() {
    self.impactEvent();
  }, animLength / 3);

  // Event fires when animation timer done.
  setTimeout(function() {
    // self.endAttack();
    self.attacking = false;
    logger(self.name + "'s attack stopped.");
  }, animLength);

  // Opportunity
  // MUST always be less than the time given for the next action.
  setTimeout(function() {
    // .. opportunity - get the rest working first!
    self.oppEvent();
    self.vulnerable = true;
    setTimeout(function() {
      // self.endOpp();
      self.vulnerable = false;
    }, (animLength / 2));
  }, (animLength / 4)); // Arbitrary. Needs more control.

}

Actor.prototype.defend = function(time) {

  if (this.defending || this.attacking)
    return;

  var...