submarine design game's game

Click here for free DL of the app version that can save data.

No:25662

←

Prev Next

→

submarine design game
Developer User12381｜Date and time 23/11/23 16:05:11
Build time 228.335 sec｜Game capacity 3.965KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Подводная лодка - Игра</title>
    <style>
      canvas {
        border: 1px solid black;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Загрузка изображений
      const submarineImg = new Image();
      submarineImg.src = "submarine.png";

const rockImg = new Image();
      rockImg.src = "rock.png";

// Описание подводной лодки и камней
      const submarine = {
        x: 50,
        y: 200,
        width: 64,
        height: 32
      };

const rocks = [
        { x: 400, y: 100, width: 32, height: 32 },
        { x: 400, y: 300, width: 32, height: 32 },
        { x: 600, y: 200, width: 32, height: 32 },
        { x: 800, y: 150, width: 32, height: 32 },
        { x: 1000, y: 250, width: 32, height: 32 }
      ];

// Описание движения подводной лодки
      let submarineSpeedX = 0;
      let submarineSpeedY = 0;

function moveSubmarine() {
        submarine.x += submarineSpeedX;
        submarine.y += submarineSpeedY;

if (submarine.x < 0) submarine.x = 0;
        if (submarine.y < 0) submarine.y = 0;
        if (submarine.x + submarine.width > canvas.width) submarine.x = canvas.width - submarine.width;
        if (submarine.y + submarine.height > canvas.height) submarine.y = canvas.height - submarine.height;
      }

// Отслеживание касания на смартфоне
      document.addEventListener("touchstart", handleTouchStart, false);
      document.addEventListener("touchmove", handleTouchMove, false);

let xStart = null;
      let yStart = null;

function handleTouchStart(event) {
        xStart = event.touches[0].clientX;
        yStart = event.touches[0].clientY;
      }

function handleTouchMove(event) {
        if (!xStart || !yStart) return;

const xEnd = event.touches[0].clientX;
        const yEnd = event.touches[0].clientY;

const deltaX = xEnd - xStart;
        const deltaY = yEnd - yStart;

submarineSpeedX = deltaX * 0.05;
        submarineSpeedY = deltaY * 0.05;

xStart = null;
        yStart = null;
      }

// Обновление игрового состояния
      function updateGame() {
        moveSubmarine();

// Проверка на столкновение с камнями
        for (let i = 0; i < rocks.length; i++) {
          if (
            submarine.x < rocks[i].x + rocks[i].width &&
            submarine.x + submarine.width > rocks[i].x &&
            submarine.y < rocks[i].y + rocks[i].height &&
            submarine.y + submarine.height > rocks[i].y
          ) {
            // Произошло столкновение
            submarineSpeedX = 0;
            submarineSpeedY = 0;
            alert("Game Over!");
            location.reload(); // Перезагрузка игры
          }
        }

// Очистка игрового холста
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Рисование подводной лодки
        ctx.drawImage(submarineImg, submarine.x, submarine.y, submarine.width, submarine.height);

// Рисование камней
        for (let i = 0; i < rocks.length; i++) {
          ctx.drawImage(rockImg, rocks[i].x, rocks[i].y, rocks[i].width, rocks[i].height);
        }

requestAnimationFrame(updateGame);
      }

// Запуск игры
      submarineImg.onload = function () {
        rockImg.onload = function () {
          updateGame();
        };
      };
    </script>
  </body>
</html>