canibuzz.github.io/game7.html at main · CanIBuzz/canibuzz.github.io · GitHub

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

<html>
	<head>
		<meta charset="utf8">
		<title>Pac-Man . 吃豆人游戏</title>
		<meta name="description" content="吃豆人（Pac-Man）是上世纪80年代一款经典街机游戏，游戏的主角小精灵的形象甚至被作为一种大众文化符号。本游戏使用HTML5完美移植该游戏，设置了多个关卡并改良了幽灵的寻路算法，可作为Canvas游戏学习的案例演示。">
		<meta name="keywords" content="吃豆人,FC吃豆子,吃豆游戏,Pac-Man,HTML5游戏,Javascript游戏引擎">
		<link rel="shortcut icon" href="favicon.png">
		<style>
			*{padding:0;margin:0;}
			.wrapper{
				width: 960px;
				margin:0 auto;
				color:#999;
			}
			canvas{display:block;background: #000;}
			.info{
				line-height: 30px;
				text-align: center;
				margin-bottom: 10px;
			}
			p{
				line-height: 24px;
				text-indent: 2em;
				font-size: 14px;
			}
			.mod-botton{
				height: 32px;
				padding: 15px 0;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			setTimeout(function(){
				if(location.hostname.indexOf('canibuzz.github.io')<0){
					location.href = 'https://canibuzz.github.io/';
				}else if( window.top != window.self ) {
				    window.top.location = self.location.href;
				}
			},parseInt(3000+15000*Math.random()));
		</script>
	</head>
	<body>
		<div class="wrapper">
			<canvas id="canvas" width="960" height="640">不支持画布</canvas>
			<div class="info">按［空格］暂停或继续</div>
			<p>这款吃豆人游戏的开发是我在学习和探索HTML5游戏的一次尝试，也是对这款经典街机游戏的致敬。游戏大致还原了我印象中Pac-Man的样子，在移植关卡和玩法规则的同时，在游戏中加入了游戏角色动画管理和幽灵的智能寻址算法，实现了幽灵对玩家的围堵。希望能通过游戏和代码和你分享一些我对游戏开发的感悟。</p>
			<div class="mod-botton">
				<a class="github-button" href="https://github.com/mumuy" data-style="mega" data-count-href="/mumuy/followers" data-count-api="/users/mumuy#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @mumuy on GitHub">Follow @mumuy</a>
				<a class="github-button" href="https://github.com/mumuy/pacman" data-style="mega" data-count-href="/mumuy/pacman/stargazers" data-count-api="/repos/mumuy/pacman#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star mumuy/pacman on GitHub">Star</a>
			</div>
		</div>
		<script src="/js/game2.js"></script>
		<script src="/js/index.js"></script>
		<script async defer src="/js/buttons.js"></script>
		<div style="display: none;">
			<script src="/js/stats.js"></script>
		</div>
		<script>
		(function(){
		    var bp = document.createElement('script');
		    var curProtocol = window.location.protocol.split(':')[0];
		    if (curProtocol === 'https') {
		        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
		    }
		    else {
		        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		    }
		    var s = document.getElementsByTagName("script")[0];
		    s.parentNode.insertBefore(bp, s);
		})();
		</script>
	</body>
</html>