Question

问题

我编程已经很久了。我正在设计一款游戏，首先用JS / HTML / CSS编程，因为这是我所熟悉的。这是我正在建造的骰子滚筒。到目前为止，它正确地掷骰子，但是当它们被卷起时我似乎无法抓住骰子。我假设总数的变量定义不正确，或超出范围。

HTML

<body>
  <div id="dice" class="dice">
  </div>
  <div id="diceTotal"></div>
  <button id="button">Roll Die</button>
</body>

CSS

* {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: 8 vw;
}

button {
  background-color: #000;
  border-radius: 1vw;
  border: none;
  color: #fff;
  padding: 1vw;
  text-transform: uppercase;
  font-size: 6vw;
  width: 40vw;
  cursor: pointer;
  margin-top: .5vw;
}

.die {
  height: 10vw;
  width: 10vw;
  padding: 0vw;
  margin: .5vw;
  border: .1vw solid gray;
  border-radius: 2vw;
  font-size: 9vw;
  display: inline-block;
}

JS

var tot;
do {
  var sides = parseInt(prompt("How many sides are on your die? ", "6"), 10);
} while (isNaN(sides) || sides < 1);
var dice = {
  sides: sides,
  roll: function() {
    var randomNumber = Math.floor(Math.random() * this.sides) + 1;
    return randomNumber;
  }
}

//Prints dice roll to the page

function printNumber(number) {
  var span = document.createElement("span");
  span.className = "die";
  var diceroll = document.createTextNode(number);
  span.appendChild(diceroll);
  document.getElementById('dice').appendChild(span);
}

var button = document.getElementById('button');

button.onclick = function() {
  var result = dice.roll();
  printNumber(result);
  var tot = result + tot;
  var printDiceTotal = "Total: " + tot;
  document.getElementById('diceTotal').innerHTML = printDiceTotal;
};

这是JSFiddle。

https://jsfiddle.net/itmadsen/pkgej3uh/2/

我知道我遗漏了一些基本的东西，在有人提出解决方案后，我会为此而烦恼。

Answer 1

首先，您需要将零作为初始值指定为tot

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

class PlanningMeeting extends Component {

    componentWillUnmount() {
        this.props.planning_meeting = undefined;
    }

    renderDocuments() {
        const { planning_meeting } = this.props;

        if (!planning_meeting) {
            return <div>Loading...</div>
        }

        if (_.isEmpty(this.props.planning_meeting)) {
            return (
                <li>Nothing at this time.</li>
            );
        } else {
            return _.map(this.props.planning_meeting, pm => {
                return (
                    <li key={pm.document}>
                        <Link to={`/documents/${pm.document}`}>{pm.document}</Link>
                    </li>
                );
            });
        }
    }

    render() {

        return (
            <div className='panel panel-default'>
                <div className='panel-heading'>
                    <h4><strong>Planning Meeting</strong></h4>
                </div>

                <div className='panel-body'>
                    <ul className='survey-list'>{this.renderDocuments()}</ul>
                </div>
            </div>
        ); 
    }
}

function mapStateToProps(state) {
    return {
        planning_meeting: state.documents.planning_meeting
    }
}

export default connect(mapStateToProps)(PlanningMeeting);

其次，你要定义两次

var tot = 0;

应该成为

var tot = result + tot;

这里有工作小提琴：https://jsfiddle.net/entio/pkgej3uh/5/

Answer 2

<强>谢谢！

我修好了。完美！

https://jsfiddle.net/itmadsen/pkgej3uh/7/

<强> JS

var tot = 0;
do {
  var sides = parseInt(prompt("How many sides are on your die? ", "6"), 10);
} while (isNaN(sides) || sides < 1);
var dice = {
  sides: sides,
  roll: function() {
    var randomNumber = Math.floor(Math.random() * this.sides) + 1;
    return randomNumber;
  }
}

//Prints dice roll to the page

function printNumber(number) {
  var span = document.createElement("span");
  span.className = "die";
  var diceroll = document.createTextNode(number);
  span.appendChild(diceroll);
  document.getElementById('dice').appendChild(span);
}

var button = document.getElementById('button');

button.onclick = function() {
  var result = dice.roll();
  printNumber(result);
  tot = result + tot;
  var printDiceTotal = "Total: " + tot;
  document.getElementById('diceTotal').innerHTML = printDiceTotal;
};

JS Dice Roller - 我如何计算所有骰子？

2 个答案: