Загрузка данных
@{
ViewData["Title"] = "Танчики";
}
<h1>Танчики</h1>
<p>Управление: стрелки — движение, ПРОБЕЛ — выстрел</p>
<p>Очки: <span id="score">0</span></p>
<canvas id="gameCanvas" width="600" height="400" style="border: 2px solid black; background: #222;"></canvas>
<script>
// ========== ВСЯ ИГРА ЗДЕСЬ ==========
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
// Размеры поля
const W = canvas.width;
const H = canvas.height;
// Танк игрока
let player = {
x: 300, y: 350,
w: 30, h: 30,
angle: 0, // 0 - вверх, 90 - вправо, 180 - вниз, 270 - влево
speed: 3,
color: 'green'
};
// Пули игрока
let bullets = [];
// Враги
let enemies = [];
// Очки
let score = 0;
// Отслеживание нажатых клавиш
let keys = {};
document.addEventListener('keydown', e => {
keys[e.code] = true;
if (e.code === 'Space') {
e.preventDefault();
shoot();
}
});
document.addEventListener('keyup', e => { keys[e.code] = false; });
// Выстрел
function shoot() {
let rad = player.angle * Math.PI / 180;
bullets.push({
x: player.x + player.w / 2,
y: player.y + player.h / 2,
vx: Math.sin(rad) * 6,
vy: -Math.cos(rad) * 6,
r: 4,
color: 'yellow'
});
}
// Создать врага
function spawnEnemy() {
enemies.push({
x: Math.random() * (W - 30),
y: -30,
w: 30, h: 30,
speed: 1 + Math.random() * 2,
color: 'red'
});
}
// Игровой цикл
function update() {
// Движение игрока
if (keys['ArrowUp']) {
player.angle = 0;
player.y -= player.speed;
}
if (keys['ArrowDown']) {
player.angle = 180;
player.y += player.speed;
}
if (keys['ArrowLeft']) {
player.angle = 270;
player.x -= player.speed;
}
if (keys['ArrowRight']) {
player.angle = 90;
player.x += player.speed;
}
// Ограничение игрока рамками поля
player.x = Math.max(0, Math.min(W - player.w, player.x));
player.y = Math.max(0, Math.min(H - player.h, player.y));
// Движение пуль
bullets.forEach(b => { b.x += b.vx; b.y += b.vy; });
bullets = bullets.filter(b => b.x > 0 && b.x < W && b.y > 0 && b.y < H);
// Движение врагов
enemies.forEach(e => { e.y += e.speed; });
enemies = enemies.filter(e => e.y < H);
// Проверка попаданий
bullets.forEach(b => {
enemies.forEach((e, ei) => {
if (b.x > e.x && b.x < e.x + e.w && b.y > e.y && b.y < e.y + e.h) {
// Попадание!
enemies.splice(ei, 1);
bullets = bullets.filter(bul => bul !== b);
score += 10;
scoreDisplay.textContent = score;
}
});
});
// Проверка столкновения врага с игроком
enemies.forEach((e, ei) => {
if (player.x < e.x + e.w && player.x + player.w > e.x &&
player.y < e.y + e.h && player.y + player.h > e.y) {
// Игрок уничтожен!
alert('Вас подбили! Игра окончена. Очки: ' + score);
enemies = [];
bullets = [];
score = 0;
scoreDisplay.textContent = score;
player.x = 300; player.y = 350;
}
});
}
// Отрисовка
function draw() {
ctx.clearRect(0, 0, W, H);
// Рисуем игрока
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.w, player.h);
// Дуло
ctx.fillStyle = 'black';
let cx = player.x + player.w / 2;
let cy = player.y + player.h / 2;
let rad = player.angle * Math.PI / 180;
let gunX = cx + Math.sin(rad) * 18;
let gunY = cy - Math.cos(rad) * 18;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(gunX, gunY);
ctx.strokeStyle = 'black';
ctx.lineWidth = 4;
ctx.stroke();
// Рисуем пули
bullets.forEach(b => {
ctx.fillStyle = b.color;
ctx.beginPath();
ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
ctx.fill();
});
// Рисуем врагов
enemies.forEach(e => {
ctx.fillStyle = e.color;
ctx.fillRect(e.x, e.y, e.w, e.h);
});
}
// Главный цикл
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
// Запускаем врагов каждые 2 секунды
setInterval(spawnEnemy, 2000);
// Старт
gameLoop();
</script>