見出し画像

コンパス

nysh 
<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)：現在の方向をコンパスに表示

この記事が気に入ったらサポートをしてみませんか？