Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>New Orleans Word Quest</title> | |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> | |
| </head> | |
| <body> | |
| <a-scene> | |
| <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> | |
| <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> | |
| <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> | |
| <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> | |
| <a-entity text="value: Welcome to the New Orleans Word Quest! 🎭"></a-entity> | |
| </a-scene> | |
| <script> | |
| AFRAME.registerComponent('move-in-bounds', { | |
| schema: { | |
| minX: { type: 'number', default: -5 }, | |
| maxX: { type: 'number', default: 5 }, | |
| minY: { type: 'number', default: 0 }, | |
| maxY: { type: 'number', default: 3 }, | |
| minZ: { type: 'number', default: -5 }, | |
| maxZ: { type: 'number', default: 5 } | |
| }, | |
| tick: function () { | |
| var data = this.data; | |
| var position = this.el.object3D.position; | |
| position.x = Math.min(Math.max(position.x, data.minX), data.maxX); | |
| position.y = Math.min(Math.max(position.y, data.minY), data.maxY); | |
| position.z = Math.min(Math.max(position.z, data.minZ), data.maxZ); | |
| } | |
| }); | |
| AFRAME.registerComponent('show-text', { | |
| schema: { | |
| text: { type: 'string', default: 'Default Text' } | |
| }, | |
| init: function () { | |
| this.el.setAttribute('text', { value: this.data.text }); | |
| } | |
| }); | |
| var entities = [ | |
| { type: '🏰', text: 'Castle' }, | |
| { type: '🌳', text: 'Tree' }, | |
| { type: '🌊', text: 'Wave' } | |
| ]; | |
| entities.forEach(function(entity, index) { | |
| var newEntity = document.createElement('a-entity'); | |
| newEntity.setAttribute('geometry', 'primitive: box'); | |
| newEntity.setAttribute('material', 'color: #FFC65D'); | |
| newEntity.setAttribute('position', { x: index * 2 - 2, y: 1, z: -3 }); | |
| newEntity.setAttribute('move-in-bounds', ''); | |
| newEntity.setAttribute('show-text', { text: entity.type + ' ' + entity.text }); | |
| document.querySelector('a-scene').appendChild(newEntity); | |
| }); | |
| </script> | |
| </body> | |
| </html> |