Spaces:

awacke1
/

HTML5-Javascript-3D-Breakout-Game

Running

App Files Files Community

awacke1 commited on Mar 11, 2023

Commit

adf7ffb

1 Parent(s): d2ce9b2

Update index.html

Browse files

Files changed (1) hide show

index.html +139 -16

index.html CHANGED Viewed

@@ -1,19 +1,142 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!DOCTYPE html>
 <html>
+<head>
+	<meta charset="UTF-8">
+	<title>🤓🕹️📱 3D Breakout Game</title>
+	<style>
+		body { margin: 0; }
+		canvas { width: 100%; height: 100%; }
+		#score {
+			position: absolute;
+			top: 0;
+			left: 50%;
+			transform: translateX(-50%);
+			font-size: 24px;
+			font-weight: bold;
+			color: white;
+			text-shadow: 1px 1px 1px black;
+		}
+	</style>
+	<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+</head>
+<body>
+	<canvas id="gameCanvas"></canvas>
+	<div id="score">Score: 0</div>
+	<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 ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
+		var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+		var balls = [];
+		var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
+		var bricks = [];
+		var score = 0;
+		var scoreElement = document.getElementById('score');
+		function addBall() {
+			var ball = new THREE.Mesh(ballGeometry, ballMaterial);
+			ball.position.set((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25);
+			ball.velocity = new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize();
+			scene.add(ball);
+			balls.push(ball);
+		}
+		function addBrick() {
+			var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
+			var brick = new THREE.Mesh(brickGeometry, brickMaterial);
+			brick.position.set((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50);
+			scene.add(brick);
+			bricks.push(brick);
+		}
+		for (var i = 0; i < 50; i++) {
+			addBrick();
+		}
+		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);
+scene.add(paddle);
+function animate() {
+requestAnimationFrame(animate);
+var paddleSpeed = 1.5;
+if (keys["87"] || keys["38"]) { // w or up arrow
+paddle.position.z -= paddleSpeed;
+}
+if (keys["83"] || keys["40"]) {
+paddle.position.z += paddleSpeed;
+}
+if (keys["65"] || keys["37"]) { // a or left arrow
+paddle.position.x -= paddleSpeed;
+}
+if (keys["68"] || keys["39"]) { // d or right arrow
+paddle.position.x += paddleSpeed;
+}
+var mouseSpeed = 0.1;
+if (mouseX !== null && mouseY !== null) {
+paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
+paddle.position.z = -(mouseY / window.innerHeight) * 50 + 25;
+}
+for (var i = 0; i < balls.length; i++) {
+balls[i].position.add(balls[i].velocity);
+if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) {
+balls[i].velocity.x = -balls[i].velocity.x;
+}
+if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) {
+balls[i].velocity.y = -balls[i].velocity.y;
+}
+if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) {
+balls[i].velocity.z = -balls[i].velocity.z;
+}
+if (balls[i].position.y - 0.5 < -15 && balls[i].position.x + 0.5 > paddle.position.x - 2 && balls[i].position.x - 0.5 < paddle.position.x + 2 && balls[i].position.z + 0.5 > paddle.position.z - 0.5 && balls[i].position.z - 0.5 < paddle.position.z + 0.5) {
+balls[i].velocity.y = Math.abs(balls[i].velocity.y);
+}
+for (var j = 0; j < bricks.length; j++) {
+if (balls[i].position.distanceTo(bricks[j].position) <= 2) {
+scene.remove(bricks[j]);
+bricks.splice(j, 1);
+balls[i].velocity.negate();
+addBrick();
+score++;
+scoreElement.innerHTML = "Score: " + score;
+}
+}
+}
+renderer.render(scene, camera);
+}
+var keys = {};
+var mouseX = null;
+var mouseY = null;
+document.addEventListener('mousedown', function(event) {
+if (event.button === 0) {
+addBrick();
+}
+if (event.button === 2) {
+addBall();
+}
+});
+document.addEventListener('keydown', function(event) {
+keys[event.keyCode] = true;
+});
+document.addEventListener('keyup', function(event) {
+keys[event.keyCode] = false;
+});
+document.addEventListener('mousemove', function(event) {
+mouseX = event.clientX;
+mouseY = event.clientY;
+});
+document.addEventListener('mouseleave', function(event) {
+mouseX = null;
+mouseY =null;
+});
+animate();
+</script>
+</body>
 </html>