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