The buttons should move a few arrows to the right and left I choose in the check box which arrow I want and then it should move each time + or - 20 degrees so that the breasts rotate.
The buttons work but they get stuck and the arrows do not move smoothly.
curretnAngle is a new angle that I compare to each arrow and its angles and then in the second function I change it to 20 degrees each time
const handleChange=(e)=>{
let curretnAngle;
if (props.selectedButton=='turret') {
console.log(props.selectedButton);
curretnAngle = props.angleTurret
console.log(props.angleTurret, curretnAngle);
}
else if (props.selectedButton=='lazer') {
curretnAngle= props.angleLazer
}
else{
curretnAngle = props.radanglee
}
switch (e.target.name){
case 'minus':
console.log(curretnAngle,props.selectedButton);
props.handlerotat(curretnAngle-20)
console.log('minus')
break;
case 'plus':
console.log(curretnAngle,props.selectedButton);
props.handlerotate(curretnAngle+20)
console.log('plus')
break;
}
const handlerotate=(newAngle)=>{
switch (selectedButton) {
case 'turret':
setAngleTurret(newAngle)
break;
case 'lazer':
setAngleLazer(newAngle)
break;
case 'lezerr':
setAnglerad(newAngle)
break;
}
}
Related
This question already has answers here:
Javascript style.left is empty string
(4 answers)
Closed 2 years ago.
I'm attempting to learn the absolute basics of game-making, and I'm wondering why I can move an img but not a div element.
JS:
var element;
function moveSelection(evt) {
element = document.getElementById("char");
switch (evt.keyCode) {
case 37:
element.style.left = parseInt(element.style.left) - 10;
break;
case 39:
element.style.left = parseInt(element.style.left) + 10;
break;
case 38:
element.style.top = parseInt(element.style.top) - 10;
break;
case 40:
element.style.top = parseInt(element.style.top) + 10;
break;
}
}
window.addEventListener('keydown', moveSelection);
Now, if I have an img tag with the id of char, I can move it with my arrow keys.
<img src="" id="char">
But if I remove that image and replace it with a div,
<div id="char"></div>
it doesn't let me move it.
There are multiple issues with the code and I'm not sure how it could work with images.
For this to work, a few things need to be done:
Ensure the target element's CSS has the position: absolute property set. You can also use relative, fixed or sticky depending on need.
Use getComputedStyle instead of accessing style directly. The style property will only contain values set by a property or attribute.
Append a measurement unit like "px" to the parsed number.
Here's a minimal, complete example:
const element = document.getElementById("char");
const charStyle = getComputedStyle(element);
function moveSelection(evt) {
evt.preventDefault();
switch (evt.keyCode) {
case 37:
element.style.left = parseInt(charStyle.left) - 10 + "px";
break;
case 39:
element.style.left = parseInt(charStyle.left) + 10 + "px";
break;
case 38:
element.style.top = parseInt(charStyle.top) - 10 + "px";
break;
case 40:
element.style.top = parseInt(charStyle.top) + 10 + "px";
break;
}
}
document.addEventListener("keydown", moveSelection);
#char {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
<div id="char"></div>
Having said that, this sort of design should strike you as an antipattern because it serializes and de-serializes attributes from DOM elements. This is a poor substitute for creating a good old fashioned data structure like:
const character = {x: 0, y: 0, stepSize: 10 /*... more properties ...*/};
Also, having the keyboard directly triggering the character's movement causes awkward retriggering and generally unreliable UX. It's best to use an animation loop like requestAnimationFrame for such cases. The keyboard handler will flip on and off flags for each key but won't actually update anything directly. The animation loop will handle the repositioning smoothly. Your JS script will keep game/animation state and only dump it to the DOM as a decoupled view when it's time to render a frame. This way, data flows in one direction and your app will be easier to write and maintain.
So I am a bit new to javascript and I am looking to create a switch statement for keyboard functions relating to my animation. So if I were to click backspace it stops the animation, and when I click enter it resumes etc. That works but im also trying to get it to advance to the next frame or the previous frame when i click the left or right key, and it isn't entirely working. Sorry this is my first post but any suggestions or help would be great!
var roote = this;
addEventListener("keydown", controlBox);
function controlBox(evt){
switch(evt.keyCode){
case 8:
roote.box.stop();
break;
case 13:
roote.box.play();
break;
//previous frame
case 37:
roote.box.prevFrame();
break;
//next frame
case 39:
roote.box.nextFrame();
break;
}
}
var theFrame = document.getElementsByTagName("frame")[0];
var frameNumb = parseInt(theFrame, 10);
function prevFrame(){
roote.gotoAndStop((frameNumb) -1);
}
function nextFrame(){
roote.gotoAndStop((frameNumb) +1);
}
var myFrame = roote.currentFrame();
case 37:
roote.gotoAndStop(myFrame + 1); //go to next frame
break;
case 39:
roote.gotoAndStop(myFrame - 1); //go to previous frame
break;
answered my own question, was overthinking it.
After asking user input , how to do a switch if answer is "yes" and another switch if answer is "no"? I believe it needs to be written as if/else, but am not sure of the format.
Question: Do you want pizza?
If true: do a switch for size
If false: do a switch for cake flavor
Maybe this will give you an idea. You also could either replace else / if with a switch or the switch with else / if.
function go() {
var input = document.getElementById('input').value;
if (input.toLowerCase() == "yes") {
// Here comes the switch for the size
var size = prompt("Enter size:");
console.log(size);
switch (size) {
case "20":
alert("Okay, size will be 20");
break;
case "25":
alert("Okay, size will be 25");
break;
default:
alert("Size must be 20 or 25");
}
} else if (input.toLowerCase() == "no") {
// And here the switch for the flavor
var flavor = prompt("Please enter the flavor:");
switch (flavor) {
case "whatever":
alert("Okay, it will taste like whatever");
break;
case "some":
alert("Okay, it will taste like some");
break;
default:
alert("It must taste like either whatever or some");
}
}
}
Do you want pizza?
<input id="input" type="text">
<button onclick="go()">Submit</button>
I have this on HTML:
<script type="text/javascript" src="./scripts/changeImage.js"></script>
<img id="myimage" onclick="changeImage()" src="./images/avatars/1.png"/>
This is the function
var cc=0;
function changeImage(){
if(cc==-1){
cc=0;
document.getElementById('myimage').src="./images/avatars/1.png";
} else if (cc==0){
cc=1;
document.getElementById('myimage').src="./images/avatars/2.png";
} else if (cc==1){
cc=2;
document.getElementById('myimage').src="./images/avatars/3.png";
} else if (cc==2){
cc=0;
document.getElementById('myimage').src="./images/avatars/4.png";
}
}
I must click 2 times to change the image. I tried some tricks but nothing.
i must click 2 times to change the image ...
At a guess, I'd say that cc starts out being -1, and so you follow this branch through your code:
cc=0;
document.getElementById('myimage').src="./images/avatars/1.png";
Since that's setting the same path that's already on the image, nothing changes. But then cc is 0, so the second click follows the next branch.
BTW, this is what switch statements are for:
function changeImage() {
switch (cc) {
case -1:
document.getElementById('myimage').src = "./images/avatars/1.png";
break;
case 0:
document.getElementById('myimage').src = "./images/avatars/2.png";
break;
case 1:
document.getElementById('myimage').src = "./images/avatars/3.png";
break;
case 2:
document.getElementById('myimage').src = "./images/avatars/4.png";
break;
}
cc = cc == 2 ? 0 : cc + 1;
}
Or a map:
var imageMap = {
-1: "./images/avatars/1.png",
0: "./images/avatars/2.png",
1: "./images/avatars/3.png",
2: "./images/avatars/4.png"
};
function changeImage() {
document.getElementById('myimage').src = imageMap[cc];
cc = cc == 2 ? 0 : cc + 1;
}
In both of the above, I've replicated the logic of your if/else series, but note that the logic of your if/else series never lets you get back to 1.png.
Also note that I'm assuming the real image paths are more complex, because otherwise you'd just want to key off the fact that you have 1.png, 2.png, etc.
I am trying to code a menu bar for my site in JS - the problem I'm having is that I am using a variable as a 'which category is unfolded' switch, and it does not seem to register. Firebug seems to tell me it's not defined, and or stays zero.
var navOpen = 0;
$(function() {
///////////bunch of other functions here
//When designWork is clicked
$(".designwork").click(function(){
switch(navOpen)
{
case 0:
$(".navsub:hidden",this).slideDown("slow");
navOpen = 1; break;
case 1:
break;
case 2:
$("div.artProjects .navsub").slideUp("fast");
$(".navsub:hidden",this).slideDown("slow");
navOpen = 1; break;
default:
break;
}
});
//When artProjects is clicked
$(".artprojects").click(function(){
switch(navOpen)
{
case 0:
$(".navsub:hidden",this).slideDown("slow");
navOpen = 2; break;
case 1:
$("div.designWork .navsub").slideUp("fast");
$(".navsub:hidden",this).slideDown("slow");
navOpen = 2; break;
case 2:
break;
default:
break;
}
});
});
For a reason that is probably obvious, but I'm not seeing it, both menus open when clicked in the manner they should, but they do not close the other menu... help me out here, what am I missing?
$("div.designWork .navsub") should be $("div.designwork .navsub")
and
$("div.artProjects .navsub") should be $("div.artProjects .navsub")
capitals ...
Well, I think it has to do with the fact that in both cases you refer to ".navsub:hidden" without specifying precisely which navsub you really mean. You probably want to add either div.designWork or div.artProjects in front of it to specify which menu should slidedown.