宿題のようになっていたキー入力について，以下は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>

補足

if文の使用方法について補足します．

［例1］

キャラのライフをカウントするときなどに，，
hensuという名前の変数が０かそれ以外かを調べ，０ならgameoverという命令を，そうでないならcharaSakuseiという命令を実行する

if(hensu == 0){//ifの条件に合致した時に中括弧で囲まれた処理をしてね
gameover();//ここにhense==0の時の命令いれる
}else{
charaSakusei();
}

［例2］

aか，bか，cかというときはifを重ねて使います．なおswitchという条件分岐も使えます．

「条件分岐」ってあれです．みかんの大きさをXL，L，M，S　仕分ける機械（自動選果機という）みたいなのです．

（自動選果機の例＝中村選果機（株）のWEBサイトより）

if(namae == a){
//ここにaの時の処理
}
if(namae == c){
//ここにbの時の処理
}
if(namae == c){
//ここにcの時の処理
}
//この処理，実際にできるのかな，，，

ちなみにelseをつけると，どれにもあてはまらない不適格品も出す事ができます．

まとめ

if（条件式）{

処理内容

}

中括弧で囲ったものを条件が合致したときに実行します．

なんとか研究室

HTML5入門その6-キー入力その３

補足

［例1］

［例2］

まとめ