HTML5入門その6-キー入力その３
共創システムデザイン研究室宿題のようになっていたキー入力について，以下は1つの解答例です．
<!DOCTYPE html>
<html>
<head>
<title>Key2</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var migi = false;
var myX = 0;
var myY = 0;
var sokudo = 5;
function kyesage(myEvt) {
context.clearRect(myX, myY, 20, 20);
if (myEvt.keyCode == 39){
myX = myX + sokudo;
}
if (myEvt.keyCode == 40){
myY = myY + sokudo;
}
if (myEvt.keyCode == 38){
myY = myY - sokudo;
}
if (myEvt.keyCode == 37){
myX = myX - sokudo;
}
//console.log(myEvt.keyCode);
}
document.onkeydown = kyesage;
function draw() {
context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);
</script>
</body>
</html>
Code language: HTML, XML (xml)
補足
if文の使用方法について補足します．
［例1］
キャラのライフをカウントするときなどに，，
hensuという名前の変数が０かそれ以外かを調べ，０ならgameoverという命令を，そうでないならcharaSakuseiという命令を実行する
if(hensu == 0){//ifの条件に合致した時に中括弧で囲まれた処理をしてね
gameover();//ここにhense==0の時の命令いれる
}else{
charaSakusei();
}
Code language: JavaScript (javascript)
［例2］
aか，bか，cかというときはifを重ねて使います．なおswitchという条件分岐も使えます．
「条件分岐」ってあれです．みかんの大きさをXL，L，M，S 仕分ける機械（自動選果機という）みたいなのです．
if(namae == a){
//ここにaの時の処理
}
if(namae == c){
//ここにbの時の処理
}
if(namae == c){
//ここにcの時の処理
}
//この処理，実際にできるのかな，，，
Code language: JavaScript (javascript)
ちなみにelseをつけると，どれにもあてはまらない不適格品も出す事ができます．
まとめ
if（条件式）{
処理内容
}
中括弧で囲ったものを条件が合致したときに実行します．
