试图制作为Canvas游戏设置难度的按钮

时间:2016-12-13 17:12:40

标签: javascript html5 canvas

我有用HTML制作的按钮,但我似乎无法设置AI的难度,即功能ais。我希望能够通过按下按钮并添加ais来设置难度,例如" ais == ais + 2"我该怎么做?

我的代码

ViewGroup

我的JS

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-       8" />
    <title>Connor's Pong Project</title>

    <!-- Style Sheet -->
    <link href="css/CC_FinalProject.css" type="text/css"rel="stylesheet"/>

    <!-- JS --> 
    <script src="js/CC_FinalProject.js"></script>
    <script src="js/modernizr.js"></script>

</head>

<body>
<div class="center-text">
    <h1> Welcome to Pong 2.0!</h1>
</div>
<canvas id="gc" width="640" height="480" class="center-block">
Your browser doesn't support Canvas.
</canvas>

<!-- Buttons -->
<br>
<div class="center-text">
    <!-- add button -->
    <button type="button" id="aie">Easy</button>
    <button type="button" id="aim">Medium</button>
    <button type="button" id="aih">Hard</button>
    <!-- add a remove circle button here -->
    <!-- add a change all circles button here -->
</div>

<!-- ^ End Buttons -->

<!-- Rules -->
<div class="center-text">
    <h2> How to Play <br>
    -Use Mouse to move bar <br>
    -Try and score against the AI!
    </h2>
</div>

1 个答案:

答案 0 :(得分:0)

添加一个<button onclick="addDifficulty()">Add Difficulty</button>

按钮

然后在JavaScript中:

function addDifficulty() {
  ais += 2
}

以下是完整代码的样子:

&#13;
&#13;
var ais = 4

function myFunction(difficulty) {
  ais = difficulty
  document.getElementById("demo").innerHTML = ais;
}
&#13;
<p>Click the button to trigger a function that will change the value of ais</p>

<button onclick="myFunction(6)">Click me</button>
<button onclick="myFunction(8)">Click me</button>
<button onclick="myFunction(4)">Click me</button>

<p id="demo"></p>
&#13;
&#13;
&#13;