Javascript Prototype + HTML呈現

Question

Noobie在這里：我正在嘗試為骰子（6個面）創建一個原型，每個骰子對象都存儲它的當前值（當前面值）和HTML對應的表示形式。 我想要的是在滾動骰子時更新表示和值。

我有以下三個功能，我無法實現：

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(){

//使用jQuery擲骰子}

我在理解如何更新圖像以及渲染如何工作以及想要學習Javascript OOP方面遇到了很多麻煩，所以沒有捷徑會很好。 謝謝

Answer 1

嘗試

(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

您可以通過在構造函數（函數）中訪問this關鍵字來為原型創建方法。 我只建議使用prototype成員修改已創建的（本機）原型，如Array，String或Math（數學使用__proto__而不是prototype ）

我在這里創建了一個快速骰子示例：（此示例使用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 （使用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");
});

---

編輯：使用.prototype

這是相同的示例，但它使用prototype成員。

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

JavaScript （使用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");
});

希望這能使事情順利進行。