コンパス
<html>
<body></body>
<script>
var $=function(id){return document.getElementById(id)}
var screen={
fov:60
}
var compus={
fov:60,
direction:(function(){
var d=[]
for(var i=0;i<=360;i+=5){
if(i%5==0){
d.push({0:'E',45:'SE',90:'S',135:'SW',180:'W',225:'NW',270:'N',315:'NE'}[i]||' ')
}
}
return d
})(),
getDirection(direction,diff){
return (360+direction+diff)%360
},
getMin:function(direction){
return compus.getDirection(direction, -screen.fov/2)
},
getMax:function(direction){
return compus.getDirection(direction, screen.fov/2)
},
makeCompus:function(){
document.body.innerHTML+='<pre id=compus style=width:100px;height:12px;border-style:solid;border-width:2px;border-color:#f00></pre>'
},
showCompus:function(direction){
$('compus').innerText=compus.getOrientation(direction)
},
getOrientation:function(direction){
var min=compus.getMin(direction)/5|0
var max=compus.getMax(direction)/5|0
if(min<max){ return compus.direction.slice(min,max).join('')}
else{ return compus.direction.slice(min,compus.direction.length).concat(compus.direction.slice(0,max)).join('')}
}
}
compus.makeCompus()
compus.showCompus(0)
var i=0
setInterval(function(){
i+=5
compus.showCompus(i)
}, 100)
</script>
</body>
</html>
コンパス:プレイヤーの向いている方向を5度分割の8方向(NEWS)で表示する
FOV:Field of view(視野角)60度に設定
compus:コンパスオブジェクト
compus.makeCompus( ):コンパスの表示領域をHTMLに追加
compus.showCompus(direction):現在の方向をコンパスに表示
この記事が気に入ったらサポートをしてみませんか?