基于canvas的小游戏

发表于   |   分类于   |  

前言

今天在逛github之时，偶然发现一个html5做的小游戏 看了一下 略懂皮毛的我也能看的一知半解，便有了这篇文章
我克隆了作者的源码 研究了一下 看的也算懵懵懂懂。自己尝试着做了一遍并在作者的基础上加了点东西
原作者的github源码
下面放代码～

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>simple canvas game</title>
	
	</head>
	<body>
		<script type="text/javascript" src="game.js"></script>
	</body>
</html>

js

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
// 创建画布
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
// 背景图片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
	bgReady = true;
};
bgImage.src = "background.png";
// 人物图片
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
	heroReady = true;
};
heroImage.src = "images/d1.gif";
// 人物移动变换图像
var pic1 = "images/d1.gif";
var pic2 = "images/d2.gif";
var pic3 = "images/d3.gif";
var pic4 = "images/d4.gif";
var pic5 = "images/l1.gif";
var pic6 = "images/l2.gif";
var pic7 = "images/l3.gif";
var pic8 = "images/l4.gif";
var pic9 = "images/u1.gif";
var pic10 = "images/u2.gif";
var pic11 = "images/u3.gif";
var pic12 = "images/u4.gif";
var pic13 = "images/r1.gif";
var pic14 = "images/r2.gif";
var pic15 = "images/r3.gif";
var pic16 = "images/r4.gif";
var picSub = 0;
var picArrDown = [pic1,pic2,pic3,pic4];
var picArrup = [pic9,pic10,pic11,pic12];
var picArrLeft = [pic5,pic6,pic7,pic8];
var picArrRight = [pic13,pic14,pic15,pic16];
function changeImg (picArr) {
	if(picSub === picArr.length-1) {
		picSub = 0;
	}else {
		picSub += 1;
	};
	heroImage.src = picArr[picSub];
}
// 怪物图片
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
	monsterReady = true;
};
monsterImage.src = "images/mon2.png";
// 游戏对象
var hero = {
	speed: 256 // 每秒移动的像素
};
var monster = {};
var monstersCaught = 0;
// 按键控制
var keysDown = {};
addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode];
}, false);
// 重置游戏
var reset = function () {
	hero.x = canvas.width / 2;
	hero.y = canvas.height / 2;
	
	// Throw the monster somewhere on the screen randomly
	monster.x = 32 + (Math.random() * (canvas.width - 64));
	monster.y = 32 + (Math.random() * (canvas.height - 96));
	
};
// 更新状态
var update = function (modifier) {
	if (38 in keysDown) { // 上行
		hero.y -= hero.speed * modifier;
		changeImg(picArrup);
		if(hero.y < 32) {
			hero.y = 32;
		}
	}
	if (40 in keysDown) { //下行
		hero.y += hero.speed * modifier;
		changeImg(picArrDown);
		if(hero.y >=390) {
			hero.y = 390;
		}
	}
	if (37 in keysDown) { // 左行
		hero.x -= hero.speed * modifier;
		changeImg(picArrLeft);
		if(hero.x <32) {
			hero.x =32;
		}
	}
	if (39 in keysDown) { // 右行
		hero.x += hero.speed * modifier;
		changeImg(picArrRight);
		if(hero.x >448) {
			hero.x = 448;
		}
	}
	// 碰撞
	if (
		hero.x <= (monster.x + 32)
		&& monster.x <= (hero.x + 32)
		&& hero.y <= (monster.y + 32)
		&& monster.y <= (hero.y + 32)
	) {
		++monstersCaught;
		reset();
	}
};
// 绘制
var render = function () {
	if (bgReady) {
		ctx.drawImage(bgImage,0,0 );
	}
	if (heroReady) {
		ctx.drawImage(heroImage, hero.x, hero.y);
	}
	if (monsterReady) {
		ctx.drawImage(monsterImage, monster.x, monster.y,40,60);
	}
	ctx.fillStyle = "rgb(250, 250, 250)";
	ctx.font = "24px Helvetica";
	ctx.textAlign = "left";
	ctx.textBaseline = "top";
	ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};
// 游戏主循环
var main = function () {
	var now = Date.now();
	var pass = now - then;
	update(pass / 1000);
	render();
	then = now;
	
	requestAnimationFrame(main);
};
// 浏览器兼容
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
var then = Date.now();
reset();
main();

源码

git

ps

本来想做个基于cocos的游戏的，但是以现在的水平还是相当困难，只能先放放了。。