create.js 开发小游戏（一）搭建项目-simple diary

本文使用 typescript 开发

环境准备

node

安装一些依赖

npm i @types/createjs createjs --save
npm i gulp gulp-concat gulp-typescript typescript --save-dev

增加文件 tsconfig.json ts 的编译配置信息

{
    "compilerOptions": {
        "baseUrl": "./",
        "target": "es5",
        "strictNullChecks": true,
        "noImplicitAny": true,
        "allowJs": false,
        "experimentalDecorators": true,
        "noImplicitThis": true,
        "noImplicitReturns": true,
        "alwaysStrict": true,
        "noFallthroughCasesInSwitch": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strict": true,
        "removeComments": true,
        "pretty": true,
        "strictPropertyInitialization": true,
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "dist",
    ]
}

gulpfile.js gulp 编译方式

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    concat = require('gulp-concat'),
    tsProject = ts.createProject('tsconfig.json');

gulp.task('copy', async() => {
    // 复制 createjs 到目标文件夹
    await gulp.src('node_modules/createjs/builds/1.0.0/createjs.min.js')
        .pipe(gulp.dest('dist/'));
});

gulp.task('default', gulp.series('copy', async() => {
    // 合并ts 文件并编译
    await gulp.src(['src/core/*.ts', 'src/scene/*.ts', 'src/*.ts'])
        .pipe(concat('zodream.ts'))
        .pipe(tsProject())
        .pipe(gulp.dest('dist/'));
}));

开始

新增 src 文件夹里面放主控制

新建 src/core 文件夹里面放基本定义

新建 src/scene 文件夹里面放每一个场景

具体代码示例查看示例

主要代码

初始化场景

let stage = new createjs.Stage(arg: string | HTMLCanvasElement);

设置启用触摸

createjs.Touch.enable(stage);

设置场景的尺寸

(<HTMLCanvasElement>stage.canvas).width = width;
(<HTMLCanvasElement>stage.canvas).height = height;

设置场景刷新频率

createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.framerate = 60;

清空场景，更换场景时使用

stage.removeAllChildren();

添加物体

stage.addChild(...arg);

刷新生效

createjs.Ticker.addEventListener('tick', function() {
    stage.update();
});

运行

新增 index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Catch Cat</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="stage" height="600" width="600"></canvas>

        <script src="dist/createjs.min.js"></script>
        <script src="dist/zodream.js"></script>
        <script>
            App.main('stage');
        </script>
    </body>
</html>

打开 index.html

有的浏览器直接打开文件无法加载资源文件，请使用其他程序，例如 iis,

或

npm i static-server

server.js

var StaticServer = require('static-server');
var server = new StaticServer({
    rootPath: '.',            // required, the root of the server file tree
    port: 8081,               // required, the port to listen
});

server.start(function () {
    console.log('Server listening to', server.port);
});

启动

node server.js

打开 https://zodream.cn/to/0_0/url/aHR0cDovL2xvY2FsaG9zdDo4MDgx.html 即可查看效果

Reprint please keep the original link: https://zodream.cn/blog/id/130.html