Кратко — план + минимальный рабочий пример на HTML5/JavaScript (подходит для курса, запустить в браузере).
1) Основные компоненты:
- Игровой цикл (update + render).
- Мишени (позиция, радиус, скорость, направление).
- Пули/выстрелы (позиция, скорость).
- Обработка ввода (клик/клавиши).
- Проверка попадания и подсчёт очков.
2) Попадание (формула):
$$(x_{bullet}-x_{target}{)}^2+(y_{bullet}-y_{target}{)}^2\le r_{target}^2$$
3) Минимальный пример (HTML + JS). Скопируйте в файл .html и откройте в браузере.
```html
Тир - пример const canvas = document.getElementById('c'), ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
let score = 0;
const bullets = [];
const targets = [];
// создаём мишени
for (let i = 0; i < 5; i++) {
targets.push({
x: 100 + i * 120,
y: 100 + (i % 2) * 30,
r: 25,
vx: (i % 2 === 0) ? 1.2 : -1.0
});
}
// стрельба: пуля вылетает из нижнего центра в сторону клика
canvas.addEventListener('click', e => {
const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left, my = e.clientY - rect.top;
const sx = W / 2, sy = H - 20;
const dx = mx - sx, dy = my - sy;
const len = Math.hypot(dx, dy) || 1;
const speed = 6;
bullets.push({
x: sx, y: sy,
vx: dx / len * speed, vy: dy / len * speed,
r: 4
});
});
function update() {
// обновляем пули
for (let i = bullets.length - 1; i >= 0; i--) {
const b = bullets[i];
b.x += b.vx; b.y += b.vy;
if (b.x W + 10 || b.y H + 10) bullets.splice(i,1);
}
// обновляем мишени
for (const t of targets) {
t.x += t.vx;
if (t.x - t.r W) t.vx *= -1;
}
// проверка столкновений
for (let i = bullets.length - 1; i >= 0; i--) {
const b = bullets[i];
for (let j = targets.length - 1; j >= 0; j--) {
const t = targets[j];
const dx = b.x - t.x, dy = b.y - t.y;
if (dx*dx + dy*dy <= t.r * t.r) {
// попадание
score += 10;
bullets.splice(i,1);
// удаляем или респавним мишень
targets.splice(j,1);
// простой респавн через таймаут
setTimeout(() => {
targets.push({
x: Math.random() * (W-100) + 50,
y: 80 + Math.random() * 180,
r: 20 + Math.random()*15,
vx: (Math.random() > 0.5 ? 1 : -1) * (0.8 + Math.random()*1.5)
});
}, 1000);
break;
}
}
}
}
function render() {
ctx.clearRect(0,0,W,H);
// фон и прицел
ctx.fillStyle = '#eef'; ctx.fillRect(0,0,W,H);
// пули
ctx.fillStyle = 'black';
for (const b of bullets) {
ctx.beginPath(); ctx.arc(b.x,b.y,b.r,0,Math.PI*2); ctx.fill();
}
// мишени
for (const t of targets) {
ctx.fillStyle = 'red';
ctx.beginPath(); ctx.arc(t.x,t.y,t.r,0,Math.PI*2); ctx.fill();
ctx.fillStyle = 'white';
ctx.beginPath(); ctx.arc(t.x,t.y,t.r*0.6,0,Math.PI*2); ctx.fill();
}
// стрелок
ctx.fillStyle = 'saddlebrown';
ctx.fillRect(W/2 - 15, H - 30, 30, 30);
// HUD
ctx.fillStyle = 'black'; ctx.font = '18px sans-serif';
ctx.fillText('Score: ' + score, 10, 20);
}
function loop() {
update();
render();
requestAnimationFrame(loop);
}
loop();
```
4) Идеи для расширения:
- ограничение патронов и перезарядка;
- разные типы мишеней (движение, здоровье, очки);
- уровни сложности (увеличивать скорость или количество);
- звуки и анимации;
- таблица рекордов.
Если нужно, могу прислать версию на другом языке (Python/Pygame) или добавить рельную физику пуль/ветер.