本文使用 typescript 开发
环境准备
node
安装一些依赖
npm i @types/createjs createjs --save
npm i gulp gulp-concat gulp-typescript typescript --save-dev12
增加文件 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",
]
}123456789101112131415161718192021222324252627
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/'));
}));123456789101112131415161718
开始
新增 src 文件夹 里面放 主控制
新建 src/core 文件夹 里面放基本定义
新建 src/scene 文件夹 里面放每一个场景
具体代码示例查看 示例
主要代码
初始化场景
let stage = new createjs.Stage(arg: string | HTMLCanvasElement);1
设置启用触摸
createjs.Touch.enable(stage);1
设置场景的尺寸
(<HTMLCanvasElement>stage.canvas).width = width;
(<HTMLCanvasElement>stage.canvas).height = height;12
设置场景刷新频率
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.framerate = 60;12
清空场景，更换场景时使用
stage.removeAllChildren();1
添加物体
stage.addChild(...arg);1
刷新生效
createjs.Ticker.addEventListener('tick', function() {
stage.update();
});123
运行
新增 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>1234567891011121314151617181920212223
打开 index.html
有的浏览器直接打开文件无法加载资源文件，请使用其他程序，例如 iis,
或
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);
});123456789
启动
打开 http://localhost:8081 即可查看效果
转载请保留原文链接： https://zodream.cn/blog/id/130.html