Я новичок в 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.
Итак, продолжая мой комментарий ...
Вам нужно добавить скорость мыши:
function mouseUpHandler(e) {
dx = -dx + speed;
dy = -dy - speed;
... а позже эту скорость можно было контролировать с помощью слайдера <input type = "range">
fun fun
И на каждом проходе розыгрыша вы применяете трение:
function draw() {
dx *= friction;
dy *= friction;
Вот рабочий пример:
https://jsfiddle.net/nfdyLv61/