|
|
<!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> |
|
|
|
|
|
<a-sky color="#3498db"></a-sky> |
|
|
|
|
|
|
|
|
<a-entity camera position="0 1.6 0" wasd-controls-enabled="false" qweasdzc-controls="enabled: true"></a-entity> |
|
|
|
|
|
|
|
|
<a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#4CAF50"></a-plane> |
|
|
|
|
|
|
|
|
<a-plane position="0 0 -10" rotation="-90 0 0" width="100" height="100" src="background.png" material="repeat: 10 10"></a-plane> |
|
|
|
|
|
|
|
|
<a-entity id="player" position="0 0.5 -2" scale="0.5 0.5 0.5" gltf-model="frog.glb" animation-mixer></a-entity> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<a-light type="point" position="0 5 0" color="#ffffff"></a-light> |
|
|
<a-light type="ambient" color="#ffffff"></a-light> |
|
|
</a-scene> |
|
|
|
|
|
<script> |
|
|
|
|
|
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> |
