スカッシュゲームを作る - パドルの追加
<!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="https://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.PlaneBufferGeometry(4, 4); | |
var material = new THREE.MeshBasicMaterial({ color: 0xffffff }); | |
var ball = new THREE.Mesh(geometry, material); | |
var paddle = new THREE.Mesh(new THREE.PlaneBufferGeometry(32, 4), new THREE.MeshBasicMaterial({ color: 0xffffff })); | |
paddle.position.y = -100; | |
var x = 0; | |
var y = 0; | |
var dx = 3; | |
var dy = 3 | |
renderer.domElement.addEventListener('mousemove', function (e) { | |
var x = e.clientX; | |
var y = e.clientY; | |
var rect = e.target.getBoundingClientRect(); | |
x -= rect.left; | |
y -= rect.top; | |
paddle.position.x = x * WIDTH / screen_width - WIDTH / 2; | |
}); | |
window.addEventListener('resize', function () { | |
calcScreenSize(); | |
renderer.setSize(screen_width, screen_height); | |
}); | |
scene.add(ball); | |
scene.add(paddle); | |
function render() { | |
requestAnimationFrame(render); | |
renderer.render(scene, camera); | |
var bx = x, by = y; | |
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; | |
} | |
ball.position.x = x; | |
ball.position.y = y; | |
// パドルとの衝突判定 | |
var sx, sy, ex, ey; | |
if (x >= bx) { | |
sx = bx - 2; | |
ex = x + 2; | |
} else { | |
sx = x - 2; | |
ex = bx + 2; | |
} | |
if (y <= by) { | |
sy = by - 2; | |
ey = y + 2; | |
} else { | |
sy = y - 2; | |
ey = by + 2; | |
} | |
var psx = paddle.position.x - 16, pex = paddle.position.x + 16, psy = paddle.position.y - 2, pey = paddle.position.y + 2; | |
if (sy <= pey && psy <= ey && sx <= pex && psx <= sx) { | |
var cx = -100 * dy / dx; | |
var cy = -100; | |
y += 2; | |
dy = -dy; | |
y += dy; | |
} | |
} | |
render(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment