如何使我的代码Javascript在HTML代码中运行?

时间:2017-04-30 16:37:10

标签: javascript html button onclick

我在JavaScript的html文件中包含了一个脚本。我正在尝试制作游戏Pig的版本。但是,尽管使用onClick功能来调用我的函数,但它们似乎都不起作用,只有html代码才有效。这是我到目前为止的代码:

<html>
<head>
    <style>
        .dice{
            background-color: rgb(102, 255, 255);
            height: 200px;
            width: 200px;
            border-style: solid;
        }

        h1{
            font-family: "Verdana";
            color: (102, 255, 255);
        }

    </style>
    <script>
        var turn1; //The collection of all points gathered in player1's turn, until player rolls a 1
        var turn2; //The collection of all points gathered in player2's turn, until player rolls a 1
        var p1 = 0; //Player1 (human) score
        var p2 = 0; //Player2 (computer) score
        var pts; //the value from the dice

        function score(){
            text("Player 1 Score: "); //Will display player1 score
            text("Player 2 Score: "); //Will display player2 score
        }

        function skip(){ //Function will run if player clicks to skip
            //p1 = p1 + turn1;
            turn2 = 0;
            pts = random(1,6);
            if (pts == 1){ //Sets turn value to 0 and switches to player1's turn
                textFont("Verdana", 100);
                console.log("1", 500, 200);
                turn2 = 0;
                p2 = p2;
            }
            else if (pts > 1){ //Sets turn2 value to points collected, and adds it to player2's points
                textFont("Verdana", 100);
                text("1", 500, 200);
                turn2 = turn2 + pts;
                p2 = p2 + turn2;
                return p2;
            }
            else{}
        }

        function roll(){ //Function will run if player clicks to roll dice
            turn1 = 0;
            pts = random(1,6); //Set the dice value to a random number from 1 to 6
            if (pts == 1){ //Sets turn value to 0 and switches to player2's turn
                turn1 = 0;
                p1 = p1;
                textFont("Verdana", 100);
                text("Your turn has ended!");
                skip();
            }
            else if (pts > 1){ //Sets turn1 value to points collected, and adds it to player1's points
                textFont("Verdana", 100);
                text(pts, 350, 200);
                turn1 = turn1 + pts;
                p1 = p1 + turn1;
                return p1;
            }
            else{}
        }
    </script>
</head>

<body onload="score();">
    <h1>Pyg!</h1>
    <div>
        <button onClick="roll();" style="cursor: pointer">Roll</button>
        <button onClick="skip();" style="cursor: pointer">Skip</button>
        <div class="dice"></div>
    </div>
</body>

2 个答案:

答案 0 :(得分:0)

您是否发布了完整的代码?我尝试运行你的代码,它没有random()函数并抛出错误。请添加该功能。

如果您尝试在步骤随机(1,6)中添加2位数之间的随机数,请将以下函数添加到脚本中

function random(min,max){Math.floor(Math.random() * max) + min}

*注意:将最小值和最大值替换为需要生成的数量的最小值和最大值。

答案 1 :(得分:0)

如果您使用随机数,则必须使用数学库,例如Math.random(1,6);

我说过text = document.getelementById("");