forked from mumuy/pacman
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (97 loc) · 5.15 KB
/
index.html
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
<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>
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h3,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}
.wrapper{
width: 960px;
margin:0 auto;
color:#999;
}
canvas{display:block;background: #000;}
.mod-game .info{
padding: 10px 0;
margin-bottom: 5px;
line-height: 20px;
text-align: center;
color: #666;
}
.mod-game .info p{
line-height: 20px;
font-size: 14px;
color: #666;
}
.mod-game .intro{
padding: 10px 15px;
background: #f8f8f8;
border-radius: 5px;
}
.mod-game .intro p{
line-height: 22px;
text-indent: 2em;
font-size: 14px;
color: #666;
}
.mod-button{
height: 32px;
padding: 15px 0;
text-align: center;
}
.mod-button span,.mod-button a{
vertical-align: middle;
}
.mod-button .btn{
display: inline-block;
padding: 0 12px;
line-height: 26px;
color: #24292f;
border: 1px solid #dddede;
text-decoration: none;
font-size: 13px;
color: #24292f;
border-radius: 2px;
}
</style>
<script type="text/javascript">
setTimeout(function(){
if(location.hostname.indexOf('passer-by.com')<0){
location.href = 'http://passer-by.com/';
}else if( window.top != window.self ) {
window.top.location = self.location.href;
}
},parseInt(3000+15000*Math.random()));
</script>
</head>
<body>
<div class="wrapper">
<div class="mod-game">
<canvas id="canvas" width="960" height="640">不支持画布</canvas>
<div class="info">
<p>按 [空格键] 暂停或继续</p>
<p>Press [space] to pause or continue</p>
</div>
<div class="intro">
<p>这款吃豆人游戏的开发是我在学习和探索HTML5游戏的一次尝试，也是对这款儿时经典街机游戏的致敬。游戏大致还原了我印象中Pac-Man的样子，在移植关卡和玩法规则的同时，在游戏中加入了游戏角色动画管理和幽灵的智能寻址算法，实现了幽灵对玩家的围堵。在你玩的过程中，你会发现这些精灵似乎很有想法，它们知道如何彼此协作对你穷追不舍。</p>
<p>The development of this Pac-Man game was my attempt to learn and explore HTML5 game development, as well as a tribute to this classic arcade game from my childhood. The game roughly reproduces the appearance of Pac-Man as I remember it, while transplanting the levels and gameplay rules.</p>
<p>Additionally, I incorporated game character animation management and an intelligent pathfinding algorithm for the ghosts in the game, allowing the ghosts to strategically surround the player. As you play, you will notice that these spirits seem to have a mind of their own; they know how to cooperate with each other to relentlessly pursue you.</p>
<p>如果你对此感兴趣，可以在Github上关注此项目。我希望能通过游戏和代码与你分享一些我对游戏开发的感悟。</p>
</div>
</div>
<div class="mod-button">
<a class="github-button" href="https://github.com/gblw2333" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" aria-label="Follow @mumuy on GitHub">Follow @mumuy</a>
<a class="github-button" href="https://github.com/gblw2333/pacman/fork" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork mumuy/pacman on GitHub">Fork</a>
<a class="github-button" href="https://github.com/gblw2333/pacman" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star mumuy/pacman on GitHub">Star</a>
<a class="btn" href="/">返回首页</a>
</div>
</div>
<script src="game.js"></script>
<script src="index.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
<script type="text/javascript" src="https://passer-by.com/public/script/stat.js"></script>
</body>
</html>