文章目錄
  1. 1. 无意义的碎碎念
  2. 2. 头疼的安全问题
  3. 3. 伪·正片

基础能吃人

无意义的碎碎念

之前花了一周左右的时间细读了《Pro HTML5 Games》这本书的前5章,发现一个很重要的道理,变量的对象(函数)化封装非常的重要,一个能够防止歧义,避免环境污染,还有一个是是代码显得简洁美观。

没有任何基础的情况下(纯原生canvas),当初做一个类东方游戏的时候,我是这样写的;总共近1k行,放个前一百行,你们体验一下:

捂眼(瞎)

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// game.js
var canvas,
ctx,
w,
h,
bgPIC = new Image(),
picLoc,
picSpeed = 0.2;
//load the background
bgPIC.src = "./img/bg.png";
//console.log(bgPIC.src)
EventUtil.addHandler(window, "load", start);
EventUtil.addHandler(window, "keydown", key_down)
EventUtil.addHandler(window, "keyup", key_up)
//the game
var gameover = false,
score = 0,
Fscore = 0,
scoreL = true,
edgeScore = 5,
sScore = 200,
mScore = 500,
backgroundColor = "rgb(235,0,0)",
menuColor = "rgb(30, 30 ,100)";
//your role
var ballinit = {
x : 150,
y : 300,
r : 4,
vx : 0,
vy : 0,
v : 5, //temp speed
sv : 2, //slow speed
nv : 5, //normal speed
rate : 2.5, // nv/sv
color : "rgba(255,0,0,1)",
isSlow : false,
isProtected : false,
};
//to get the copyright
var ball = new Object();
for(var pro in ballinit){ball[pro] = ballinit[pro];}
//myThings
var lifeLeft = 2,
bombsinit = 3,
bombsLeft = 3,
bullets = [],
bombs = [],
bombAvai = true,
bombCD = 5000,
protectTime = 2000;
//enemyThings
var enemyBullet = [],
enemis = [],
levelupCD = 30000,
levelNum = 0,
level = {
dayuT : 3000,
zhongyuT : 2000,
EST : 1000,
EMT : 2000,
},
ts1,ts2,ts3,ts4,ts5,ts6,levelup;
//check the key
var isDowninit = {
up : false,
down : false,
left : false,
right : false,
item : false,
};
//getthe copyof isDown
var isDown = new Object();
for(var pro in isDowninit){isDown[pro] = isDowninit[pro]};
isDown.shoot = false;
function start(){
canvas = document.getElementById('canvas')
ctx = canvas.getContext('2d')
canvas.width = 500
canvas.height = 400
w = canvas.width - 200
h = canvas.height
picLoc=bgPIC.height-bgPIC.width*h/w
//isProtected() //init protect
var ts1 = setInterval(function(){
update(ball)
render(ball, ctx)
}, 20)
var ts2 = setInterval(function(){
//quadra shot
if(isDown.shoot){
if(ball.isSlow){
bullets.push(
bullet({swing:0.3,dx:4,dy:-3}),
bullet({swing:-0.3,dx:-4,dy:-3}),
bullet({swing:1,dx:10,dy:5}),
bullet({swing:-1,dx:-10,dy:5})
);
}else {
bullets.push(
bullet({swing:2,dx:7,dy:-3}),
bullet({swing:-2,dx:-7,dy:-3}),
bullet({swing:6,dx:15,dy:20}),
bullet({swing:-6,dx:-15,dy:20})
);
}
}
}, 50)
IntervalStart()
levelup = setInterval(levelUP, levelupCD)
}

举个例子。
一个场景对象state,我们要创建它,初始化它,更新它,渲染它,我们就不应该凌乱的陈列函数,应该用对象或是方法去封装它们比如这样:

1
2
3
4
5
6
var state = {
create: function() {},
init: function() {},
update: function() {},
render: function() {},
}

不过我更推荐下面这个构造函数(慎用)

1
2
3
4
5
6
function state () {
this.create = function() {};
this.init = function() {};
this.update = function() {};
this.render = function() {};
}

一些零碎而重要的全局变量和参数,也应该封装:

1
2
3
4
5
6
7
8
9
10
11
12
var game = {
ctx: Document.getElementById("canvas").getContext('2d'),
init: function(){},
// sth else
}
var box2d = {
scale: 30,
// else...
}

这样说可能让人更凌乱了。但是不管一个HTML游戏怎么变,都可以归于几个模块(以angry bird为例):

  • 最开头的自执行函数
    用于某些无法解释的黑科技。

  • game对象
    包含其他对象的初始化,DOM的操作判断,背景音乐的判断控制,游戏的进程管理控制,动画的数据更新与渲染器管理,以及其他不会分类的变量与方法

  • levels对象
    用于存放每一关的数据,包括音乐图片敌人数据以及它们的初始化方法和加载的方法。

  • entities对象
    存放每一种敌人或互动物体的详细信息,和创建它们时“数形结合”的方法。

  • box2d对象
    具体的物理引擎的内部方法的简化与具体实现。

  • loader对象
    加载器,所有的音乐图片加载统一用这个对象里的的方法,包括浏览器的支持,加载与渲染的顺序问题等。

  • mouse对象
    初始化鼠标操作的事件,监听移动,按下,放开等状态。

封装好以后,游戏就变成这样辣

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
// game.js
(function(){...
})();
$(window).load(function(){
game.init();
});
// 基本的游戏对象
var game = {...
};
// 关卡对象
var levels = {...
};
// 所有物体
var entities = {...
};
// Box2D世界对象
var box2d = {
};
// 图像声音资源加载器
var loader = {...
};
// 鼠标
var mouse = {...
};

是不是看的很爽!

头疼的安全问题

在涉及到webGL的时候,学习瓶颈的出现往往是代码OK的情况下,只要一出现drawImage,Safari抛出个”SecurityError”,Chrome抛出个”canvas tainted by cross-origin data”,解决无果,心灰意冷,放弃。

今天要学习的Phaser也是一样,就好像好不容易看上挺好一妹子,谈不上话,心塞塞。英文文档看的很吃力,前辈们表示不会,心灰意冷。一个简单的图片移动的例子,十几行代码,就是跑不动。幸好把源码放到FF里时,它跑动了,在解决跨域资源问题之前,我先把火狐当祖宗一样供着吧!(拥抱ES6)

伪·正片

我们来谈谈Phaser

Phaser.js是一个游戏引擎,目前将要出Phaser3版本。它帮开发者造好了轮子,直接通过Phaser对象方法来完成游戏的开发。

这个引擎说大不大,说小不小,近10w行代码,压缩后也还有700多kb。用这个引擎做的游戏很多,在js游戏引擎里它现在的排名是第一。我始终保持这个一个观点,框架、引擎这种东西,永远是让你程序写得更舒服而存在的,如果它让你不舒服了,那就没有学的必要。

文章目錄
  1. 1. 无意义的碎碎念
  2. 2. 头疼的安全问题
  3. 3. 伪·正片