Practicing Prototypes

Finally, let’s work on this and objects linked via prototype (Chapter 4, Pillar 2).

Define a slot machine with three reels that can individually spin(), and then display() the current contents of all the reels.

The basic behavior of a single reel is defined in the reel object below. But the slot machine needs individual reels—objects that delegate to reel, and which each have a position property.

A reel only knows how to display() its current slot symbol, but a slot machine typically shows three symbols per reel: the current slot (position), one slot above (position - 1), and one slot below (position + 1). So displaying the slot machine should end up displaying a 3 x 3 grid of slot symbols.

  1. function randMax(max) {
  2.     return Math.trunc(1E9 * Math.random()) % max;
  3. }
  5. var reel = {
  6.     symbols: [
  7.         "♠", "♥", "♦", "♣", "☺", "★", "☾", "☀"
  8.     ],
  9.     spin() {
  10.         if (this.position == null) {
  11.             this.position = randMax(
  12.                 this.symbols.length - 1
  13.             );
  14.         }
  15.         this.position = (
  16.             this.position + 100 + randMax(100)
  17.         ) % this.symbols.length;
  18.     },
  19.     display() {
  20.         if (this.position == null) {
  21.             this.position = randMax(
  22.                 this.symbols.length - 1
  23.             );
  24.         }
  25.         return this.symbols[this.position];
  26.     }
  27. };
  29. var slotMachine = {
  30.     reels: [
  31.         // this slot machine needs 3 separate reels
  32.         // hint: Object.create(..)
  33.     ],
  34.     spin() {
  35.         this.reels.forEach(function spinReel(reel){
  36.             reel.spin();
  37.         });
  38.     },
  39.     display() {
  40.         // TODO
  41.     }
  42. };
  44. slotMachine.spin();
  45. slotMachine.display();
  46. // ☾ | ☀ | ★
  47. // ☀ | ♠ | ☾
  48. // ♠ | ♥ | ☀
  50. slotMachine.spin();
  51. slotMachine.display();
  52. // ♦ | ♠ | ♣
  53. // ♣ | ♥ | ☺
  54. // ☺ | ♦ | ★

Try to solve this yourself first.

Hints:

  • Use the % modulo operator for wrapping position as you access symbols circularly around a reel.

  • Use Object.create(..) to create an object and prototype-link it to another object. Once linked, delegation allows the objects to share this context during method invocation.

  • Instead of modifying the reel object directly to show each of the three positions, you can use another temporary object (Object.create(..) again) with its own position, to delegate from.

Once you have code that works, compare your solution(s) to the code in “Suggested Solutions” at the end of this appendix.