まあそういうわけで簡単なゲームを作り、ゲームの面白さというものを研究し、ゲームの本質に迫ろうというアイデアで進めていこうとしていて、まずスカッシュゲームを作ろうとしている。しかし単にレトロゲームを作って喜ぶだけで終わりそうな気もする。
なぜスカッシュゲームかというと特に意味はなくて、こういうテーマを考えたときにまず頭に浮かんだのがこれだったのだ。 スカッシュゲームというのはいわゆるスカッシュのゲーム版である。Pongというゲームの一人版である。下の動画がそうである。
これを縦画面にして作ろうかなと思っている。今回作ろうとしているゲーム仕様をまとめると、
- 跳ね返ってくるボールをパドル（ラケット）で跳ね返す。
- 跳ね返すのに失敗した場合ゲームオーバー
である。たぶんこの仕様では面白くないと思う。この仕様にいろいろなものを追加していき、人間が何をもって面白いと感じるのかを調べていくのである。
ゲームコンソールを作る。
ゲームコンソールを作り始めている。tmlib.jsを使用しようかなと思ったけど、three.jsベースで作りたくなってきたので、2Dだけど描画はthree.jsでやって、その他（キー入力とか）はtmlibのコードを参考・拝借して実装してみることにする。
画面サイズは横192px×縦256という昔のビデオ・ゲームの解像度。それを画面サイズに応じて適宜拡縮して表示する。その部分を作ってみた。
これだけのことなんだけど、iPhone上でなぜか動かなくて困った。最終的には動くようになったけどね。
動作サンプル
ソースコード・リソース
## スクリーンサイズに合わせてゲーム画面を変更する
* three.jsでスクリーンサイズに合わせてゲーム画面サイズを変更する
* ゲーム画面はW 192 × H 256の昔のレトロのピクセル数
* ゲーム画面を保ったまま、スクリーンサイズにフィットさせる
<!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>