PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のスキルアップサイトです

岐阜のパソコン教室「パソコンスクール・テルン」

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()を利用して一定時間毎に処理を行う

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

アレンジしましょう

以下完成ソースです。

<!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>

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報