0
私はHTMLで作られたボタンを持っていますが、私は機能のAIであるAIの難しさを設定しているようです。私は、ボタンを押して "ais == ais + 2"のようにaisに追加することで難易度を設定できるようにしたいと思います。どうすればいいですか？キャンバスゲームの難しさを設定するボタンを作る試み
マイコード
<!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>
私の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);
}