11
के बाद संक्रमण मैंने एक साधारण रॉकेट बनाया जो ग्रहों के बीच चलता है। मैं चाहता हूं कि रॉकेट ग्रह पर घूमने जा रहा है और उसके बाद इसका अनुवाद करें/ग्रह पर अपनी स्थिति को बदल दें।घूर्णन तत्व
मुझे पता चला कि मैं किस दिशा में जाना चाहता हूं लेकिन मैं यह नहीं समझ सकता कि पहले रोटेशन कैसे करें और रॉकेट को स्थानांतरित करने के लिए संक्रमण शुरू करें।
मैं इस तरह एक ग्रह एक बार उपयोगकर्ता क्लिक js से transorm लागू होते हैं:
rocket.css({"top": POSITIONS[element].top, "left": POSITIONS[element].left});
setRocketOrientation(destination);
const POSITIONS = {
A: {top: "25%", left: "27%"},
B: {top: "25%", left: "77%"},
C: {top: "60%", left: "27%"},
D: {top: "60%", left: "77%"}
}
var origin = "default";
var rocket = $("#rocket");
$(".planet").on("click", function(e) {
let element = $(this)[0].id;
rocket.css({"top": POSITIONS[element].top, "left": POSITIONS[element].left});
setRocketOrientation(element);
});
function setRocketOrientation (destination) {
let orientation = null;
switch(destination) {
case "A":
if(origin === "default" || origin === "D")
orientation = "-45deg"
else if(origin === "B")
orientation = "-90deg"
else if(origin === "C")
orientation = "360deg"
break;
case "B":
if(origin === "default" || origin === "C")
orientation = "45deg"
else if(origin === "A")
orientation = "90deg"
else if(origin === "D")
orientation = "360deg"
break;
case "C":
if(origin === "default" || origin === "B")
orientation = "-120deg"
else if(origin === "A")
orientation = "-180deg"
else if(origin === "D")
orientation = "-90deg"
break;
case "D":
if(origin === "default" || origin === "A")
orientation = "120deg"
else if(origin === "B")
orientation = "180deg"
else if(origin === "D")
orientation = "90deg"
break;
}
rocket.css({"transform": "rotate(" + orientation + ")"});
}html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #20202c 0%,#515175 100%);
font-family: 'Quicksand', sans-serif;
}
body {
height: 100%;
width: 100%;
background:url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat center top;
}
.planet {
height: 6em;
position: absolute;
}
#A { top: 25%; left: 25%; }
#B { top: 25%; left: 75%; }
#C { top: 60%; left: 25%; }
#D { top: 60%; left: 75%; }
#rocket {
position: absolute;
left: 50%;
top: 35%;
height: 5em;
transition: all 2s ease-in;
/* animation: shake 0.2s ease-in-out 0.2s infinite alternate; */
}
@keyframes shake {
from { transform: rotate(1deg); }
to { transform-origin: center center; transform: rotate(-1deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<h1 class="title">Codevember <span class="number"> #1 </span></h1>
<h2 class="type">Galaxy</h2>
<div class="social"></div>
</div>
<img id="A" class="planet" src="https://i.imgsafe.org/a4/a4262a44b5.png">
<img id="B" class="planet" src="https://i.imgsafe.org/a4/a41a11c02c.png">
<img id="C" class="planet" src="https://i.imgsafe.org/a4/a41a18080a.png">
<img id="D" class="planet" src="https://i.imgsafe.org/a4/a4262a44d6.png">
<img id="rocket" src="https://i.imgsafe.org/a4/a404bdc703.png"></img>
मैं प्रश्न में एक टुकड़ा के रूप में codepen सामग्री शामिल है, ताकि जो कुछ भी भविष्य में codepen लिए हो सकता है, यह अभी भी यहाँ हो जाएगा। और यह भी कि अन्य आसानी से स्निपेट को उनके उत्तरों और प्रयोग के साथ प्रयोग कर सकते हैं। – Connum
धन्यवाद! अगली बार जब मैं कुछ पूछूं तो मैं इसे ध्यान में रखूंगा! – Romina