Пишем игру используя HTML, JavaScript, TypeScript в Visual Studio Code. Я создал несколько ts файлов. Поэтому использую Webpack (собирает все файлы в один js)

Компьютер, программы

→

Разработка игр | для телефонов на Unity, MonoGame | для браузера Google Chrome на JavaScript, HTML | рисуем графику

→

Моя разработка игр на HTML, Javascript, Typescript

Пишем игру используя HTML, JavaScript, TypeScript в Visual Studio Code. Я создал несколько ts файлов. Поэтому использую Webpack (собирает все файлы в один js)

посмотрели 6278 раз

обновлено: 18 Augusta 2020

Скачать пример

my_typescript_game.zip ...
размер: 3 kb

D:/my_typescript_game

index.html

package.json файл настройки Node.js (содержит названия пакетов)

tsconfig.json файл настройки TypeScript

webpack.config.js файл настройки Webpack (как объединять js файлы в один)

.vscode

launch.json файл настройки для Visual Studio Code (путь к запускаемому файлу)

src

game.ts

imageId.ts

level.ts

build

transformed.js после запуска Webpack сгенерируется этот файл

Let's look at файлы >> ...

Файл index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <meta charset="utf-8" />
     <title></title>
</head>

<body>
     
     <script src="./build/transformed.js" ></script>

     
     <script>
          var game = new Game();
          alert(game.levels[0].eda);
     </script>

</body>

</html>

Файл package.json

{
     "name": "my_typescript_game",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
          "MyBuild": "webpack"
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
          "typescript": "^3.9.7",
          "webpack": "^4.32.0",
          "webpack-cli": "^3.3.2",
          "webpack-dev-server": "^3.4.1",
          "awesome-typescript-loader": "^5.2.1"
     },
     "dependencies": {}
}

Файл tsconfig.json

{
     "compilerOptions":
     {
          "module": "commonjs",
          "target": "es6",
          "lib": ["es6"],
          "sourceMap": false,
          "outDir": "./build"
     },
     "include": [
          "src/*.ts"
     ],
     "exclude": [
          "node_modules"
     ]
}

Файл webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
     entry: {
          'app': './src/game.ts'
     },
     mode: 'production',
     output: {
          path: __dirname + '/build',
          filename: 'transformed.js',
          libraryTarget: 'var',
          library: 'Game'
     },
     resolve: {
          extensions: ['.ts', '.js']
     },
     module: {
          rules: [
               {
                    test: /\.ts$/,
                    use: [
                         {
                              loader: 'awesome-typescript-loader',
                              options:
                              {
                                   configFileName: __dirname + '/tsconfig.json'
                              }
                         }
                    ]
               }
          ]
     },
}

Файл .vscode/launch.json

{
     // Use IntelliSense to learn about possible attributes.
     // Hover to view descriptions of existing attributes.
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
          {
               "type": "chrome",
               "request": "launch",
               "name": "Launch Chrome",
               "url": "${workspaceFolder}/index.html"
          }
     ]
}

Файл src/game.ts

import {Level} from './level';
import {ImageId} from './imageId';

class Game {
     public levels: Level[] = [];

     constructor()
     {
          // level 0
          this.levels[0] = new Level({
               playZoneRows: 1,
               playZoneCols: 12,
               eda: 180,
               isLevelFinished: (curEda: Number, timeMillisecond: Number) => curEda > 200,
               buttons: [ImageId.ButtonEda]
          });

          // level 1
          this.levels[1] = new Level({
               playZoneRows: 10
          });
     }
}

module.exports = Game;

Файл src/imageId.ts

export enum ImageId {
ButtonEda = 1
}

Файл src/level.ts

import {ImageId} from './imageId';

export class Level {
     playZoneRows: number;
     playZoneCols: number;
     levelRequest: string;
     buttons: ImageId[];
     eda: number;
     isLevelFinished: Function;

     public constructor(init?: Partial<Level>)
     {
          Object.assign(this, init);
     }
}

На заметку! Чтобы класс Game из файла game.ts мог использоваться в index.html (webpack конвертирует ts в js) нужно:

1) в файле webpack.config.js должно быть:
libraryTarget: 'var', // говорит webpack сделать библиотеку доступной в качестве глобальной переменной
library: 'Game' // называет эту глобальную переменную (в данном случае это Game)

2) в файле src/game.ts должно быть:
module.exports = Game;

Как запустить пример?

Шаг 1.
Открываем
Visual Studio Code
и выбираем папку

В Visual Studio Code нажимаем на меню File → Open Folder
и выбираем папку D:/my_typescript_game

Шаг 2.
Устанавливаем библиотеки

В Visual Studio Code нажимаем на меню Terminal → New Terminal
Выполним:

npm install

Смотрите картинку:

Объяснение:
В этом zip архиве нет js библиотек.
Название и версии js библиотек написаны в файле package.json.
При выполнении в командной строке npm install библиотеки с названием и версии из package.json скачаются из интернета и установятся в папку node_modules

Шаг 3.
Компилируем проект

Выполним:

npm run MyBuild

Смотрите картинку:

Объяснение:
Команда npm run MyBuild запускает скрипт MyBuild.
Скрипт MyBuild определен в файле package.json.
Файл D:/my_typescript_game/package.json:
{
...
    "scripts": {
        "MyBuild": "webpack"
    }
...
}

Скрипт MyBuild запустит Webpack:
• Webpack запустит TypeScript.
• TypeScript сконвертирует наши файлы main.ts, book.ts в файлы main.js, book.js
• Webpack соберет файлы main.js, book.js в один файл transformed.js

Шаг 4.
Открываем страницу

В Visual Studio Code нажимаем на меню Run → Start Debugging

Смотрите картинку:

В браузере Google Chrome откроется страница с таким адресом: file:///D:/my_typescript_game/index.html

Объяснение:
Запускается index.html
потому что файл настройки .vscode/launch.json

{
"version": "0.2.0",
"configurations": [
     {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome",
          "url": "${workspaceFolder}/index.html"
     }
]}

создержит
"url": "${workspaceFolder}/index.html"

На заметку!
Если поменяли файл game.ts или imageId.ts или level.ts то нужно выполнить:
Шаг 3. (компилируем проект)
Шаг 4. (запускаем)

Вывод. Примущества использования TypeScript

1) Typescript использует типы и не будет ошибок в использовании переменных

Например: При написании своей игры на Javascript я всегда использовал у себя ImageId как число

JavaScript

function drawImage(ImageId)
{
...
}

Плохо: в эту функцию можно было передать число например 12345 drawImage(12345); то есть несуществующую картинку

Хорошо: Сейчас я использую typescript и использую конкретный тип enum

TypeScript

enum ImageId
{
ButtonEda = 1,
}

function drawImage: void(imgId: ImageId)
{
...
}

при передачи в функцию я передаю значение из enum и не будет ситуации что я передаю несуществующую картинку.

TypeScript

drawImage(ImageId.ButtonEda);

2) Typescript компилируется в Javascript и я могу указать версию Javascript
Я указываю старую версию javascript чтобы javascript у пользователей поддерживался в браузере например в google chrome

Поменять версию можно в tsconfig.json

json

я ставлю es5

json

{
     "compilerOptions":
     {
          "module": "commonjs",
          "target": "es5",
          "lib": ["es6"],
          "sourceMap": false,
          "outDir": "./build"
     },
     "include": [
          "src/*.ts"
     ],
     "exclude": [
          "node_modules"
     ]
}

Next topic →
Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"