尝试制作一些按钮来设置Canvas游戏的难度

Question

I have the buttons made in HTML but i cant seem to set the difficulty of the AI which is the function ais. 我有用HTML制作的按钮，但我似乎无法设置AI的难度，即AI函数。 i want to be able to set difficulty by pressing the buttons and adding to the ais like "ais == ais + 2" How would i do that? 我希望能够通过按按钮并添加到“ ais == ais + 2”之类的ais来设置难度，我该怎么做？

My Code 我的密码

<!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>

My JS 我的JS

// Variables //
p1y=p2y=40;
pt=10;
ph=100;
bx=by=50;
bd=6;
xv=yv=4;
score1=score2=0;
ais=4;
// window loading all //
window.onload=function(){
    canvas=document.getElementById('gc');
    context=canvas.getContext('2d');
    setInterval(update,1000/30);
    canvas.addEventListener('mousemove', function(e){
        p1y = e.clientY-ph/2;
    })
 }
 // Reset Function //
 function reset(){
    console.log('reset called');
    bx=canvas.width/2;
    by=canvas.height/2;
    xv=-xv;
    yv=3;

 //Update Function//
 }
 function update(){
bx+=xv;
by+=yv;
if(by<0 && yv<0){
    yv=-yv;
}
if(by>canvas.height && yv>0){
    yv=-yv;
}
if(bx<0){
    if(by>p1y && by<p1y+ph){
        xv=-xv;
        dy=by-(p1y+ph/2);
        yv = dy*0.3;
    } else{
        score2++;
        reset();
    }
}
if(bx>canvas.width){
    if(by>p2y && by<p2y+ph){
        xv=-xv;
        dy=by-(p2y+ph/2);
        yv = dy*0.3;
    } else{
        score1++;
        reset();
    }
}
if(p2y+ph/2<by){
    p2y+=ais;
} else{
    p2y-=ais;
}

// reset canvas
context.clearRect(0,0,canvas.width,canvas.height);
// background
context.fillStyle='black';
context.fillRect(0,0,canvas.width,canvas.height);
// paddles
context.fillStyle='white';
context.fillRect(0,p1y,pt,ph); // p1 paddle
context.fillRect(canvas.width-pt,p2y,pt,ph); // p2 paddle
context.fillRect(bx-bd/2,by-bd/2,bd,bd); // ball
// scores
context.fillText(score1,100,100);
context.fillText(score2,canvas.width-100,100);
}

Answer 1

Add a button with <button onclick="addDifficulty()">Add Difficulty</button> 使用<button onclick="addDifficulty()">Add Difficulty</button>

Then in JavaScript: 然后在JavaScript中：

function addDifficulty() {
  ais += 2
}

Here is what the full code would look like: 完整的代码如下所示：

 var ais = 4 function myFunction(difficulty) { ais = difficulty document.getElementById("demo").innerHTML = ais; }

 <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>

尝试制作一些按钮来设置Canvas游戏的难度

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-12-13 17:22:04

尝试制作一些按钮来设置Canvas游戏的难度

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-12-13 17:22:04

解决方案1
0 已采纳 2016-12-13 17:22:04