File size: 4,354 Bytes
7194eb0 0f1b497 |
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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Frogger Game</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- Set the background color to blue -->
<a-sky color="#3498db"></a-sky>
<!-- Create a camera -->
<a-entity camera position="0 1.6 0" wasd-controls-enabled="false" qweasdzc-controls="enabled: true"></a-entity>
<!-- Add a ground plane to the scene -->
<a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#4CAF50"></a-plane>
<!-- Add a parallax scrolling background -->
<a-plane position="0 0 -10" rotation="-90 0 0" width="100" height="100" src="background.png" material="repeat: 10 10"></a-plane>
<!-- Add a player model -->
<a-entity id="player" position="0 0.5 -2" scale="0.5 0.5 0.5" gltf-model="frog.glb" animation-mixer></a-entity>
<!-- Add some obstacles -->
<a-box position="0 0.5 2" scale="1 1 1" color="#e74c3c"></a-box>
<a-cone position="2 0.5 4" scale="1 1 1" color="#f1c40f"></a-cone>
<a-cylinder position="-2 0.5 6" scale="1 1 1" color="#3498db"></a-cylinder>
<!-- Add some lighting to the scene -->
<a-light type="point" position="0 5 0" color="#ffffff"></a-light>
<a-light type="ambient" color="#ffffff"></a-light>
</a-scene>
<script>
// Define the QWEASDZXC controls
AFRAME.registerComponent('qweasdzc-controls', {
schema: {
enabled: { default: false }
},
init: function () {
var el = this.el;
document.addEventListener('keydown', function (evt) {
if (!el.components['qweasdzc-controls'].data.enabled) return;
switch (evt.key) {
case 'q':
el.setAttribute('wasd-controls', 'acceleration', 500);
el.setAttribute('wasd-controls', 'rotationAcceleration', 5);
el.setAttribute('wasd-controls', 'rotationSensitivity', 5);
el.setAttribute('wasd-controls', 'wsAxis', '-z');
el.setAttribute('wasd-controls', 'adAxis', '-x');
break;
case 'w':
el.setAttribute('wasd-controls', 'acceleration', 1000);
el.setAttribute('wasd-controls', 'wsAxis', '-z');
break;
case 'e':
el.setAttribute('wasd-controls', 'acceleration', 500);
el.setAttribute('wasd-controls', 'rotationAcceleration', -5);
el.setAttribute('wasd-controls', 'rotationSensitivity', 5);
el.setAttribute('wasd-controls', 'wsAxis', '-z');
el.setAttribute('wasd-controls', 'adAxis', 'x');
break;
case 'a':
el.setAttribute('wasd-controls', 'acceleration', 1000);
el.setAttribute('wasd-controls', 'adAxis', '-x');
break;
case 's':
el.setAttribute('wasd-controls', 'acceleration', -1000);
el.setAttribute('wasd-controls', 'wsAxis', 'z');
break;
case 'd':
el.setAttribute('wasd-controls', 'acceleration', 1000);
el.setAttribute('wasd-controls', 'adAxis', 'x');
break;
case 'z':
el.setAttribute('wasd-controls', 'acceleration', 500);
el.setAttribute('wasd-controls', 'rotationAcceleration', 5);
el.setAttribute('wasd-controls', 'rotationSensitivity', -5);
el.setAttribute('wasd-controls', 'wsAxis', 'z');
el.setAttribute('wasd-controls', 'adAxis', '-x');
break;
case 'x':
el.setAttribute('wasd-controls', 'acceleration', 1000);
el.setAttribute('wasd-controls', 'wsAxis', 'z');
break;
case 'c':
el.setAttribute('wasd-controls', 'acceleration', 500);
el.setAttribute('wasd-controls', 'rotationAcceleration', -5);
el.setAttribute('wasd-controls', 'rotationSensitivity', -5);
el.setAttribute('wasd-controls', 'wsAxis', 'z');
el.setAttribute('wasd-controls', 'adAxis', 'x');
break;
default:
break;
}
});
document.addEventListener('keyup', function (evt) {
if (!el.components['qweasdzc-controls'].data.enabled) return;
switch (evt.key) {
case 'q':
case 'w':
case 'e':
case 'a':
case 's':
case 'd':
case 'z':
case 'x':
case 'c':
el.setAttribute('wasd-controls', 'acceleration', 0);
el.setAttribute('wasd-controls', 'rotationAcceleration', 0);
el.setAttribute('wasd-controls', 'rotationSensitivity', 0);
break;
default:
break;
}
});
}
});
</script>
</body>
</html> |