HTML5入門その8-高速で描画させる

2014年10月8日 2025年10月18日

共創システムデザイン研究室

前出のプログラムはキーを押してから，少し間があります．

この原因は，10ミリセカンド毎に実行しているfunction draw()の外に，キー入力処理のプログラムがあるからです．

そこで，必ず10ミリセカンド毎に実行されるfunctiondraw()の中にキー関係を入れて，，みたいのですがうまく入りません．

そこで，ON/OFFができるブーリアンを使います．

これで10ミリセカンド毎に，矩形の移動をON/OFFできます．

サンプル

<!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;
var aBool = false;
var bBool = false;
var cBool = false;
var dBool = false;
 
function kyesage(myEvt) {
 
if (myEvt.keyCode == 39){
aBool = true;
 
}
if (myEvt.keyCode == 40){
bBool = true;
}
 
if (myEvt.keyCode == 38){
cBool = true;
}
 
if (myEvt.keyCode == 37){
dBool = true;
}
 
}
 
 
function kyeageta(myEvt) {
if (myEvt.keyCode == 39){
aBool = false;
}
if (myEvt.keyCode == 40){
bBool = false;
}
 
if (myEvt.keyCode == 38){
cBool = false;
}
 
if (myEvt.keyCode == 37){
dBool = false;
}
}
 
document.onkeydown = kyesage;
document.onkeyup = kyeageta;
 
function draw() {
context.clearRect(myX, myY, 20, 20);
if(aBool == true){
myX = myX + sokudo;
}
if(bBool == true){
myY = myY + sokudo;
}
if(cBool == true){
myY = myY - sokudo;
}
 
if(dBool == true){
myX = myX - sokudo;
}
 
context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);
 
</script>
</body>
</html>
Code language: HTML, XML (xml)