Spaces:
Running
Running
File size: 2,404 Bytes
d881721 |
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 64 65 |
<!DOCTYPE html>
<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> |