S-Wizard Prototype

by Sam Fereday

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.10/chance.min.js"></script>
<div id="health-container">
  <div id="you"></div>
  <div id="them"></div>
</div>
<div id="container"></div>
<button id="start">
  Begin
</button>

SCSS

body {
  padding: 0;
  margin: 0;
  font: 85% /1.4em arial;
  text-align: center;
}

* {
  box-sizing: border-box;
}

#container {
  width: 100%;
  padding-top: 5em;
  padding-bottom: 5em;
  text-align: center;
  clear: both;
}

.cell {
  width: 32px;
  height: 32px;
  border: 1px solid red;
  display: inline-block;
  opacity: 0;
  text-align: center;
  transition: all 0.2s ease;
  &.active {
    opacity: 1;
  }
}

#health-container {
  width: 100%;
  div {
    width: 50%;
  }
  #you {
    float: left;
  }
  #them {
    float: right;
  }
}

JavaScript

let ch = new Chance();

///
class Symbol {

  constructor(n) {
    this.n = n;
    this.el = document.createElement('div');
    this.el.classList.add('cell');
    this.el.innerHTML = n;
  }

  hide() {
    this.el.classList.remove('active');
  }

  show() {
    this.el.classList.add('active');
  }

}

///
/*
the process:
Symbol are better than numbers for processing, more fun too if it's a game. Could even use arrows and / or buttons from keyboard.
*/
let cont = document.getElementById('container');
let fixedMembers = [];

for (let i = 0; i < 5; i++) {
  fixedMembers.push(new Symbol(i));
  cont.appendChild(fixedMembers[i].el);
}

/// Generate the sequence
let seq = fixedMembers.map(x => x.n);

// Make it happen
let inc = 0;
let sequenceRunning = false;

function playSequence() {

  if (inc > fixedMembers.length - 1) {
    sequenceRunning = false;
    inc = 0;
    return;
  } else {
    sequenceRunning = true;
  }

  fixedMembers[seq[inc]].show();

  setTimeout(function() {

    fixedMembers[seq[inc]].hide();
    inc += 1;

    playSequence();

  }, 250);

}

function checkSequence() {

  // ...

}

//...
document.getElementById('start').addEventListener('click', function() {

  if (sequenceRunning)
    return;

  // Shuffle it
  seq = chance.shuffle(seq);

  // Do it
  playSequence();

});

// https://github.com/lostdecade/simple_canvas_game
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
	bgReady = true;
};
bgImage.src = "https://github.com/lostdecade/simple_canvas_game/tree/master/images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
	heroReady = true;
};
heroImage.src = "https://github.com/lostdecade/simple_canvas_game/tree/master/images/hero.png";

// Monster...