zodream梦想开源/个人编程日记

zodream梦想开源/个人编程日记

简单的个人编程日记

马上订阅 zodream梦想开源/个人编程日记 RSS 更新: https://zodream.cn/blog/rss

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

2020年5月12日 20:27
游戏

本文使用 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');...

剩余内容已隐藏

查看完整文章以阅读更多
查看完整文章