s

createjs搭建游戏 原

发表于 | 分类于 ， ， | 浏览 次

项目结构

  • assets 通用代码块
    • css
    • js
  • images
  • js
    • module 模块
      • loader.js
      • view.js
        indexjs 游戏主程
  • mp3
    index.html

打包

自己写的webpack打包

代码块

加载模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import '../../assets/js/createjs/createjs'
import view from './view'
let loader = {
    manifest:[
        {src:"background.jpg",id:"background"},
        {src:'spritesheet_grant.png',id:'sprite'},
    ],
    init:function(game){
        loader.game = game
        if(loader.target != null){
            loader.close()
            return
        }
        view.init()
        loader.ready()
        loader.target = new createjs.LoadQueue(false, "./images/");
        loader.target.on("complete", loader.handleComplete);//下载完成处理函数
        loader.target.on("fileload", loader.handleFileLoad);//单个文件下载完成处理函数
        loader.target.on("progress", loader.handleProgress);//下载过程处理函数
        loader.target.on("error", loader.handleFileError);//下载出错处理函数
        loader.target.setMaxConnections(5);//最大下载线程
        loader.target.loadManifest(loader.manifest);//开始下载
    },
    ready:function(){
        loader.loadingContainer = new createjs.Container()
        loader.loadingContainer.width = canvas.width
        loader.loadingContainer.height = canvas.height
        stage.addChild(loader.loadingContainer)
        let bg = new createjs.Shape();
        bg.graphics.beginFill("#ccc").drawRect(0, 0, canvas.width, canvas.height);
        loader.loadingContainer.addChild(bg)
        loader.textView = new createjs.Text('0%','30px Microsoft Yahei','red');
        loader.textView.x = (canvas.width - loader.textView.getMeasuredWidth()) /2
        loader.textView.y = (canvas.height - loader.textView.getMeasuredHeight()) /2
        loader.loadingContainer.addChild(loader.textView)
    },
    // 下载完成处理函数
    handleComplete:function(){
        createjs.Tween.get(loader.loadingContainer).to({alpha:0.1},1000).call(function(){
            stage.removeChild(loader.loadingContainer)
            loader.game.ready()
        })
    },
    // 单个文件下载完成处理函数
    handleFileLoad:function(){
    },
    // 下载过程处理函数
    handleProgress:function(){
        let pencent = parseInt(loader.target.progress * 100);
        loader.textView.text = pencent + '%'
    },
    // 下载出错处理函数
    handleFileError:function(){
    }
}
export default loader
自适应兼容模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import '../../assets/js/createjs/createjs'
let view = {
    init:function(){
        stage.addChild(container)
        createjs.Ticker.timingMode =  createjs.Ticker.RAF_SYNCHED;
        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", view.stageBreakHandler);
        createjs.Touch.enable(stage);//使移动端支持createjs的鼠标事件
    },
    // 处理自适应兼容
    stageBreakHandler:function(event){
        view.stageWidth =  document.documentElement.clientWidth;
        view.stageHeight = document.documentElement.clientHeight;
        // 竖屏
        if(view.stageWidth < view.stageHeight){
            view.stageScale = view.stageWidth/(750/2);//锁屏的强制横屏标题栏在左边所以要减去128
            canvas.style.width = 750/2 * view.stageScale + 'px';
            canvas.style.height = 1206/2 * view.stageScale + 'px';
            canvas.width = 750
            canvas.height = 1206
            container.x = 0
            container.rotation = 0
            container.scaleX = 0
            container.scaleY = 0
        }else{
            canvas.width = view.stageWidth ;
            canvas.height = view.stageHeight;
            canvas.style.width = canvas.style.height = ""
            view.stageScale = view.stageWidth/1334;
            container.rotation = 90;
            container.x = 0;
            container.scaleX = view.stageScale;
            container.scaleY = view.stageScale;
        }
        stage.update();
    }
}
export default view