ビー玉はじきバーチャルパッド

2021.01.27

このホームページの「スマホ版ビー玉はじき」を、傾きで操作から、バーチャルパッドで操作に変えたものです。指を離せば、自機は止まります。パソコンの矢印キーでも操作できます。
自機のビー玉を操って、敵ビー玉をはじき出してください。赤い壁にぶつけると、「ビー玉大」→「ビー玉中」→「ビー玉小」の順に小さくなっていきます。「ビー玉小」を赤い壁にぶつけると消滅させることができます。PC9801名作ゲーム蟹味噌をリメイクしたものです。
ソースプログラムは下記のリンク先に載せてあります。
Three.jsでゲーム

クリックでビー玉はじきがスタート

バーチャルキーパッドにしてみると、思った方向に入力するのがかなり難しいとわかりました。すなわち押している感覚がないため、思ったタイミングで思った方向に入力出来ない事があります。
対策として、指を常にキーパッドの中心にしました。それなりの効果はあるようです。
バーチャルキーパッドは表示したいけれど目立つと気になるので、この位にしました。
index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
* {margin: 0;padding: 0;background-color:#808080;}
html, body { width:100%; height:100%; }
.view {
  position: absolute;
  left: 0;
  width: 800px;
  height: 800px; }
  .view canvas {
    width: 100%;
    height: 100%; }
.guideimg {
  position: absolute;
  background-image: url('pad.png');
  background-size: 100% 100%;}
  .guideimg canvas {
    width: 100%;
    height: 100%;}
</style>
</head>
<body ontouchmove="event.preventDefault()">
<script src="matter.min.js"></script>
<script src="three.min.js"></script>
<div id="js-view" class="view"></div>
<div id="js-engine" style="display:none;" class="engine"></div>
<div id="js-guideimg" class="guideimg"></div>
<script src="main.js"></script>
</body>
</html>

cssで”guideimg”に、100%のサイズでバックグラウンドイメージとして’pad.png’を貼り付けてます。
main.js

main.js
(function() {
    /*バーチャルキーパッド以外の部分は省いてあります。
    cssで設定した"js-guideimg"をウインドウ上に表示する。*/
    const c2 = document.getElementById('js-guideimg');
    if (window.innerWidth < window.innerHeight) {//スマホの縦ならバーチャルキーパッド表示
        imagesize = 80;//バーチャルキーパッド半径
        c2.style.width = imagesize * 2 + 'px';//画像の幅
        c2.style.height = imagesize * 2 + 'px';//画像の高さ
        c2.style.backgroundColor = 'transparent';//pngの画像の透明部分を透明にする
    }

    //デジタルパッド
    window.addEventListener('touchstart', (e) => {//タッチを開始
        e.preventDefault();
        ex = e.changedTouches[0].pageX;ey = e.changedTouches[0].pageY;//タッチの位置
        centerX = ex;//位置をセンターとして記憶
        centerY = ey;
        c2.style.left = centerX - imagesize + 'px';//画像表示
        c2.style.top = centerY - imagesize + 'px';
        RIGHT = false;LEFT = false;DOWN = false;UP = false;//４方向の移動キャンセル
    },{passive: false});
    window.addEventListener('touchmove', (e) => {//直前のタッチムーブの座標を起点にどちらの方向かを調べる
        e.preventDefault();
        RIGHT = false;LEFT = false;DOWN = false;UP = false;//移動の初期化
        ex = e.changedTouches[0].pageX;ey = e.changedTouches[0].pageY;//タッチ移動の位置
        x = ex - centerX;//タッチと前の位置とのX距離
        y = ey - centerY;
        centerX = ex;//前の位置を今の位置に更新
        centerY = ey;
        if(Math.abs(x) > Math.abs(y)){//タッチとセンターとのX距離が大きければ左右、Y距離が大きければ上下
            if(x < 0){LEFT = true;}else{RIGHT = true;}//距離がマイナスなら左プラスなら右
        }else{
            if(y < 0){UP = true;}else{DOWN = true;}//距離がマイナスなら上プラスなら下
        }
        c2.style.left = centerX - imagesize + 'px';//画像表示
        c2.style.top = centerY - imagesize + 'px';
    },{passive: false});
    window.addEventListener('touchend', function(e) {
        e.preventDefault();
        RIGHT = false;LEFT = false;DOWN = false;UP = false;//４方向の移動キャンセル
    },{passive: false});

コメント