Javascript Prototype + HTML呈现

Question

Noobie here: I'm trying to create a prototype for a dice (6 sides), with each dice object storing it's current value (the current face value) and a HTML-corresponded representation. What I would like is to have the representation and values both update when rolling the dice.

I have the three following functions that I'm having trouble implementing:

function rollD(){
  this.val = randomInt(1,6) //random integer function to choose between 1 - 6
  this.icons = ; //dice icons

}


rollD.prototype.render = function(){
     //how does HTMY rendering work?
   }


rollD.prototype.roll(){

//roll dice incorporating jQuery }

I'm having a lot of trouble understanding how to update the image and how the rendering works and would like to learn Javascript OOP, so no short cuts would be great. Thank you

Answer 1

Try

(function ($) {
    $.fn.rollDice = function () {
        // `dice` array
        var dice = ["\u2680"
                    , "\u2681"
                    , "\u2682"
                    , "\u2683"
                    , "\u2684"
                    , "\u2685"];
        // return _two_ `dice` items,
        // remove `+ dice[
        // 1 + Math.floor(Math.random() * dice.length - 1)
        // ]` , to return _one_ die
        // `1 + Math.floor(Math.random() * dice.length - 1)
        // ]` returns "pseudo" random number,
        // utilized to reference an `index` within `dice` array
        return $(this).text(dice[
            1 + Math.floor(Math.random() * dice.length - 1)
        ] + dice[
            1 + Math.floor(Math.random() * dice.length - 1)
        ])
    }
}(jQuery));

// call `$.fn.rollDice` on `.dice` selector 
$(".dice").rollDice();

 (function ($) { $.fn.rollDice = function () { var dice = ["\⚀" , "\⚁" , "\⚂" , "\⚃" , "\⚄" , "\⚅"]; return $(this).text(dice[ 1 + Math.floor(Math.random() * dice.length - 1) ] + dice[ 1 + Math.floor(Math.random() * dice.length - 1) ]) } }(jQuery)); $(".dice").rollDice() 

 .dice { font-size:72px; margin:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dice"></div> 

Answer 2

You can create methods for a prototype by accessing the this keyword within the constructor (function). I would only recomment using the prototype member for modifying already created (native) prototypes such as Array, String, or Math (math uses __proto__ instead of prototype )

I created a quick dice example here: (this example uses jQuery )

http://codepen.io/anon/pen/emyjpz

HTML

<button id='d1' class='dice'>ROLE ME</button>
<button id='d2' class='dice'>ROLE ME</button>
<button id='d3' class='dice'>ROLE ME</button>
<button id='d4' class='dice'>ROLE ME</button>
<button id='d5' class='dice'>ROLE ME</button>
<br>
<button onclick='$(".dice").trigger("click");'>Roll All</button>

CSS

.dice {
  display: inline-block;
  border: 1px solid black;
  background: transparent;
  width: 50px;
  height: 50px;
  margin: 16px;
}

JavaScript (with jQuery)

Math.randInt = function(min, max){
  return Math.floor((Math.random()*((max+1)-min))+min);
}
function Dice(htmlID){
  this.id = htmlID;
  this.value = false;
  this.roll = function(){
    this.value = Math.randInt(1,6);
    $("#"+this.id).html(this.value);
  }
  $("#"+this.id).on("click",this.roll);
}
$(document).ready(function(){
  new Dice("d1");
  new Dice("d2");
  new Dice("d3");
  new Dice("d4");
  new Dice("d5");
});

---

Edit: Using .prototype

This is the same example but it uses the prototype member.

http://codepen.io/dustinpoissant/pen/KwZBGN

JavaScript (with jQuery)

Math.randInt = function(min, max){
  return Math.floor((Math.random()*((max+1)-min))+min);
}
function Dice(htmlID){
  this.id = htmlID;
  this.value = false;
  $("#"+this.id).on("click",this.roll);
}
Dice.prototype.roll = function(){
    this.value = Math.randInt(1,6);
    $("#"+this.id).html(this.value);
  }
$(document).ready(function(){
  new Dice("d1");
  new Dice("d2");
  new Dice("d3");
  new Dice("d4");
  new Dice("d5");
});

Hope this clears things up a little.