我必须在正方形（div）内创建并移动一个球（div），以在单击期间用鼠标移动来强制方向。我需要知道鼠标向下时球的坐标，然后鼠标向上时球的坐标（以计算鼠标移动的方向）。我尝试使用onmouseDown和onMouseup事件，但是只有onmouseUp坐标。 我不想使用画布库。
POST /api/attachments HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 100
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
X-XSRF-TOKEN: *****************
Authorization: Bearer ****.****.****.****
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36
Content-Type: application/json
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie:
access_token=****.****.****; session_token=****; XSRF-TOKEN=*****; Idea-1c443776=2050c190-4f64-4a09-a50c-a0ef97b6a9da; io=p4GYHllrvXuakjfbAAAA
/**
* @file: main.js
* @version:2.0
* Power Balls:
* new balls will be generated when the use clicks and drags the mouse
* the speed of the balls should depend on the speed of the mouse movement
* the direction of the balls should depend on the direction of motion of the mouse
* the balls should bounce at the edges of the screen.
* it should be possible to 'freeze' and 'resume' the animation.
* remove balls by clicking on them
* increase/decrease the speed of balls with a keyboard shortcut and click on button
* when changing the size of the page, the balls never go out of the page
* right clicking and holding the mouse attracts all the balls to the position of the mouse. When releasing the mouse button the balls return to their original behavior
* pressing the speace bar starts the music
*
*/
//the canvas object is created, with the following properties: element, width and height
var canvas = {
element: document.getElementById("canvas"),
width: innerWidth,
height: innerHeight-100,
/**
* this function initializes the canvas by taking size and height from the canvas object
* and appends the element on the page
*/
initialize: function () {
canvas.element.style.width = canvas.width + "px";
canvas.element.style.height = canvas.height + "px";
document.body.appendChild(canvas.element);
}
};
//create the ball object
var Ball = {
/**
* This function defines all the properties of the ball object speed,
* size (random), color (random) each ball is contained within a div with class "ballContainer"
* @param - color, dx, dy
* @returns - the newBall
*/
create: function (dx, dy) {
var WidthHeight = 20;
var ballContainer = document.createElement("div");
ballContainer.className = "ballContainer";
canvas.element.appendChild(ballContainer);
var newBall = Object.create(this);
newBall.dx = dx;
newBall.dy = dy;
newBall.width = WidthHeight;
newBall.height = WidthHeight;
newBall.element = document.createElement("div");
newBall.element.style.backgroundColor = "purple";
newBall.element.style.width = newBall.width + "px";
newBall.element.style.height = newBall.height + "px";
newBall.element.className += "ball";
newBall.width = parseInt(newBall.element.style.width);
newBall.height = parseInt(newBall.element.style.height);
ballContainer.appendChild(newBall.element);
return newBall;
},
/**
* This function moves the ball
* @param - x, y
*/
moveTo: function (x, y) {
this.element.style.left = x + "px";
this.element.style.top = y + "px";
},
/**
* This function change the direcion of the ball if necessary
* if the values of x and y are beyond the canvas dimensions,
* the ball change direction
* @param - x, y
*/
changeDirectionIfNecessary: function (x, y) {
if (x < 0 || x > window.innerWidth - this.width) {
this.dx = -this.dx;
}
if (y < 0 || y > (window.innerHeight - 100) - this.height) {
this.dy = -this.dy;
}
},
/**
* This function draw the ball and set the direction to move every 1 second,
* check if the object ball need to change direction
* @param - x, y
*/
draw: function (x, y, x1, y1) {
this.moveTo(x, y);
var ball = this;
setTimeout(function () {
ball.changeDirectionIfNecessary(x, y);
if(x > x1 && y > y1){
ball.draw(x + ball.dx, y + ball.dy);
console.log("ciao");
}
}, 1000 / 60);
},
};
/**
* This function generates the object ball depending on the position of the click
* and update the ball counter
* @param - dx, dy
*/
function generateBall(dx,dy,x1,y1){
var positionX = event.clientX;
var positionY = event.clientY;
console.log(positionX+"= x"+positionY+" =y");
var ball = Ball.create(dx, dy);
ball.draw(positionX, positionY, x1, y1);
var counterBall = document.getElementsByClassName("ball").length;
document.getElementById("counter").innerHTML = " Ball Counter " + counterBall;
}
var ballContainer = document.getElementById("canvas").getElementsByClassName("ballContainer");
canvas.initialize(); //calls the function to initialize the playing field
var canvasBox = document.getElementById("canvas"),
isDown = false,
isLong = false,
target, // which element was clicked
longTID; // so we can cancel timer
// add listener for elements
canvasBox.addEventListener("mousedown", handleMouseDown);
// mouseup need to be monitored on a "global" element or we might miss it if
// we move outside the original element.
window.addEventListener("mouseup", handleMouseUp);
function handleMouseDown() {
var info = document.getElementById('info');
info.innerHTML = "Mouse down...";
isDown = true; // button status (any button here)
isLong = false; // longpress status reset
target = canvas; // store this as target element
clearTimeout(longTID); // clear any running timers
longTID = setTimeout(longPress.bind(canvas), 500); // create a new timer for this click
};
function handleMouseUp(e) {
if (isDown && isLong) {
// if a long press, cancel
isDown = false; // clear in any case
e.preventDefault(); // and ignore this event
return
}
if (isDown) {
// draw(document.getElementById('canvas')); // if we came from down status:
clearTimeout(longTID); // clear timer to avoid false longpress
isDown = false;
var info = document.getElementById('info');
info.innerHTML = "Normal speed ball"; // for clicked element
target = null;
var x1 = event.clientX;
var y1 = event.clientY;
canvasBox.onclick = function onMouseUp(event){
var dx = 5;
var dy = 5;
console.log(x1+"= x1 "+y1+" =y2");
generateBall(dx,dy,x1,y1);
}
}
};
function longPress() {
// draw(document.getElementById('canvas'));
isLong = true;
var info = document.getElementById('info');
info.innerHTML = "High speed ball";
canvasBox.onclick = function onMouseUp(event){
var dx = 20;
var dy = 20;
generateBall(dx,dy);
}
}body {
text-align: center;
overflow: hidden;
}
#canvas{
margin: 0 auto;
background-color: pink;
width: 100%;
}
.ball {
background-color: black;
position: absolute;
display: inline-block;
border-radius: 50%;
}
#btn-gravity {
width: 100px;
padding: 1%;
background-color: purple;
text-align: center;
font-size: 50px;
font-weight: 700;
float: right;
margin-right: 50%;
cursor: pointer;
}
#counter, #info{
float:left;
margin-right: 1%;
}