Miles' homework

A fun game he had for homework that I wanted to play again

by sperske

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<div class='row'>
  <div class='col'>
    <table id='game'></table>
  </div>
  <div class='col'>
    <button id='next' class='btn btn-success'>roll dice</button>
    
    <span id="last_roll"></span>
    <ul class="list-unstyled">
      <li class="media">
        <img class="mr-3" data-src="holder.js/45x45?bg=007bff&text=1" alt="">
        <div class="media-body">
          <h5 class="mt-0 mb-1">Player 1</h5>
        </div>
      </li>
      <li class="media">
        <img class="mr-3" data-src="holder.js/45x45?bg=ffc107&text=2" alt="">
        <div class="media-body">
          <h5 class="mt-0 mb-1">Player 2</h5>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS

table#game td {
  text-align: center;
  height: 45px;
  width: 45px;
}

JavaScript

var game = $('#game')
var next = $('#next')
var last_roll = $('#last_roll')
var faces = ['&#9856;', '&#9857;', '&#9858;', '&#9859;', '&#9860;', '&#9861;']

function roll () {
  return Math.floor(Math.random() * 6)+1
}
function build (game, size) {
  for (var row = 0; row < size; row++) {
    var html = '<tr>'
    for (var col = 0; col < size; col++) {
      html += '<td>'+(20-(roll()+roll()))+'</td>'
    }
    html += '</tr>'
    game.append(html)
  }
}
build(game, 6)