JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<h1>Zonk!</h1>

<div class="door_game" data-doors="10"></div>

JavaScript

Math.randomNumber = function (max) {
    return Math.round((Math.random() * max) % max) - 1;
}

var Door = {
    number: null,
    isSelected: false,
    containsZonk: false,
    bind: function () {
        var that = this;
        this.elm.on('click', function () {
            that.isSelected = true
            that.containsZonk == true ? alert('pingo') : alert('better luck next time');
        });
    },
    init: function () {
        this.elm = $('<a>', {
            class: 'door selectable'
        });
        return this;
    }
};

var Platform = {
    parent: null,
    doorCount: null,
    jackpotNumber: null,
    doors: [],
    init: function (parent, doorCount) {
        this.parent = parent;
        this.doorCount = doorCount;

        for (var i = 0; i <= doorCount - 1; i++) {
            var door = Object.create(Door).init();
            door.number = i;
            door.elm.html(i.toString());
            door.bind();
            this.doors.push(door);
            this.parent.append(door.elm).append("<br/>");
        }

        this.jackpotNumber = Math.randomNumber(doorCount);
        this.doors[this.jackpotNumber].containsZonk = true;
        console.log(this.jackpotNumber);
    }
}
$(document).ready(function () {
    var platform = Object.create(Platform);
    var $game = $('.door_game');
    platform.init($game, 100);
});