I made a test game where a guy shoots another guy, that's pretty much it.
The problem is I can't properly target the enemy. I'll show you what I mean:
As you see, the bullets hit the enemy fine, but they still hit it even when I go down, the bullets hit when their style.left is equal to the enemy's style.left. I tried to add another exception like this: If(bullet.style.left == document.getElementById("foe").style.left && bullet.style.top >= document.getElementById("foe").style.top) and it doesn't work..
I'm sure that I'm making a pretty stupid mistake here.
Here's the code: http://jsfiddle.net/dg89c/2/
well..The target seems to me to be top=0 and the bullet will always be top>0 as it is below the target.
0,0 of the screen is top left. As u go down, top increases. U read this vale (top:x) as x distance from top of page.
You have a hit if the bullet's top is between (in pseudocode) enemy.top and enemy.top + enemy.height. Otherwise, it's not a hit.
Related
I'm trying to make a click and drag the background in Javascript, so I made this fiddle. But it has a problem.
When you click and drag to the left, the background moves to the right, so I track the position of the mouse, compare it to the mousedown, and with the difference I scroll the body. But, when it reaches to 0, the difference is negative so if you move past that difference and then move to the right again, you have to move the amount of pixels that you are past, which makes it weird.
So to fix this, I put this code:
if(difX < 0){
md.x = mm.x;
}
which makes that, if the difference is less than 0 (i.e: reached the edge), the mousedown position is the same as the mousemove, so that when you move to the other side, the difference is no longer negative and can start increasing again.
The problem is that it jumps when you reach the edge.
I did this only with the X position, but I'll do the same for the Y once I solve it. Thanks in advance!
Nevermind, solved it out, the problem was the the sl variable didn't change when it reached a negative difference, so it used the one stored on mouseup and it jumped because of the difference between those numbers, here's the solved fiddle
I'm relatively new to coding, so bear with me. I'm trying to create a menu (for an app) that appears when the user taps and holds on the screen. Basically I'm looking to make a menu similar to the Pinterest app click and hold menu functionality. (see it here: http://techcrunch.com/2013/07/31/pinterests-mobile-app-gets-path-like-animations-readies-personalization-options/ )
I've found the code to create something similar (http://www.jqueryscript.net/menu/Animated-Arc-Popup-Menu-with-jQuery-CSS3-Transitions.html) but I'd like it to appear where the user holds on the screen, not in a fixed location. I've talked with a professor about this and he suggested using offset(), but I'm not quite sure how to implement it. The menu would be hidden until the user triggers it.
Some general advice for programming is to break the program down into the smallest logical pieces you can and tackle those little pieces one at a time. a
attempt to alert a message upon clicking somewhere on the page, or in your active area
then try to create a 100 by 100 black box (div element) anywhere on the page when you click somewhere
Then try to get the box to appear where you clicked using the offset as your professor suggested
Then change what you previously did to be on mousedown and have another function happen on mouseup to remove that black box.
Once you have all that you can style that black box to look like a menu, and have functional buttons on it. You could create/destroy the menu item each time you click, or you could create it once, and toggle it's visibility / position on mousedown / mouseup.
Continue to check your work after every small step to ensure you have no errors. I recommend working in a html file on your local machine, at jsfiddle.net, some javascript editing software (I don't know any), or a combination of those.
Here's some help to get you started https://jsfiddle.net/rz7dayfy/ Click the orange box to try it out.
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mousedown', function(e){
xPos = e.clientX - myDiv.offsetLeft;
yPos = e.clientY - myDiv.offsetTop;
alert('myDiv clicked at x: ' + xPos + ', y: ' + yPos);
});
It creates an event listener on the area in question, sounds like that would be the body of your page. Then it finds the x y coordinates of where that area was clicked. Y axis starts at 0 at the top and increases positively as you go down. X axis starts at 0 on the left and increases positively as you go right. The offset is because jsfiddle creates some padding around your results in the results window.
I'm using the chessboardjs JavaScript library.
I load the position with the following code:
var board = new ChessBoard('board');
board.start(false);
var currentPosition = FENSTRING; //'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R';
board.position(currentPosition, false);
Now I want black to move first.
How can I do this ? I read all the documentation on http://www.chessboardjs.com and can not find a way to tell the board so black must move first.
chessboardjs is "just a board" and has no knowledge of the game of chess. ie: who's turn it is, what moves are legal, etc
(disclaimer: I am the author of chessboardjs)
That's against the very rule of the game, Chess. Only white makes the first move, and that is how it should be, because that's how it is designed to be.
Black never makes the first move.
You could however alter the images of the pieces as it is how they're managed in the link you've given, and try to make it look like Black is making the first move.
I am trying to animate a line on scroll but I am at a loss at the moment. The final result should be similar to how the lines animate on this site, http://www.teslamotors.com/goelectric#range (you have to scroll a little bit to get to the lines).
There is a static gray line, and then a red line that gets height when the user scrolls down. If the user scrolls up while part, or all of the red line is visible, height will be subtracted from the red line. BUT nothing should happen to the red line until the user has scrolled 200px down the page.
I have created a fiddle for this problem and I am pretty sure I know where my problem lies, but I do not have an answer for how to fix it. I think it is because my variables currentScrollPosition and lastScrollPosition in function countUp135 are always equal to each other.
Any help would be greatly appreciated. Here is my fiddle:
http://jsfiddle.net/tripstar22/2HDVA/5/
Thanks in advance!
Although there is many ways to do this in JS, I'll offer an alternative css method. Instead of animating a line on scroll you can just give the illusion that the line is animating. Check out this fiddle here. As you can see The fixed red element will follow the window on scroll and fill in the transparent area between the divs, making it seem like a red line is being drawn.
You can overlay an image with a transparent line running through it instead of grey divs to minimize the code even more, or you can add js to make the animation more fancy.
There are a lot of functions in your fiddle, where I do not understand why you should need them nor what they do. An updated version of your fiddle, seems to do what you want. There was no need for all thoses methods.
This seems to be enough:
var scrollTop = getScrollTop();
if (scrollTop > 200) {
addHeightPath1(scrollTop - 150);
} else {
addHeightPath1(0);
}
I'm also wondering about the function stoppedScrolling, where an asynchronous time function is beeing started, but you try to get an result from the stoppedSrolling() function, that is never passed as a return.
Can anyone help me that how can I grab that event when mouse enter from left side or right side not from anywhere to specific area in Javascript.I got code for coordinates but that's not solve my issue.For x,y coordnates i use this chunk of code
tempX = e.pageX
tempY = e.pageY
Thanks in advance
You are on the right track
using
document.observe("mousemove",function(e){
console.log("X: "+e.pointerX()+", Y: "+e.pointerY());
});
it gets the X and Y coordinates of the mouse on the document
I would check if any of the X is less than 10 - to give a little error room and then run code based on coming in from the left side and make sure you set a flag that you are handling it - otherwise you will have multiple calls to the same handler.
the right side is a little more tricky as you need to know how wide the screen is and then add a little error on the right side as well.
You can try this(might not be an optimized approach) :
Have a hidden/invisible div on left as well right side of page. Like a long strip which covers the whole page. And once mouse over event is triggered on these div, you can make corresponding flag true in respective cases.
so if leftFlag is true --> do the necessary
do similar exercise of righFlag.
Note :
Making opacity very low (opacity: .01) makes div invisible. And event also gets triggered.