スネークゲームをスマホの加速度センサーで動かす
先日書いたスネークゲームをパソコンだけでなくスマホ用にも書き換えてみました。
書き換えた点は以下の2点です。
- サイズをスマホ用に対応させる
- 蛇を動かすのに加速度センサーを使う
順にみていきます。
１．サイズをスマホ用に対応させる。
html内のhead部分を書き換えました。
metaとしてviewportを指定しました。
表示する幅をこれで固定できます。
<head>
<title>snakegame</title>
<meta charset="UTF-8"></meta>
<meta name="keywords" content="snakegame">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximumscale=1.0,user-scalable=no">
</head>
２．蛇を動かすのに加速度センサをー使う
せっかくなので加速度センサーで操作できるようにします。
傾けた方向に蛇の頭が向くようにしただけです。
まず、htmlに加速度センサーのイベントを追加します。
最初に割り込みが入ったときだけ元の位置として保存して、そのあとはその値との差分を見てどの方向に傾いているかを判断させます。
tibanmeflgはセンスがないですね。
window.addEventListener("devicemotion", function(event1){
x = event1.accelerationIncludingGravity.x;
y = event1.accelerationIncludingGravity.y;
if(itibanmeflg==0){
itibanmeflg = 1;
basex = x;
basey = y;
}
}, true);
そしてintervalの中で以下の関数を毎回読み込ませます。これでどの方向に進むべきかがわかります。
body=onLoad()で以下の関数を読み込ませ、
function setScript(){
init();
timerId = setInterval("snakeScript()",300);
}
snakeScript()の中で以下の関数を実行させます。
function readVector(){
if(basex-x>1){
if(mike.v!=3)mike.v = 4;
}else if(basex-x<-1){
if(mike.v!=4)mike.v = 3;
}else if(basey-y>1){
if(mike.v!=2)mike.v = 1;
}else if(basey-y<-1){
if(mike.v!=1)mike.v = 2;
}
}
こんなところでできます。いい時代になったものです。
