Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Web VR-AR-XR Tutorial</title><meta name="description" content="Web VR-AR-XR Tutorial"> | |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> | |
| <script> | |
| let gameBlocks = []; | |
| let gameBlocksX = []; | |
| let gameBlocksY = []; | |
| let gameBlocksZ = []; | |
| let gameBlocksActive = []; | |
| const blockWidth = 0.8; | |
| const blockHeight = 0.2; | |
| const blockDepth = 0.2; | |
| let blockColor = '#4CC3D9'; | |
| let gameIsOn = 0; | |
| const gameLoopSpeed = 15; | |
| let topBorder = 3.5; | |
| let bottomBorder = 0.25; | |
| let rightBorder = 1.8; | |
| let leftBorder = -1.8; | |
| let scoreValue = 0; | |
| let boxGrabbed; | |
| let boxHovered; | |
| let livesValue = 3; | |
| let gamePaddleX = 0; | |
| let gamePaddleY = 0.3; | |
| let gamePaddleZ = -1; | |
| let gamePaddleWidth = 1; | |
| let gamePaddleHeight = 0.2; | |
| let gamePaddleDepth = 0.2; | |
| let gameBallX = 0; | |
| let gameBallY = 1.25; | |
| let gameBallZ = -1; | |
| let gameBallVelocityX = 0.045; | |
| let gameBallVelocityY = 0.075; | |
| const gameBallRadius = 0.15; | |
| let soundWarp = new Audio('warp-sfx-6897.mp3'); | |
| let soundImpact = new Audio('electronic-impact-soft-10019.mp3'); | |
| let soundChime = new Audio('chime-sound-7143.mp3'); | |
| function stopAllSounds(){ | |
| soundWarp.pause(); | |
| soundImpact.pause(); | |
| soundChime.pause(); | |
| soundWarp.currentTime = 0; | |
| soundImpact.currentTime = 0; | |
| soundChime.currentTime = 0; | |
| } | |
| function checkBlocks(){ | |
| let returnValue = 1; | |
| for (i = 0; i < 12; i++){ | |
| if(gameBlocksActive[i] == "1") | |
| returnValue = 0; | |
| } | |
| return returnValue; | |
| } | |
| function moveBall(){ | |
| gameBallX = gameBallX + gameBallVelocityX; | |
| gameBallY = gameBallY + gameBallVelocityY; | |
| } | |
| function updatePaddle(){ | |
| if(boxGrabbed == true){ | |
| gamePaddle.setAttribute('color', "#FFFF00"); | |
| } else if(boxHovered == true){ | |
| gamePaddle.setAttribute('color', "#FF0000"); | |
| } else { | |
| gamePaddle.setAttribute('color', "#0000FF"); | |
| } | |
| } | |
| function resetBall(){ | |
| gameBallX = Math.floor(Math.random() * ((rightBorder - 0.5) - (leftBorder + 0.5) + 1)) + (leftBorder + 0.5); | |
| gameBallY = 1.25; | |
| gameBallZ = -1; | |
| gameBallVelocityX = 0.045; | |
| gameBallVelocityY = 0.075; | |
| gameBall.setAttribute('position', gameBallX + ' ' + gameBallY + ' ' + gameBallZ); | |
| } | |
| function resetBlocks(){ | |
| for (i = 0; i < 12; i++) | |
| { | |
| gameBlocksActive[i] = "1"; | |
| let blockColor = '#' + parseInt(Math.random() * 0xffffff).toString(16); | |
| gameBlocks[i].setAttribute('color', blockColor); | |
| gameBlocks[i].setAttribute('opacity', '1'); | |
| } | |
| } | |
| function checkCollisions(){ | |
| let startGameText = document.getElementById('startGameText'); | |
| if(gameBallY >= topBorder){ | |
| gameBallVelocityY = gameBallVelocityY * -1; | |
| gameBallY = gameBallY - 0.1; | |
| } | |
| if(gameBallY <= bottomBorder){ | |
| gameBallVelocityY = gameBallVelocityY * -1; | |
| gameBallY = gameBallY + 0.1; | |
| if(gameIsOn == 1){ | |
| livesValue = livesValue - 1; | |
| let livesText = document.getElementById('livesText'); | |
| livesText.setAttribute('text', 'font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: blue; value: Lives: ' + livesValue); //update the life text | |
| resetBall(); | |
| stopAllSounds(); | |
| soundImpact.play(); | |
| if(livesValue == 0){ | |
| gameIsOn = 0; | |
| let gameOverText = document.getElementById('gameOverText'); | |
| gameOverText.setAttribute('text', 'opacity: 1; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: red; value: Game Over'); | |
| resetBlocks(); | |
| startGameText.setAttribute('text', 'opacity: 1; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: Start'); | |
| } | |
| } | |
| } | |
| if(gameBallX >= rightBorder){ | |
| gameBallVelocityX = gameBallVelocityX * -1; | |
| } | |
| if(gameBallX <= leftBorder){ | |
| gameBallVelocityX = gameBallVelocityX * -1; | |
| } | |
| for (i = 0; i < 12; i++){ | |
| if((((gameBallY + (gameBallRadius * .8)) >= (gameBlocksY[i] - blockHeight)) && ((gameBallY - (gameBallRadius * .8)) <= gameBlocksY[i])) && ((gameBallX + (gameBallRadius * .8)) >= (gameBlocksX[i])) && ((gameBallX - (gameBallRadius * .8)) <= (gameBlocksX[i] + blockWidth)) && (gameBlocksActive[i] == "1")){ | |
| gameBallVelocityY = gameBallVelocityY * -1; | |
| gameBlocksActive[i] = "0"; | |
| gameBlocks[i].setAttribute('opacity', '0'); | |
| if(checkBlocks()){ | |
| resetBlocks(); | |
| resetBall(); | |
| } | |
| if(gameIsOn == 1){ | |
| scoreValue = scoreValue + 1; | |
| let scoreText = document.getElementById('scoreText'); | |
| scoreText.setAttribute('text', 'font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: blue; value: Score: ' + scoreValue); | |
| stopAllSounds(); | |
| soundChime.play(); | |
| if(scoreValue == 12){ | |
| gameIsOn = 0; | |
| let youWinText = document.getElementById('youWinText'); | |
| youWinText.setAttribute('text', 'opacity: 1; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: You Win'); | |
| startGameText.setAttribute('text', 'opacity: 1; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: Start'); | |
| } | |
| } | |
| } | |
| } | |
| if( ((gameBallY + (gameBallRadius * .8)) >= (gamePaddleY - gamePaddleHeight)) && ((gameBallY - (gameBallRadius * .8)) <= (gamePaddleY) && ((gameBallX + (gameBallRadius * .8)) >= (gamePaddleX - gamePaddleWidth * .5)) && ((gameBallX - (gameBallRadius * .8)) <= (gamePaddleX + gamePaddleWidth *.5)))){ | |
| gameBallVelocityY = gameBallVelocityY * -1; //make the ball bounce | |
| } | |
| } | |
| AFRAME.registerComponent('handle-ball', { | |
| init: function () { | |
| this.throttledFunction = AFRAME.utils.throttle(this.gameLoop, gameLoopSpeed, this); | |
| }, | |
| gameLoop: function () { | |
| checkCollisions(); | |
| moveBall(); | |
| gameBall.setAttribute('position', gameBallX + ' ' + gameBallY + ' ' + gameBallZ); | |
| }, | |
| tick: function (t, dt) { | |
| this.throttledFunction(); | |
| } | |
| }); | |
| AFRAME.registerComponent('handle-paddle', { | |
| init: function () { | |
| let el = this.el; | |
| el.addEventListener('mousedown', function (evt) { | |
| boxGrabbed = true; | |
| }); | |
| el.addEventListener('mouseup', function (evt) { | |
| boxGrabbed = false; | |
| }); | |
| el.addEventListener('raycaster-intersected', evt => { | |
| this.raycaster = evt.detail.el; | |
| }); | |
| this.el.addEventListener('raycaster-intersected-cleared', evt => { | |
| this.raycaster = null; | |
| }); | |
| }, | |
| tick: function () { | |
| if (!this.raycaster) { | |
| boxHovered = false; | |
| updatePaddle(); | |
| return; | |
| } | |
| let intersection = this.raycaster.components.raycaster.getIntersection(this.el); | |
| if (!intersection) { | |
| boxHovered = false; | |
| updatePaddle(); | |
| return; | |
| } | |
| boxHovered = true; | |
| updatePaddle(); | |
| } | |
| }); | |
| AFRAME.registerComponent('cursor-listener', { | |
| init: function () { | |
| this.el.addEventListener('raycaster-intersected', evt => { | |
| this.raycaster = evt.detail.el; | |
| }); | |
| this.el.addEventListener('raycaster-intersected-cleared', evt => { | |
| this.raycaster = null; | |
| }); | |
| }, | |
| tick: function () { | |
| if (!this.raycaster) { | |
| return; | |
| } | |
| let intersection = this.raycaster.components.raycaster.getIntersection(this.el); | |
| if (!intersection) { | |
| return; | |
| } | |
| if(gameIsOn == 1){ | |
| let gamePaddle = document.getElementById('gamePaddle'); | |
| let tempY = gamePaddle.components.position.data.y; | |
| let tempZ = gamePaddle.components.position.data.z; | |
| let tempX = intersection.point.x; | |
| if(tempX < leftBorder){ | |
| tempX = leftBorder + (gamePaddleWidth/2); | |
| } | |
| if(tempX > rightBorder){ | |
| tempX = rightBorder - (gamePaddleWidth/2); | |
| } | |
| gamePaddleX = tempX; | |
| gamePaddle.setAttribute('position', gamePaddleX + ' ' + tempY + ' ' + tempZ); | |
| } | |
| } | |
| }); | |
| AFRAME.registerComponent('handle-start', { | |
| init: function () { | |
| let el = this.el; | |
| let startGameText = document.getElementById('startGameText'); | |
| el.addEventListener('mousedown', function (evt) { | |
| if(gameIsOn == 0){ | |
| startGameText.setAttribute('text', 'opacity: 0; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: Start'); | |
| resetBall(); | |
| resetBlocks(); | |
| scoreValue = 0; | |
| livesValue = 3; | |
| let scoreText = document.getElementById('scoreText'); | |
| scoreText.setAttribute('text', 'text: Score: ' + scoreValue); | |
| let livesText = document.getElementById('livesText'); | |
| livesText.setAttribute('text', 'text: Lives: ' + livesValue); | |
| let gameOverText = document.getElementById('gameOverText'); | |
| gameOverText.setAttribute('text', 'opacity: 0; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: red; value: Game Over'); | |
| let youWinText = document.getElementById('youWinText'); | |
| youWinText.setAttribute('text', 'opacity: 0; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: You Win'); | |
| startGameText.setAttribute('text', 'opacity: 0; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: Start'); | |
| gameIsOn = 1; | |
| stopAllSounds(); | |
| soundWarp.play(); | |
| }; | |
| }); | |
| el.addEventListener('raycaster-intersected', evt => { | |
| startGameText.setAttribute('text', "font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: #FF0000; value: Start;"); | |
| }); | |
| this.el.addEventListener('raycaster-intersected-cleared', evt => { | |
| startGameText.setAttribute('text', "font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: Start"); | |
| }); | |
| } | |
| }); | |
| window.onload = function (){ | |
| for (i = 0; i < 12; i++) | |
| { | |
| gameBlocks[i] = document.createElement('a-box'); | |
| gameBlocks[i].setAttribute('width', blockWidth); | |
| gameBlocks[i].setAttribute('height', blockHeight); | |
| gameBlocks[i].setAttribute('depth', blockDepth); | |
| blockColor = '#' + parseInt(Math.random() * 0xffffff).toString(16); | |
| gameBlocks[i].setAttribute('color', blockColor); | |
| gameBlocksActive[i] = "1"; | |
| } | |
| gameBlocksX[0] = -1.5; | |
| gameBlocksY[0] = 3.5; | |
| gameBlocksZ[0] = -1; | |
| gameBlocksX[1] = -0.5; | |
| gameBlocksY[1] = 3.5; | |
| gameBlocksZ[1] = -1; | |
| gameBlocksX[2] = 0.5 | |
| gameBlocksY[2] = 3.5; | |
| gameBlocksZ[2] = -1; | |
| gameBlocksX[3] = 1.5; | |
| gameBlocksY[3] = 3.5; | |
| gameBlocksZ[3] = -1; | |
| gameBlocksX[4] = -1.5; | |
| gameBlocksY[4] = 3; | |
| gameBlocksZ[4] = -1; | |
| gameBlocksX[5] = -0.5; | |
| gameBlocksY[5] = 3; | |
| gameBlocksZ[5] = -1; | |
| gameBlocksX[6] = 0.5 | |
| gameBlocksY[6] = 3; | |
| gameBlocksZ[6] = -1; | |
| gameBlocksX[7] = 1.5; | |
| gameBlocksY[7] = 3; | |
| gameBlocksZ[7] = -1; | |
| gameBlocksX[8] = -1.5; | |
| gameBlocksY[8] = 2.5; | |
| gameBlocksZ[8] = -1; | |
| gameBlocksX[9] = -0.5; | |
| gameBlocksY[9] = 2.5; | |
| gameBlocksZ[9] = -1; | |
| gameBlocksX[10] = 0.5 | |
| gameBlocksY[10] = 2.5; | |
| gameBlocksZ[10] = -1; | |
| gameBlocksX[11] = 1.5; | |
| gameBlocksY[11] = 2.5; | |
| gameBlocksZ[11] = -1; | |
| let scene = document.getElementById("scene"); | |
| for (i = 0; i < 12; i++) | |
| { | |
| scene.appendChild(gameBlocks[i]); | |
| gameBlocks[i].setAttribute('position', gameBlocksX[i] + ' ' + gameBlocksY[i] + ' ' + gameBlocksZ[i]); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <a-scene id="scene"> | |
| <a-assets> | |
| <a-mixin id="red" material="color: red"></a-mixin> | |
| <a-mixin id="green" material="color: green"></a-mixin> | |
| <a-mixin id="blue" material="color: blue"></a-mixin> | |
| <a-mixin id="url-red" material="color: #d63959"></a-mixin> | |
| <a-mixin id="cube" geometry="primitive: box"></a-mixin> | |
| </a-assets> | |
| <a-plane position="0 0 -3" rotation="-90 0 0" width="4" height="8" color="#a0a0a0"></a-plane> | |
| <a-plane position="0 2 -5" rotation="0 0 0" width="4" height="4" color="#bfabce"></a-plane> | |
| <a-plane id="moveTracker" color="#FFFFFF" rotation="0 0 0" position="0 0 -1.6" opacity="0" width="20" height="20" cursor-listener></a-plane> | |
| <a-sky src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg"></a-sky>- | |
| <a-entity position="0 0 3.8"> | |
| <a-camera look-controls wasd-controls="enabled: false"></a-camera> | |
| <a-entity laser-controls="hand: right"></a-entity> | |
| </a-entity> | |
| <a-entity id="startGameText" text="font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: Start" position="2.2 2 0.5" rotation="0 0 0" handle-start></a-entity> | |
| <a-entity id="gameOverText" text="opacity: 0; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: red; value: Game Over" position="1.9 2.5 0.5" rotation="0 0 0"></a-entity> | |
| <a-entity id="youWinText" text="opacity: 0; font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: green; value: You Win" position="2 2.5 0.5" rotation="0 0 0"></a-entity> | |
| <a-entity id="livesText" text="font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: blue; value: Lives: 3" position="4 3.8 -0.8" rotation="0 0 0"></a-entity> | |
| <a-entity id="scoreText" text="font: mozillavr; width: 5; lineHeight: 50; letterSpacing: 5; color: blue; value: Score: 0" position="0 3.8 -0.8" rotation="0 0 0"></a-entity> | |
| <a-box id="gamePaddle" color="#42f4aa" position="0 0.3 -1" depth="0.2" height="0.2" width="1" handle-paddle></a-box> | |
| <a-sphere id="gameBall" color="#FFFFFF" radius="0.15" position="0 1.25 -1" handle-ball></a-box> | |
| </a-scene> | |
| </body> | |
| </html> |