how can i increase mouse pointer area in javascript? - javascript

I make the game "bugs killer" with mouse pointer, and I use the bottle image on a cursor that spray on bugs,
but the problem is that spray not kill the bugs, when bottle goes on bugs that kill with onclick.
so can any one tell me how can i solve this problem?
how can I increase mouse pointer area in javascript ????
This is the code of spray animation:
<script type="text/javascript">
// for Spray Animation
function clickEffect(e){
var d=document.createElement("div");
d.className="clickEffect";
d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
document.body.appendChild(d);
d.addEventListener('animationend',function(){d.parentElement.removeChild(a);}.bind(this));}
document.addEventListener('click',clickEffect);
</script>

You can't "increase" the mouse pointer.
What you need to do is implement basic collision detection.
We can't tell you how to do it because there are whole books about this, but here are the steps i'd go through if i wanted a super-simple collision detection.
1) Register a click event and store the mouse position
2) Extend the mouse coordinates to cover a larger surface (for example leftLimit = mouseposition x - 10)
3) Loop through all your bugs or whatever you need to be able to click on. Calculate the space and position they occupy on your screen. If the bug's limit are within the range of the mouse click, destroy it

Related

Make ball move away from ball on click

There are some questions similar to this one and I have read them all but what I need is of a very specific nature.
Essentially I have a ball with a round area around it that can be clicked.
When you click this area, the ball should move in the direction opposite to the direction of the click compared to the center of the ball. So if you click right under the ball it should move up.
I have managed to this this by using the following
function clickBall(event){
//finding position of click
var rect = document.getElementById("theBall").getBoundingClientRect();
var ballX=rect.left-294.8641870117188;
var ballY=rect.top-60.125;
click[0] = event.clientX-313.999593505859423; click[1] = event.clientY-79;
distanceX=ballX-click[0]; console.log(distanceX);
distanceY=ballY-click[1]; console.log(distanceY);
ballMoving=true;
ballPosition = click;
//document.getElementById("theBall").style.left=(ballX+distanceX)+"px";
//document.getElementById("theBall").style.top=(ballY+distanceY)+"px";
}
moveBall gets called by update which runs every frame
function moveBall(){
if(ballMoving){
moveTime-=1;
if(moveTime<0){ //control move time
moveTime=ballMoveTime;
ballMoving=false;
}
ballPosition[0]+=distanceX/150*moveTime;
ballPosition[1]+=distanceY/150*moveTime;
ballSpeed-=ballSpeedReducion;
checkCollision();
document.getElementById("theBall").style.left=ballPosition[0]+"px";
document.getElementById("theBall").style.top=ballPosition[1]+"px";
}
}
sorry about all the weird numbers i had to do some adjustments, but anyways.
The problem with this is, it makes the ball move away from the click point, but if you click really close to the ball, it moves just a little, and if u click as far away as u can inside the blue area, it moves way too much.
I tried to solve this by having if statements that find if X and Y are positive or negative and makes them 1 or -1 accordingly, but this makes them only be able to move diagonally...
I need a way to make it so it moves just as much no matter how far the click is from the ball. Any suggestions would be appreciated.

Smoothing mouse animation in Javascript

I am trying to create a simple animation based on my mouse movement. An object that is placed in the center of the screen should pull away from the center based on my mouse movement. But when i try to do that the object jitters around a lot despite the mouse movement being smooth.
I have created a fiddle to show the problem: https://jsfiddle.net/ahof0gLc/
The object is moved as follows when the mouse moves:
animX += event.movementX||event.mozMovementX||event.webkitMovementX||0;
It is then pulled back toward the center like so:
if (animX) animX *= Math.pow(0.99, delta);
I have tried several methods. But because the mouse movement is counteracting the deceleration it jitters a lot. How can I fix this?
Updated with a really hacky spring model. Using mouse over and mouse leave to track mouse.
https://jsfiddle.net/eex3aphm/
You have a fight between your mousemove and your animation.
I changed your mouse movement handler to use a temporary variable to hold the movement:
var pullX = 0;
var onMouseMove = function(event) {
event.preventDefault();
pullX = event.movementX||event.mozMovementX||event.webkitMovementX||0;
};
Then moved the update to the deceleration equation:
animX = (animX + pullX) * Math.pow(0.99, delta);
pullX = 0;
This keeps you from messing with your deceleration on mouse move.
https://jsfiddle.net/r57t7v3o/

Get started with animated typography/particles in javascript (mapping particles to a word)?

Alright, so I have a good deal of experience with HTML and CSS, and some experience with Javascript (I can write basic functions and have coded in similar languages).
I'm looking to start some visual projects and am specifically interested in getting into particle systems. I have an idea for something similar to Codecademy's name generator here (https://www.codecademy.com/courses/animate-your-name/0/1) where particles are mapped to a word and move if hovered over. It seems as though alphabet.js is what's really behind Codecademy's demo however I can't understand exactly how they mapped the particles to a word, etc.
I've done some basic tutorials just creating rudimentary particles in a canvas but I'm not sure a canvas is the best way to go - demos that utilize one of the many libraries available (such as http://soulwire.github.io/sketch.js/examples/particles.html) don't use a canvas.
So my question is - what is the best way for a beginner/intermediate in Javascript to start with particle systems? Specifically to accomplish the Codecademy name effect or similar? Should I try to use canvas or which library would be best to start with and how would you recommend starting?
The code for this project is achievable for your intermediate JS programmer status.
How the CodeAcademy project works ...
Start by building each letter out of circles and saving each circle's centerpoint in an array. The alphabet.js script holds that array of circle centerpoints.
On mousemove events, test which circles are within a specified radius of the mouse position. Then animate each of those discovered circles radially outward from the mouse position using simple trigonometry.
When the mouse moves again, test which circles are no longer within the specified radius of the current mouse position. Then animate each of those "outside" circles back towards their original positions.
You can also use native html5 canvas without any libraries...
Another approach allowing any text to be "dissolved" and reassembled
Start by drawing the text on the canvas. BTW, this approach will "dissolve" any drawing, not just text.
Use context.getImageData to fetch the opacity value of every pixel on the canvas. Determine which pixels on the canvas contain parts of the text. You can tell if a pixel is part of the text because it will be opaque rather than transparent.
Now do the same procedure that CodeAcademy did with their circles -- but use your pixels:
On mousemove events, test which pixels are within a specified radius of the mouse position. Then animate each of those discovered pixels radially outward from the mouse position using simple trigonometry.
When the mouse moves again, test which pixels are no longer within the specified radius of the current mouse position. Then animate each of those "outside" pixels back towards their original positions.
[Addition: mousemove event to test if circles are within mouse distance]
Note: You probably want to keep an animation frame running that moves circles closer or further from their original positions based on a flag (isInside) for each circle.
function handleMouseMove(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// calc the current mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// test each circle to see if it's inside or outside
// radius of 40px to current mouse position
// circles[] is an array of circle objects shaped like this
// {x:,y:,r:,originalX:,originalY:,isInside:}
var radius=40;
for(var i=0;i<circles.length;i++){
var c=circles[i];
var dx=c.x-mouseX;
var dy=c.y-mouseY;
if(dx*dx+dy*dy<radius*radius){
c.isInside=true;
// move c.x & c.y away from its originalX & originalY
}else{
c.isInside=false;
// if the circle is not already back at it's originalX, originalY
// then move c.x & c.y back towards its originalX, originalY
}
}
}

JavaScript Canvas - stop animation after collision

I have problem with canvas animation. I created a character (black-evil box) that can be moved. After it touch another box (red) it stops.
The animation is simple - the player.x deducted from boxes[i].x makes the blocks (and the camera) moving.
The problem is that "camera" (or viewport - don't know how to call it) should also stop.
I tried to change the variable left to 0 after a collision, but it's not working
Live example: http://jsfiddle.net/wA73R/
How to fix that? How to stop all things after collision?

What is a good technique for detecting mouse movement distance in Javascript?

I'm designing user controls and I'm trying to code the controls for the mouse. This is what I came up with to get user input.
var mouseInput = new GLGE.MouseInput(window);
window.onmousemove = function(ev){
var dx = window.mouseX - prevMousePos.x;
var dy = window.mouseY - prevMousePos.y;
prevMousePos ={
x:window.mouseX,
y:window.mouseY
};
// I do movement calculations with dx and dy here
}
However what I came up with above isn't perfect because if the mouse reaches the end of the window it would not detect movement.
Is there a better way of detecting mouse movement? I'd rather not calculate it using its co-ordinates because using that method I'm unable to calculate distance moved when the mouse is at the edge of the screen.
PS: If anyone was wondering, what I'm designing is sorta like Google Streetview or a first person shooter. I just want the user to be able to move the mouse in one direction infinitely.
I mean, you're already using an onmuseover event handler (the most efficient way because Javascript is async). So you just compute distances from he previous, only when the user moves the mouse. If he doesn't further move the muse, the player just proceeds in the same direction prviously computed.
No, there is no method to handle mouse movements outside of the browser window.

Categories