File size: 2,507 Bytes
4bd7d67 34a96df ab2a418 34a96df ab2a418 34a96df |
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flying Plane Game</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('fly', {
schema: {
speed: { default: 1 }
},
tick: function() {
var plane = this.el;
var rotation = plane.getAttribute('rotation');
var position = plane.getAttribute('position');
// Move plane forward
var direction = new THREE.Vector3();
plane.object3D.getWorldDirection(direction);
plane.setAttribute(
'position',
`${position.x + direction.x * this.data.speed} ${position.y + direction.y * this.data.speed} ${position.z + direction.z * this.data.speed}`
);
// Rotate plane left or right
if (keys.left) {
plane.setAttribute('rotation', `${rotation.x} ${rotation.y - 1} ${rotation.z}`);
} else if (keys.right) {
plane.setAttribute('rotation', `${rotation.x} ${rotation.y + 1} ${rotation.z}`);
}
}
});
AFRAME.registerComponent('skybox', {
schema: {
speed: { default: 0.01 }
},
tick: function() {
var sky = this.el;
var rotation = sky.getAttribute('rotation');
sky.setAttribute('rotation', `${rotation.x} ${rotation.y + this.data.speed} ${rotation.z}`);
}
});
var keys = {
left: false,
right: false
};
window.addEventListener('keydown', function(event) {
if (event.key === 'ArrowLeft') {
keys.left = true;
} else if (event.key === 'ArrowRight') {
keys.right = true;
}
});
window.addEventListener('keyup', function(event) {
if (event.key === 'ArrowLeft') {
keys.left = false;
} else if (event.key === 'ArrowRight') {
keys.right = false;
}
});
</script>
</head>
<body>
<a-scene>
<a-entity id="plane" fly speed="0.1" position="0 0 -10" rotation="0 0 0">
<a-entity
geometry="primitive: box; width: 2; height: 0.5; depth: 6"
material="color: red"
position="0 0 0"
></a-entity>
</a-entity>
<a-sky src="Spike.png" rotation="0 0 0" skybox speed="0.01"></a-sky>
<a-plane src="Tronworld.png" rotation="-90 0 0" position="0 -1 0"></a-plane>
</a-scene>
</body>
</html> |