Как заставить объекты холста HTML перемещаться вместе с курсором и замедляться со временем?

Я новичок в JavaScript и в настоящее время работаю над небольшой 2-мерной игрой, где в элементе холста html я нарисовал шайбу и небольшую линию ворот, а цель «игры» - забросить шайбу к воротам. Моя проблема в настоящее время в том, что я просто не знаю, как заставить шайбу двигаться с помощью элементов управления мышью. Я пытался использовать это как ссылку на большую часть кода, но похоже, что я изо всех сил пытаюсь внедрить другие вещи в свой собственный код.

Вот и часть моего кода. Деталь, которая в данный момент контролирует шайбу

document.addEventListener("mousedown", mouseDownHandler, false);
// When user clicks, the puck starts following the cursor
function mouseDownHandler(e) {

dx = 0;
dy = 0;
document.addEventListener("mousemove", mousemoveHandler, false);
document.addEventListener("mouseup", mouseUpHandler, false);
function mousemoveHandler(e) {
var relativeX = e.clientX - canvas.offsetLeft;
var relativeY = e.clientY - canvas.offsetTop;
if (relativeX > 0 && relativeX < canvas.width) {
  x = relativeX - 18 / 2;
} if (relativeY > 0 && relativeY < canvas.height) {
  y = relativeY - 20 / 2;
}
}
function mouseUpHandler(e) {
  dx = -dx + 1;
  dy = -dy - 1;
  x += 0;
  y += 0;
  document.removeEventListener("mousemove", mousemoveHandler, false);
 }
}

А потом мои переменные:

// Variables used
var canvas = document.getElementById("gameArea");
var ctx = canvas.getContext("2d");


// Coordinates used for the puck
var x = canvas.width/2;
var y = canvas.height/2;
// Coordinates used to make the puck "move" as a placeholder"
var dx = 0;
var dy = 0;

// Gives the puck a radius that is used for calculations
var puckRadius = 10;
var goalieRadius = 57;

// Variables for goalie
var z = canvas.width/2;
var a = 5;

//variable for counting score
var score = 0;

// Variables for goal size and location
var goalHeight = 10;
var goalWidth = 115;
var goalX = (canvas.width-goalWidth)/2;

Скажите, если вам нужно еще что-нибудь и заранее спасибо!

Обновлено: https://jsfiddle.net/6gn48dbq/1/ Также Jfiddle работы!

🤔 А знаете ли вы, что...
JavaScript является одним из трех основных языков веб-разработки, вместе с HTML и CSS.


2
170
1

Ответ:

Решено

Итак, продолжая мой комментарий ...

Вам нужно добавить скорость мыши:

function mouseUpHandler(e) {
  dx = -dx + speed;
  dy = -dy - speed;

... а позже эту скорость можно было контролировать с помощью слайдера <input type = "range"> fun fun

И на каждом проходе розыгрыша вы применяете трение:

function draw() {
  dx *= friction;
  dy *= friction;

Вот рабочий пример:
https://jsfiddle.net/nfdyLv61/