スカッシュゲームを作る(1)

公開:2015-07-18 07:00
更新:2020-02-15 04:37
カテゴリ:スカッシュゲーム,ゲーム製作,html5,webgl,three.js,js

まあそういうわけで簡単なゲームを作り、ゲームの面白さというものを研究し、ゲームの本質に迫ろうというアイデアで進めていこうとしていて、まずスカッシュゲームを作ろうとしている。しかし単にレトロゲームを作って喜ぶだけで終わりそうな気もする。

なぜスカッシュゲームかというと特に意味はなくて、こういうテーマを考えたときにまず頭に浮かんだのがこれだったのだ。 スカッシュゲームというのはいわゆるスカッシュのゲーム版である。Pongというゲームの一人版である。下の動画がそうである。

これを縦画面にして作ろうかなと思っている。今回作ろうとしているゲーム仕様をまとめると、

である。たぶんこの仕様では面白くないと思う。この仕様にいろいろなものを追加していき、人間が何をもって面白いと感じるのかを調べていくのである。

ゲームコンソールを作る。

ゲームコンソールを作り始めている。tmlib.jsを使用しようかなと思ったけど、three.jsベースで作りたくなってきたので、2Dだけど描画はthree.jsでやって、その他(キー入力とか)はtmlibのコードを参考・拝借して実装してみることにする。

画面サイズは横192px×縦256という昔のビデオ・ゲームの解像度。それを画面サイズに応じて適宜拡縮して表示する。その部分を作ってみた。

これだけのことなんだけど、iPhone上でなぜか動かなくて困った。最終的には動くようになったけどね。

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/squash/0000/README.md

## スクリーンサイズに合わせてゲーム画面を変更する


* three.jsでスクリーンサイズに合わせてゲーム画面サイズを変更する

* ゲーム画面はW 192 × H 256の昔のレトロのピクセル数

* ゲーム画面を保ったまま、スクリーンサイズにフィットさせる
 

/dev/squash/0000/index.html

<!DOCTYPE html>
<html>
<head>
    <title>画面サイズにゲーム画面をフィットさせる</title>
    <meta name="keywords" content="WebGL,HTML5,three.js" />
    <meta name="description" content="WebGL,HTML5,three.js" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta charset="UTF-8">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
    <style>
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 4px;
            padding: 0;
            border: 0;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        #console {
            margin-left: auto;
            margin-right: auto;
            border: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.addEventListener('load',
            function () {
                const WIDTH = 192;
                const HEIGHT = 256;
                var screen_width;
                var screen_height;

                function calcScreenSize() {
                    screen_width = document.body.clientWidth - 8;
                    screen_height = document.body.clientHeight - 8;
                    if (screen_width >= screen_height) {
                        screen_width = screen_height * WIDTH / HEIGHT;
                    } else {
                        screen_height = screen_width * HEIGHT / WIDTH;
                    }
                }

                calcScreenSize();

                var renderer = new THREE.WebGLRenderer({ antialias: false /*, sortObjects: true */ });
                renderer.setSize(screen_width, screen_height);
                renderer.setClearColor(0x000000, 1);
                renderer.domElement.id = 'console';
                renderer.domElement.style.zIndex = 0;
                document.body.appendChild(renderer.domElement);
                renderer.clear();

                // カメラを工夫し、Z座標が0の時座標指定が仮想画面サイズの位置となるようにする
                var camera = new THREE.PerspectiveCamera(90, WIDTH / HEIGHT, 0.1, 1000);
                camera.position.z = HEIGHT / 2;
                var scene = new THREE.Scene();
                var geometry = new THREE.PlaneGeometry(4, 4);
                var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
                var rect = new THREE.Mesh(geometry, material);
                var x = 0;
                var y = 0;
                var dx = 2;
                var dy = 2;

                window.addEventListener('resize', function () {
                    calcScreenSize();
                    renderer.setSize(screen_width, screen_height);
                });

                scene.add(rect);
  
                function render() {
                    requestAnimationFrame(render);
                    renderer.render(scene, camera);
                    x += dx;
                    y += dy;
                    if (x > (WIDTH / 2) || x < (-WIDTH / 2)) {
                        dx = -dx;
                        x += dx;
                    }

                    if (y > (HEIGHT / 2) || y < (-HEIGHT / 2)) {
                        dy = -dy;
                        y += dy;
                    }

                    rect.position.x = x;
                    rect.position.y = y;
                }
                render();
            });
    </script>
</body>
</html>