awacke1/HTML5.Aframe.Frogger.Test
1
1<!DOCTYPE html>2<html>3<head>4 <meta charset="utf-8">5 <title>Frogger Game</title>6 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>7</head>8<body>9 <a-scene>10 <!-- Set the background color to blue -->11 <a-sky color="#3498db"></a-sky>12 13 <!-- Create a camera -->14 <a-entity camera position="0 1.6 0" wasd-controls-enabled="false" qweasdzc-controls="enabled: true"></a-entity>15 16 <!-- Add a ground plane to the scene -->17 <a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#4CAF50"></a-plane>18 19 <!-- Add a parallax scrolling background -->20 <a-plane position="0 0 -10" rotation="-90 0 0" width="100" height="100" src="background.png" material="repeat: 10 10"></a-plane>21 22 <!-- Add a player model -->23 <a-entity id="player" position="0 0.5 -2" scale="0.5 0.5 0.5" gltf-model="frog.glb" animation-mixer></a-entity>24 25 <!-- Add some obstacles -->26 <a-box position="0 0.5 2" scale="1 1 1" color="#e74c3c"></a-box>27 <a-cone position="2 0.5 4" scale="1 1 1" color="#f1c40f"></a-cone>28 <a-cylinder position="-2 0.5 6" scale="1 1 1" color="#3498db"></a-cylinder>29 30 <!-- Add some lighting to the scene -->31 <a-light type="point" position="0 5 0" color="#ffffff"></a-light>32 <a-light type="ambient" color="#ffffff"></a-light>33 </a-scene>34 35 <script>36 // Define the QWEASDZXC controls37 AFRAME.registerComponent('qweasdzc-controls', {38 schema: {39 enabled: { default: false }40 },41 42 init: function () {43 var el = this.el;44 45 document.addEventListener('keydown', function (evt) {46 if (!el.components['qweasdzc-controls'].data.enabled) return;47 switch (evt.key) {48 case 'q':49 el.setAttribute('wasd-controls', 'acceleration', 500);50 el.setAttribute('wasd-controls', 'rotationAcceleration', 5);51 el.setAttribute('wasd-controls', 'rotationSensitivity', 5);52 el.setAttribute('wasd-controls', 'wsAxis', '-z');53 el.setAttribute('wasd-controls', 'adAxis', '-x');54 break;55 case 'w':56 el.setAttribute('wasd-controls', 'acceleration', 1000);57 el.setAttribute('wasd-controls', 'wsAxis', '-z');58 break;59 case 'e':60 el.setAttribute('wasd-controls', 'acceleration', 500);61 el.setAttribute('wasd-controls', 'rotationAcceleration', -5);62 el.setAttribute('wasd-controls', 'rotationSensitivity', 5);63 el.setAttribute('wasd-controls', 'wsAxis', '-z');64el.setAttribute('wasd-controls', 'adAxis', 'x');65break;66case 'a':67el.setAttribute('wasd-controls', 'acceleration', 1000);68el.setAttribute('wasd-controls', 'adAxis', '-x');69break;70case 's':71el.setAttribute('wasd-controls', 'acceleration', -1000);72el.setAttribute('wasd-controls', 'wsAxis', 'z');73break;74case 'd':75el.setAttribute('wasd-controls', 'acceleration', 1000);76el.setAttribute('wasd-controls', 'adAxis', 'x');77break;78case 'z':79el.setAttribute('wasd-controls', 'acceleration', 500);80el.setAttribute('wasd-controls', 'rotationAcceleration', 5);81el.setAttribute('wasd-controls', 'rotationSensitivity', -5);82el.setAttribute('wasd-controls', 'wsAxis', 'z');83el.setAttribute('wasd-controls', 'adAxis', '-x');84break;85case 'x':86el.setAttribute('wasd-controls', 'acceleration', 1000);87el.setAttribute('wasd-controls', 'wsAxis', 'z');88break;89case 'c':90el.setAttribute('wasd-controls', 'acceleration', 500);91el.setAttribute('wasd-controls', 'rotationAcceleration', -5);92el.setAttribute('wasd-controls', 'rotationSensitivity', -5);93el.setAttribute('wasd-controls', 'wsAxis', 'z');94el.setAttribute('wasd-controls', 'adAxis', 'x');95break;96default:97break;98}99});100 document.addEventListener('keyup', function (evt) {101 if (!el.components['qweasdzc-controls'].data.enabled) return;102 switch (evt.key) {103 case 'q':104 case 'w':105 case 'e':106 case 'a':107 case 's':108 case 'd':109 case 'z':110 case 'x':111 case 'c':112 el.setAttribute('wasd-controls', 'acceleration', 0);113 el.setAttribute('wasd-controls', 'rotationAcceleration', 0);114 el.setAttribute('wasd-controls', 'rotationSensitivity', 0);115 break;116 default:117 break;118 }119 });120 }121});122 123 </script>124</body>125</html>