キャラクターを歩行させるということをするが、右を押したら右を向くということはまだしない。すべて前を向いた状態で移動させる。
かに歩き
a.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>coutdown</title>
</head>
<body>
<div id="trim">
<img src="./img/girl.png">
</div>
<script type="text/javascript" src="./a.js"></script>
</body>
</html>
<style>
#trim{
top:10px;
left:10px;
position:absolute;
}
</style>
a.htmlで変化させる部分は、top:10px;left:10px;というところだ。前回のソースコードにこれらを追加してほしい。
a.js
var count=0;
var rect=[0,0,48,-32]; //上右下左の順
var margin=[0,0,0,32]; //上右下左の順
re="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
document.getElementById("trim").style.clip= re;
setInterval(
function(){
if(count==4)
{
rect[1]=32;
rect[3]=0;
margin[3]=0;
count=0;
}
else{
rect[1]=rect[1]+32;
rect[3]=rect[3]+32;
margin[3]=margin[3]-32;
}
re="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
ma=margin[0]+"px "+margin[1]+"px "+margin[2]+"px "+margin[3]+"px";
document.getElementById("trim").style.clip= re;
document.getElementById("trim").style.margin=ma;
count++;
},500);
document.onkeydown=kdown; //キーが押されたらdown関数を実行
document.onkeyup=kup; //キーが話されたらup関数を実行
var x=10; //画像のx座標
var y=10; //画像のy座標
var move=30 //移動量
//押されたキーによってこの値が1になったり0になったりする
var left=0;
var up=0;
var right=0;
var down=0;
function a()
{
alert(x+"to"+y);
}
function kdown(e)
{
//押されたキーの判別
if(e.keyCode==37){ left=1;}
if(e.keyCode==38){ up=1;}
if(e.keyCode==39){ right=1;}
if(e.keyCode==40){ down=1;}
//x軸,y軸の更新
if(left==1){x=x-move;}
if(right==1){x=x+move;}
if(up==1){y=y-move;}
if(down==1){y=y+move;}
//実際の移動
document.getElementById("trim").style.left=x+"px";
document.getElementById("trim").style.top=y+"px";
}
function kup(e)
{
console.log(x,y);
if(e.keyCode==37){left=0;}
if(e.keyCode==38){up=0;}
if(e.keyCode==39){right=0;}
if(e.keyCode==40){down=0;}
}
まず、if文で改行していた部分が醜かったので、改行をなくし見やすいようにした。
基本的に、前回と前々回のソースコードを二つつなげただけだが、ちゅいしてほしい部分がいくつかある。一つはIDの名前を変更する必要があるということだ、前々回と比べ、IDの名前はtrimになっている。
今回はこれだけだが、次は右を向くとキャラクターの画像も右を向いている画像へ変化させるということをする。