Skip to content

Instantly share code, notes, and snippets.

@sfpgmr

sfpgmr/README.md

Last active August 29, 2015 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sfpgmr/807721de254de8d98853 to your computer and use it in GitHub Desktop.
Save sfpgmr/807721de254de8d98853 to your computer and use it in GitHub Desktop.
Download ZIP
スカッシュゲームを作る - パドルの追加
Raw
README.md

パドルを追加して、跳ね返るようにする

Raw
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="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