Javascript, управление движением мяча с помощью мыши

Я следил за этим руководством по MDN:

https://developer.mozilla.org/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola

И мне было интересно, как мы можем контролировать движение мяча с помощью события движения мыши.

Я видел, что mousemove работает с текстовым полем и некоторыми входами:

https://developer.mozilla.org/en-US/docs/Web/Events/mousemove

Я подумал, что если бы мы могли поместить текстовое поле за холст, мы могли бы обнаружить событие, получить положение мыши и позволить пользователю изменять движение мяча с помощью движения мыши.

Я прочитал:

Динамическое изменение ширины и высоты текстового поля для размещения текста

Итак, я попробовал:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Juego</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            background: #eee;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<textarea name = "ta" id = "ta" cols = "30" rows = "10"></textarea>
<canvas id = "myCanvas" width = "480" height = "320"></canvas>

<script>
    const textarea = document.getElementById('ta');
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    textarea.style.height = canvas.height;
    textarea.style.width = canvas.width;

    let x = canvas.width / 2;
    let y = canvas.height - 30;

    const dx = 2;
    const dy = -2;

    let drawBall = function () {
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
    };

    function draw(e) {
        console.info(e);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        drawBall();

        x += dx;
        y += dy;
    }

    setInterval(draw, 10);

    canvas.addEventListener('mousemove', draw);


</script>
</body>
</html>

Ожидаемый результат будет заключаться в том, чтобы текстовое поле использовало ширину и высоту холста и находилось позади него; однако он меньше и помещен вверху слева:

Javascript, управление движением мяча с помощью мыши

Спасибо за помощь.

javascript html css canvas

07.04.2018 22:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

199

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вам не нужен textarea для захвата события, и это будет сложно, потому что canvas будет сверху, а textarea никогда не узнает, что мышь движется поверх него, и чтобы мяч двигался с помощью мыши, вы должны передать x и y мыши на draw();, пока он перемещается.

вот рабочий пример: https://jsfiddle.net/vqdyLx5u/22/

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

function drawBall(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw(x, y) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall(x, y);
}

draw(canvas.height / 2 , canvas.width / 2); // initial draw

canvas.addEventListener('mousemove', function(e) {
  draw(e.pageX, e.pageY); // the coordinates of the mouse
});

* {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
}

<canvas id = "myCanvas" width = "480" height = "320"></canvas>

08.04.2018 00:28

Другие вопросы по теме

Две рабочие формы на одной странице

Получите код js (node.js) со страницы html и запустите его после загрузки

Css grid: выровнять текст в одном столбце

Как разместить разные скрипты D3.js на одной странице без дублирования?

Запретить отображение основного содержимого через панель навигации

Как вы отслеживаете открытую вкладку и что-то делаете после ее закрытия?

Как получить доступ к iframe в родительское окно из самого iframe?

Сжать и загрузить файл .tar с веб-страницы

Радиокнопки не могут быть выбраны

Я использовал `e.currentTarget.dataset.id`, чтобы получить исчисление щелкнутого li, но дает мне` undefined`

Javascript, управление движением мяча с помощью мыши

Ответы 1

Другие вопросы по теме

Похожие вопросы