sfpgmr/README.md

## README.md

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

  
## 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>
	<!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>