pacman/index.html at master · mumuy/pacman · 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
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
        <meta name="robots" content="all">
        <meta name="referrer" content="always">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-transform" />
        <meta name="format-detection" content="telephone=no"/>
        <meta name="description" content="吃豆人（Pac-Man）是上世纪80年代一款经典街机游戏，游戏的主角小精灵的形象甚至被作为一种大众文化符号。本游戏使用HTML5完美移植该游戏，设置了多个关卡并改良了幽灵的寻路算法，可作为Canvas游戏学习的案例演示。">
        <meta name="keywords" content="吃豆人,FC吃豆子,吃豆游戏,Pac-Man,HTML5游戏,Javascript游戏引擎">
        <title>吃豆人 ・ Pac-Man</title>
        <link rel="shortcut icon" href="favicon.png">
        <link rel="canonical" href="https://passer-by.com/pacman/"/>
        <link rel="stylesheet" href="https://passer-by.com/static/style/common.css">
        <link rel="stylesheet" href="./static/style/index.css">
        <script type="text/javascript">
            if(location.protocol!='file:'){
                setTimeout(function(){
                    if(!location.hostname.includes('passer-by.com')){
                        location.href = 'https://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">
            <header>
                <div class="mod-head">
                    <div class="inner">
                        <div class="bd">
                            <div class="logo">
                                <a href="/"><img src="https://passer-by.com/static/image/public/logo.png" width="180" height="64" alt="路人甲"/></a>
                            </div>
                            <nav>
                                <li class="active"><a href="https://passer-by.com/project.html">项目</a></li>
                                <li><a href="https://passer-by.com/writing.html">文字</a></li>
                                <li><a href="https://passer-by.com/photograph.html">摄影</a></li>
                                <li><a href="https://passer-by.com/comment.html">留言</a></li>
                                <li><a href="https://passer-by.com/about.html">关于</a></li>
                            </nav>
                            <div class="operation">
                                <a class="btn" href="https://github.com/mumuy/pacman/" rel="nofollow" target="_blank" title="Github">
                                    <svg aria-hidden="true" class="octicon" title="GitHub " version="1.1" viewBox="0 0 16 16" width="24" height="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z"></path></svg>
                                    <span>Github</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mod-bg">
                    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                        <defs>
                            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                        </defs>
                        <g class="parallax">
                            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
                            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
                            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
                            <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
                        </g>
                    </svg>
                </div>
            </header>
            <div class="container">
                <div class="mod-panel">
                    <div class="inner">
                        <div class="bd">
                            <canvas id="canvas" width="960" height="640">不支持画布</canvas>
                        </div>
                        <div class="ft">
                            <div class="info">
                                <p>按 [空格键] 暂停或继续</p>
                                <p>Press [space] to pause or continue</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mod-introtion">
                    <div class="inner">
                        <div class="hd">
                            <h3 class="title">吃豆人游戏</h3>
                            <p class="subtitle">Pac-Man</p>
                        </div>
                        <div class="bd">
                            <p>这款吃豆人游戏的开发是我在学习和探索HTML5游戏的一次尝试，也是对这款儿时经典街机游戏的致敬。游戏大致还原了我印象中Pac-Man的样子，在移植关卡和玩法规则的同时，在游戏中加入了游戏角色动画管理和幽灵的智能寻址算法，实现了幽灵对玩家的围堵。在你玩的过程中，你会发现这些精灵似乎很有想法，它们知道如何彼此协作对你穷追不舍。</p>
                            <p>如果你对此感兴趣，可以在Github上关注此项目。我希望能通过游戏和代码与你分享一些我对游戏开发的感悟。</p>
                        </div>
                    </div>
                </div>
                <div class="mod-button">
                    <div class="inner">
                        <a class="github-button" href="https://github.com/mumuy" 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/mumuy/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/mumuy/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>
                    </div>
                </div>
                <script type="text/javascript" src="https://passer-by.com/static/script/projects.js"></script>
            </div>
            <footer>
                <div class="mod-fixedbar">
                    <div class="bd">
                        <ul>
                            <li>
                                <a class="gotop" href="javascript:;" rel="nofollow">
                                    <img src="https://passer-by.com/static/image/public/icon-gotop.png" width="24" height="24" alt="回到顶部">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mod-foot">
                    <div class="bd">
                        <p>
                            <span>Copyright &copy; 2025</span>
                            <a href="/">路人甲</a>
                            <span>版权所有</span>
                        </p>
                    </div>
                </div>
            </footer>
        </div>
        <script src="./static/script/game.js"></script>
        <script src="./static/script/index.js"></script>
        <script async defer src="https://buttons.github.io/buttons.js"></script>
        <script type="text/javascript" src="https://passer-by.com/static/script/common.js"></script>
        <script type="text/javascript" src="https://passer-by.com/static/script/stat.js"></script>
    </body>
</html>