Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am making a javascript game and I have an obstacle that when it touches the player's image, should take away a life. The problem is that I am currently detecting with the images' rectangles, and there are clear parts so it sometimes detects a collision when it doesn't look like the images are touching. I need a way to detect if the image is touching part of the image that isn't just clear background, like you make an outline of the non-clear part and check if the outlines collide. I don't know if this is possible to do with javascript, but let me know.
I have no good way of doing it fast. You see, if we do that, it will slow down much, as it says here : https://benjaminhorn.io/code/pixel-accurate-collision-detection-with-javascript-and-canvas/. You could make some smaller rectangles of different sizes, to help with more precise collisions.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am currently working with a canvas that holds shapes. So I want to be able to keep the shapes size while zooming in or out.
I think that I need to know the canvas scale or the dpi, so I can recalculate the shape dimensions. My questions
Is there better solution for that?
If I am on the good track how can I get the current scale of a canvas? I am looking for something like in the code below.
let scale = ctx.getCurrentScale();.
Thanks for your help.
No long ago I had an issue, and Clemens helped me with that :
Zoom on Canvas, centered on mouse position
take his solution then "play" with it it will help you understand better.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to create a webpage with several small tiles that enlarge when clicked (And show more/different content, but that's not a part of this question).
This is what I have now: http://puu.sh/nX929.png
When I click on the first tile, it looks exactly like I want it to: http://puu.sh/nX9l9.png
But when I click the second tile it looks like this: http://puu.sh/nX95G.png (gap on the left)
That's not what I want, I want to other (small) tiles to float around it. To fill the empty space.
The source code (+ live example) can be found here (but I wouldn't mind doing it in a completely different way): https://www.crescendosassenheim.nl/Hugo/Training/
I don't even know what to Google, because I have absolutely no idea what kind of technique I can use to achieve what I want. Any suggestions?
http://masonry.desandro.com/methods.html Take a look at this I am sure this will help you, what you want is even displayed at the bottom of the page i am linking.
Download masonry in your computer link to it and follow the little guide in their website.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
On my website I'm trying to display the animation of a coin being flipped multiple times in the air and coming back to the surface. When the animation is over it should become a static image of the side the coin landed on.
I've found multiple ways to do this such as CSS animations, sprites,... but the options with CSS animations seem to be very limited if I want a rather advanced animation and others seem to have some flaws aswell.
What is the best method of displaying an animated image for a certain amount of time and then becoming a static image?
One option is to use Javascript. You could do:
<img src="animation.gif" alt="coin" id="yourImage">
<script>
var image = document.getElementById('yourImage');
window.setTimeout(changeImage, millisecondsToEndOfAnimation);
function changeImage() {
image.src = "staticImage.png";
}
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I recently found recently the JavaScript library - tracking.js
Is there any way to detect what div I see now by image or camera?
I have two elements on the desktop, the left and right columns, and I would like to check if I see left div ( with console.log() ) or right div. This library is simple, and I know how to add a script, but I don't know how to detect my eye and detect what element I see.
Maybe there are other ways to detect this.
Thats a bit complicated because you need detect minimal ocular movements and the common webcams, haven't resolution enough, but with some hardware like this project http://pupil-labs.com/pupil/, could do that.
A good solution is tracking.js because this library simulate human behavior with a some algorithms and should be enough to make simple decisions like the columns position.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to create a image gallery using Html 5 Canvas and when I hover a image, it must grow and change opacity. In addition to image selectable and draggable?
How can I do this? Any ideas?
Well sir, first try to code anything and then come to ask for assistance with particular problem. For now it looks like you have no clue about subject and not even tried. I can anwser a question like how to manipulate opacity in canvas, how to implement drag and drop, etc...
but NOT I need someone to implement my whole idea for me
I should also point out that Canvas isn't probably the best technology for this task (in the meaning of both performance and implementation difficulty).
If you insist, you will have to rewrite all functionality which is already easily accessible with DOM and libraries like jQuery.