Форум

ekaterina22 · #1 (**permalink**) 20.05.2021, 19:25

У меня есть js файл один, его нужно обернуть в модуль, а потом подключить этот модуль в html файл, как это сделать?

<!DOCTYPE html>
<html>
  <head>
  	<title>Snake Game</title>
    <style>
      #snakeboard {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      #score {
        text-align: center;
        font-size: 140px;
      }
    </style>
  </head>

  <body>

    <div id="score">0</div>
    <canvas id="snakeboard" width="400" height="400"></canvas>

<script src="snake.js"> </script>
  </body>
</html>

const snakeboard = document.getElementById("snakeboard");
    const snakeboard_ctx = snakeboard.getContext("2d");
    main();

    const board_border = 'black';
    const board_background = "white";
    const snake_col = 'lightblue';
    const snake_border = 'darkblue';
    
    let snake = [
      {x: 200, y: 200},
      {x: 190, y: 200},
      {x: 180, y: 200},
      {x: 170, y: 200},
      {x: 160, y: 200}
    ]

    let score = 0;
    let changing_direction = false;
    let food_x;
    let food_y;
    let dx = 10;
    let dy = 0;

    gen_food();

    document.addEventListener("keydown", change_direction);
    
    function main() {

        if (has_game_ended()) return;

        changing_direction = false;
        setTimeout(function onTick() {
        clear_board();
        drawFood();
        move_snake();
        drawSnake();
        // Repeat
        main();
      }, 100)
    }
    
    function clear_board() {
      snakeboard_ctx.fillStyle = board_background;
      snakeboard_ctx.strokestyle = board_border;
      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
    }
    
    function drawSnake() {
      snake.forEach(drawSnakePart)
    }

    function drawFood() {
      snakeboard_ctx.fillStyle = 'lightgreen';
      snakeboard_ctx.strokestyle = 'darkgreen';
      snakeboard_ctx.fillRect(food_x, food_y, 10, 10);
      snakeboard_ctx.strokeRect(food_x, food_y, 10, 10);
    }
    
    function drawSnakePart(snakePart) {

      snakeboard_ctx.fillStyle = snake_col;
      snakeboard_ctx.strokestyle = snake_border;
      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
    }

    function has_game_ended() {
      for (let i = 4; i < snake.length; i++) {
        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
      }
      const hitLeftWall = snake[0].x < 0;
      const hitRightWall = snake[0].x > snakeboard.width - 10;
      const hitToptWall = snake[0].y < 0;
      const hitBottomWall = snake[0].y > snakeboard.height - 10;
      return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
    }

    function random_food(min, max) {
      return Math.round((Math.random() * (max-min) + min) / 10) * 10;
    }

    function gen_food() {
      food_x = random_food(0, snakeboard.width - 10);
      food_y = random_food(0, snakeboard.height - 10);
      snake.forEach(function has_snake_eaten_food(part) {
        const has_eaten = part.x == food_x && part.y == food_y;
        if (has_eaten) gen_food();
      });
    }

    function change_direction(event) {
      const LEFT_KEY = 37;
      const RIGHT_KEY = 39;
      const UP_KEY = 38;
      const DOWN_KEY = 40;
      
    
      if (changing_direction) return;
      changing_direction = true;
      const keyPressed = event.keyCode;
      const goingUp = dy === -10;
      const goingDown = dy === 10;
      const goingRight = dx === 10;
      const goingLeft = dx === -10;
      if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
      }
      if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
      }
      if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
      }
      if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
      }
    }

    function move_snake() {
      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
      snake.unshift(head);
      const has_eaten_food = snake[0].x === food_x && snake[0].y === food_y;
      if (has_eaten_food) {
        score += 10;
        document.getElementById('score').innerHTML = score;
        gen_food();
      } else {
        snake.pop();
      }
    }

ksa · #2 (**permalink**) 20.05.2021, 20:45

Сообщение от ekaterina22

У меня есть js файл один, его нужно обернуть в модуль, а потом подключить этот модуль в html файл, как это сделать?

Вот видос на эту тему...

https://www.youtube.com/watch?v=cnwjBCPtOxg&t=332s

Там есть показ этого действа.

voraa · #3 (**permalink**) 20.05.2021, 20:54

Что значит "обернуть"?
Подключать как модуль?
<script src="snake.js" type=module> </script>
И постfвить это в <head>

А какой в этом смысл, если там ничего не импортируется и не экспортируется.

ekaterina22 · #4 (**permalink**) 20.05.2021, 21:09

ksa,voraa
посмотрела видео. но там показали как отдельную функцию в модуль поместить, а мне нужно весь js файл. я так понимаю нужно дополнительную функцию создать и сделать экспорт в html?
voraa, я так делала, но игра в браузере не запустилась <script src="snake.js" type=module> </script>

рони · #5 (**permalink**) 20.05.2021, 21:14

Сообщение от ekaterina22

но игра в браузере не запустилась

скрипт содержит логические ошибки и в html нет score.

ksa · #6 (**permalink**) 20.05.2021, 21:44

Сообщение от ekaterina22

я так понимаю нужно дополнительную функцию создать и сделать экспорт

Модуль может много чего возвращать... В том числе и функции.
Главное чтобы ошибок в нем и его последующем использовании не было.

ekaterina22 · #7 (**permalink**) 20.05.2021, 21:47

рони,
Добавила score. с логическими ошибками разберусь позже.
опрос в другом. как отдельную функцию или переменную я понимаю как подключать к модулю, а как весь js код нет. можете пример показать?

ksa · #8 (**permalink**) 20.05.2021, 21:59

Сообщение от ekaterina22

как отдельную функцию или переменную я понимаю как подключать к модулю, а как весь js код нет

Если умеешь подключать функцию и потом ее вызывать - в той функции легко может оказаться "весь код"...

рони · #9 (**permalink**) 20.05.2021, 23:51

ekaterina22,
index.html

<!DOCTYPE html>
<html>
    <head>
    	<title>Snake Game</title>
        <meta charset="utf-8">
        <style>
            #snakeboard {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            #score {
                text-align: center;
                font-size: 140px;
            }
        </style>
    </head>

    <body>
        <div id="score">0</div>
<canvas id="snakeboard" width="400" height="400"></canvas>
<script type="module" src="games.js"></script>

</body>
</html>

games.js

import {gameSnake} from './snake.js';
 const board = document.getElementById("snakeboard");
 const out = document.getElementById("score");
 gameSnake(board, out);

snake.js

function gameSnake(snakeboard, out) {
    const snakeboard_ctx = snakeboard.getContext("2d");
    const board_border = 'black';
    const board_background = "white";
    const snake_col = 'lightblue';
    const snake_border = 'darkblue';

    let snake = [{
            x: 200,
            y: 200
        },
        {
            x: 190,
            y: 200
        },
        {
            x: 180,
            y: 200
        },
        {
            x: 170,
            y: 200
        },
        {
            x: 160,
            y: 200
        }
    ]

    let score = 0;
    let changing_direction = false;
    let food_x;
    let food_y;
    let dx = 10;
    let dy = 0;

    gen_food();

    document.addEventListener("keydown", change_direction);

    function main() {

        if (has_game_ended()) return;

        changing_direction = false;
        setTimeout(function onTick() {
            clear_board();
            drawFood();
            move_snake();
            drawSnake();
            // Repeat
            main();
        }, 400)
    }

    function clear_board() {
        snakeboard_ctx.fillStyle = board_background;
        snakeboard_ctx.strokestyle = board_border;
        snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
        snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
    }

    function drawSnake() {
        snake.forEach(drawSnakePart)
    }

    function drawFood() {
        snakeboard_ctx.fillStyle = 'lightgreen';
        snakeboard_ctx.strokestyle = 'darkgreen';
        snakeboard_ctx.fillRect(food_x, food_y, 10, 10);
        snakeboard_ctx.strokeRect(food_x, food_y, 10, 10);
    }

    function drawSnakePart(snakePart) {

        snakeboard_ctx.fillStyle = snake_col;
        snakeboard_ctx.strokestyle = snake_border;
        snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
        snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
    }

    function has_game_ended() {
        for (let i = 4; i < snake.length; i++) {
            if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
        }
        const hitLeftWall = snake[0].x < 0;
        const hitRightWall = snake[0].x > snakeboard.width - 10;
        const hitToptWall = snake[0].y < 0;
        const hitBottomWall = snake[0].y > snakeboard.height - 10;
        return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
    }

    function random_food(min, max) {
        return Math.round((Math.random() * (max - min) + min) / 10) * 10;
    }

    function gen_food() {
        food_x = random_food(0, snakeboard.width - 10);
        food_y = random_food(0, snakeboard.height - 10);
        snake.forEach(function has_snake_eaten_food(part) {
            const has_eaten = part.x == food_x && part.y == food_y;
            if (has_eaten) gen_food();
        });
    }

    function change_direction(event) {
        const LEFT_KEY = 37;
        const RIGHT_KEY = 39;
        const UP_KEY = 38;
        const DOWN_KEY = 40;


        if (changing_direction) return;
        changing_direction = true;
        const keyPressed = event.keyCode;
        const goingUp = dy === -10;
        const goingDown = dy === 10;
        const goingRight = dx === 10;
        const goingLeft = dx === -10;
        if (keyPressed === LEFT_KEY && !goingRight) {
            dx = -10;
            dy = 0;
        }
        if (keyPressed === UP_KEY && !goingDown) {
            dx = 0;
            dy = -10;
        }
        if (keyPressed === RIGHT_KEY && !goingLeft) {
            dx = 10;
            dy = 0;
        }
        if (keyPressed === DOWN_KEY && !goingUp) {
            dx = 0;
            dy = 10;
        }
    }

    function move_snake() {
        const head = {
            x: snake[0].x + dx,
            y: snake[0].y + dy
        };
        snake.unshift(head);
        const has_eaten_food = snake[0].x === food_x && snake[0].y === food_y;
        if (has_eaten_food) {
            score += 10;
            out.innerHTML = score;
            gen_food();
        } else {
            snake.pop();
        }
    }
    main();
}

export {
    gameSnake
}

запускать на сервере

рони · #10 (**permalink**) 20.05.2021, 23:53

ekaterina22,
https://learn.javascript.ru/modules

Форум

Справочник

Discord чат

Курсы javascript