Untitled

<!DOCTYPE html>
<html lang="en">
<head>

<!----
Explanations
HTML code: this time we've used an oninput in each input field, and an onchange attribute on the <select> HTML drop down menu:

<div id="controls">
   <label for="nbBalls">Number of balls: </label>
   <input type="number" min=1 max=30
         value=10 id="nbBalls"
         oninput="changeNbBalls(this.value);">
   <p></p>
   <label for="nbBalls">Player color: </label>
   <input type="color" value='#FF0000'
          oninput="changePlayerColor(this.value);">
   <p></p>
   <label for="nbBalls">Color of ball to eat: </label>
   <select onchange="changeColorToEat(this.value);">
      <option value='red'>red</option>
      <option value='blue'>blue</option>
      <option value='green'>green</option>
   </select>
   <p></p>

   <label for="nbBalls">Change ball speed: </label>
   - <input type="range" value='1'
            min=0.1 max=3 step=0.1
            oninput="changeBallSpeed(this.value);"> +
   <p></p>
</div>
JavaScript code: we've added some new variables in order to get closer to a real game with a goal, levels, game over menu and so on.

var initialNumberOfBalls; // number of balls at the beginning
var globalSpeedMutiplier = 1; // will change when we move the speed
                              // slider
var colorToEat = 'red';       // color of the "good" balls to eat
var wrongBallsEaten = goodBallsEaten = 0; //number of good/bad balls
                                          // eaten
var numberOfGoodBalls;        // number of good balls in the set
And here are the callback functions called when you use the input fields:

function changeNbBalls(nb) {
  startGame(nb);
}

function changeColorToEat(color) {
  colorToEat = color;
  startGame(initialNumberOfBalls);
}

function changePlayerColor(color) {
  player.color = color;
}

function changeBallSpeed(coef) {
  globalSpeedMutiplier = coef;
}
Each time we change the number of balls in the game, or the color of the balls you need to eat, we need to restart the game.

Here is the startGame(nb_balls) function:

function startGame(nb) {
  do {
     balls = createBalls(nb);
     initialNumberOfBalls = nb;
     numberOfGoodBalls = countNumberOfGoodBalls(balls, colorToEat);
  } while(numberOfGoodBalls === 0); // in case no good ball in the set
  wrongBallsEaten = goodBallsEaten = 0;
}
... and here is the function that counts the number of good balls in the newly created set of balls:

function countNumberOfGoodBalls(balls, colorToEat) {
  var nb = 0;
  balls.forEach(function(b) {
    if(b.color === colorToEat) // we count the number of balls
    nb++;                      // of this color in the balls array
  });
  return nb;                   // return this number to the caller
}

-->

  <meta charset="utf-8">
  <title>Draw a monster in a canvas</title>
</head>
<body>
  <div id="controls">
    <label for="nbBalls">Number of balls: </label>
    <input type="number" min=1 max=30
           value=10 id="nbBalls"
           oninput="changeNbBalls(this.value);">
    <p></p>
   <label for="colorChooser">Player color: </label>
    <input type="color" value='#FF0000'
           oninput="changePlayerColor(this.value);" id="colorChooser">
    <p></p>
      <label for="selectColorOfBallToEat">Color of ball to eat: </label>
      <select onchange="changeColorToEat(this.value);" id="selectColorOfBallToEat">
        <option value='red'>red</option>
        <option value='blue'>blue</option>
        <option value='green'>green</option>
    </select>
    <p></p>

   <label for="ballSpeed">Change ball speed: </label>
    - <input type="range" value='1'
             min=0.1 max=3 step=0.1
           oninput="changeBallSpeed(this.value);"
             id="ballSpeed"> +
    <p></p>

  </div>
  <canvas id="myCanvas"  width="400" height="400"></canvas>
</body>
</html>