File size: 2,149 Bytes
78fde7c
 
f78b508
f074757
 
 
 
 
 
 
f78b508
 
81071a4
f074757
 
 
 
 
 
 
 
 
 
 
 
a47e5c7
 
 
f074757
 
 
 
a47e5c7
f074757
a47e5c7
f074757
 
 
 
 
 
 
 
 
 
 
 
a47e5c7
 
 
 
 
 
 
 
 
 
f074757
 
 
0ac418d
f074757
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>🤓🕹️📱 3D Breakout Game</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
</head>
<body>
  
    <canvas id="gameCanvas"></canvas>

    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 30, 0);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);
        var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
        renderer.setClearColor(0x000000);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        var light = new THREE.PointLight(0xffffff, 1, 100);
        light.position.set(0, 30, 0);
        scene.add(light);
        
        var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
        var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
        var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
        paddle.position.y = -5; // Adjust the paddle's vertical position if necessary
        scene.add(paddle);
        
        var keys = {};
        var mouseX = null;
        var mouseY = null;
        document.addEventListener('mousemove', function(event) {
            mouseX = event.clientX;
            mouseY = event.clientY;
        });
        document.addEventListener('mouseleave', function(event) {
            mouseX = null;
            mouseY = null;
        });

        function animate() {
            requestAnimationFrame(animate);

            if (mouseX !== null && mouseY !== null) {
                paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
                paddle.position.z = (mouseY / window.innerHeight) * 50 - 25; // Corrected for mouse movement
            }

            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>