17.09.2017, 16:10
|
|
Аспирант
|
|
Регистрация: 20.06.2017
Сообщений: 38
|
|
|
Как определить координаты элемента в canvas
у меня есть мини-игра в которой нужно кликнуть на квадрат. Этот квадрат постоянно перемещается в рандомное направление. Если пользователь кликнул на квадрат то должна срабатывать функция. Как проверить кликнул пользователь именно по элементу?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js.js" defer></script>
</head>
<body>
<canvas id="c1" width="400" height="200"></canvas>
</body>
</html>
code_673a14db6b 952
Последний раз редактировалось Zombie_Killer, 17.09.2017 в 18:10.
Причина: ели что это canvas
|
|
17.09.2017, 16:31
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
if(e.target == "ваш_элемент") func()(
|
|
17.09.2017, 17:09
|
|
Аспирант
|
|
Регистрация: 20.06.2017
Сообщений: 38
|
|
|
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var x = 200;
var y = 100;
var stepCount = 0; //кол-во шагов в одном напралении
var direction; // направление движения
var timer;
var myX;
var myY;
function drawDot() {
ctx.clearRect(0, 0, 400, 200);
if (x < 0 || x > 400 || y < 0 || y > 200) {
x = Math.floor(Math.random() * (400 - 0 + 1)) + 0;
y = Math.floor(Math.random() * (200 - 0 + 1)) + 0;;
}
if (stepCount == 0) {
stepCount = Math.floor(15 * Math.random());
direction = Math.floor(8 * Math.random()); // 0-7
} else {
stepCount--;
}
switch (direction) {
case 0:
// вверх
y = y - 4;
break;
case 1:
// вправо
x = x + 4;
break;
case 2:
// вниз
y = y + 4;
break;
case 3:
// влево
x = x - 4;
break;
case 4:
// вправо вверх
x = x + 4;
y = y - 4;
break;
case 5:
// вправо вниз
x = x + 4;
y = y + 4;
break;
case 6:
// влево вниз
x = x - 4;
y = y + 4;
break;
case 7:
// влево вверх
x = x - 4;
y = y - 4;
break;
}
// document.getElementById('c1').addEventListener('cl ick', function(event){
// if
// }
var tsel = ctx.fillRect(x - 3, y - 3, 6, 6);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(myX, myY);
ctx.stroke();
timer = setTimeout(drawDot, 10);
}
drawDot();
|
|
17.09.2017, 17:10
|
|
Аспирант
|
|
Регистрация: 20.06.2017
Сообщений: 38
|
|
|
j0hnik,
я скинул код посмотри пожалуйса
|
|
17.09.2017, 17:13
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Zombie_Killer,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
17.09.2017, 17:14
|
|
Аспирант
|
|
Регистрация: 20.06.2017
Сообщений: 38
|
|
рони,
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var x = 200;
var y = 100;
var stepCount = 0; //кол-во шагов в одном напралении
var direction; // направление движения
var timer;
var myX;
var myY;
function drawDot() {
ctx.clearRect(0, 0, 400, 200);
if (x < 0 || x > 400 || y < 0 || y > 200) {
x = Math.floor(Math.random() * (400 - 0 + 1)) + 0;
y = Math.floor(Math.random() * (200 - 0 + 1)) + 0;;
}
if (stepCount == 0) {
stepCount = Math.floor(15 * Math.random());
direction = Math.floor(8 * Math.random()); // 0-7
} else {
stepCount--;
}
switch (direction) {
case 0:
// вверх
y = y - 4;
break;
case 1:
// вправо
x = x + 4;
break;
case 2:
// вниз
y = y + 4;
break;
case 3:
// влево
x = x - 4;
break;
case 4:
// вправо вверх
x = x + 4;
y = y - 4;
break;
case 5:
// вправо вниз
x = x + 4;
y = y + 4;
break;
case 6:
// влево вниз
x = x - 4;
y = y + 4;
break;
case 7:
// влево вверх
x = x - 4;
y = y - 4;
break;
}
// document.getElementById('c1').addEventListener('click', function(event){
// if
// }
var tsel = ctx.fillRect(x - 3, y - 3, 6, 6);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(myX, myY);
ctx.stroke();
timer = setTimeout(drawDot, 10);
}
drawDot();
|
|
17.09.2017, 17:17
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Zombie_Killer,
ок но можно было исправить прежнее сообщение
|
|
17.09.2017, 17:43
|
|
Аспирант
|
|
Регистрация: 20.06.2017
Сообщений: 38
|
|
|
рони,
поможешь?
|
|
17.09.2017, 19:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Zombie_Killer,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="c1" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var color = "#008000";
var x = 200;
var y = 100;
var stepCount = 0; //кол-во шагов в одном напралении
var direction; // направление движения
var timer;
var myX;
var myY;
function drawDot() {
ctx.clearRect(0, 0, 400, 200);
if (x < 0 || x > 350 || y < 0 || y > 150) {
x = Math.floor(Math.random() * (350 - 0 + 1)) + 0;
y = Math.floor(Math.random() * (150 - 0 + 1)) + 0;;
}
if (stepCount == 0) {
stepCount = Math.floor(15 * Math.random());
direction = Math.floor(8 * Math.random()); // 0-7
} else {
stepCount--;
}
switch (direction) {
case 0:
// вверх
y = y - 4;
break;
case 1:
// вправо
x = x + 4;
break;
case 2:
// вниз
y = y + 4;
break;
case 3:
// влево
x = x - 4;
break;
case 4:
// вправо вверх
x = x + 4;
y = y - 4;
break;
case 5:
// вправо вниз
x = x + 4;
y = y + 4;
break;
case 6:
// влево вниз
x = x - 4;
y = y + 4;
break;
case 7:
// влево вверх
x = x - 4;
y = y - 4;
break;
}
ctx.fillStyle = color;
ctx.fillRect(x - 3, y - 3, 50, 50);
ctx.stroke();
timer = setTimeout(drawDot, 50);
}
drawDot();
canvas.addEventListener("click", function(evt) {
myX = evt.pageX - canvas.offsetLeft;
myY = evt.pageY - canvas.offsetTop;
if (
myX < x + 50 &&
myX > x &&
myY < y + 50 &&
myY > y) color = "red" // запуск вашей функции
})
</script>
</body>
</html>
здесь решение от Rise, строка 27 функция collide вычисляет столкновение
https://javascript.ru/forum/project/...tml#post464453
|
|
|
|
