スカッシュゲームを作る - パドルの追加

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