JavaScript ベクトル KeyPress setIntervalの利用|無料のオンラインパソコン教室

JavaScript ベクトル KeyPress setIntervalの利用

2022年8月27日

今回はゲームを作成したいかたに、画面上に配置した車の画像が自由に動き回るアクションをJavaScriptを用いて再現してみます。

画像のダウンロードとCSS

まずは適当な画像を用意して、HTMLとCSSを用いて画像をブラウザの画面上に配置します。

画像をCSSのrotate()を利用して回転させる

ベクトルを利用して画像を移動させる

ベクトルを利用して、画像を移動させてみます。
横の運動量は
x=Math.cos( kakudo * 3.14 /180)*移動量
縦の運動量は
y=Math.sin(kakudo * 3.14 /180)*移動量
で計算します。

ここまでのソースは以下になります。

<!DOCTYPE html>
<html lang="ja">
<meta charset=utf-8>
<body>
<div id="car">
<img src="car.jpg" width=120 height=80>
</div>
<style>
#car{ position:absolute; left:0; top:0; transform:rotate(0deg); }
</style>
<script src="jquery.js"></script>
<script>
$(function(){
kakudo=0;
speed=5; carx=0; cary=0;
$(document).keypress(function(e){ e.preventDefault();
k=e.keyCode;
if(k==54){ kakudo+=10; }
if(k==52){ kakudo-=10; }
if(k==56){
rad=kakudo*3.14/180;
carx=Math.cos(rad)*speed+carx;
cary=Math.sin(rad)*speed+cary;
}
$("#car").css("transform","rotate("+kakudo+"deg)");
$("#car").css("left",carx);
$("#car").css("top",cary);
});
});
</script>
</body>
</html>

setInterval()を利用して一定時間毎に処理を行う

ここでは、８キーで車のスピードを加速させたりの処理をしてみます。

アレンジしましょう

以下完成ソースです。

<!DOCTYPE html>
<html lang="ja">
<meta charset=utf-8>
<body>
<div id="car">
<img src="car.jpg" width=120 height=80>
</div>
<div id="s">速度:<span>0</span>km</div>
<style>
#car{ position:absolute; left:0; top:0; transform:rotate(0deg); }
#s{ position:absolute; right:30px; top:10px; }
</style>
<script src="jquery.js"></script>
<script>
$(function(){
kakudo=0;
speed=0; carx=0; cary=0;
setInterval("carMove()",80);
$(document).keypress(function(e){ e.preventDefault();
k=e.keyCode;
if(k==54){ kakudo+=10; }
if(k==52){ kakudo-=10; }
if(k==56){ speed++;}
if(k==50){ speed--; }
});
});
function carMove(){
$("#s span").text(speed);
rad=kakudo*3.14/180;
carx=Math.cos(rad)*speed+carx;
cary=Math.sin(rad)*speed+cary;
gw=$(window).innerWidth();
if(carx>gw){ carx=0; }
if(carx<0){ carx=gw; }
$("#car").css("transform","rotate("+kakudo+"deg)");
$("#car").css("left",carx);
$("#car").css("top",cary);
}
</script>
</body>
</html>