-
按 [空格键] 暂停或继续
-
Press [space] to pause or continue
+
+
吃豆人 ・ Pac-Man
+
+
-
-
这款吃豆人游戏的开发是我在学习和探索HTML5游戏的一次尝试，也是对这款儿时经典街机游戏的致敬。游戏大致还原了我印象中Pac-Man的样子，在移植关卡和玩法规则的同时，在游戏中加入了游戏角色动画管理和幽灵的智能寻址算法，实现了幽灵对玩家的围堵。在你玩的过程中，你会发现这些精灵似乎很有想法，它们知道如何彼此协作对你穷追不舍。
-
如果你对此感兴趣，可以在Github上关注此项目。我希望能通过游戏和代码与你分享一些我对游戏开发的感悟。
+
+
+
按 [空格键] 暂停或继续
+
Press [space] to pause or continue
+
+
+
这款吃豆人游戏的开发是我在学习和探索HTML5游戏的一次尝试，也是对这款儿时经典街机游戏的致敬。游戏大致还原了我印象中Pac-Man的样子，在移植关卡和玩法规则的同时，在游戏中加入了游戏角色动画管理和幽灵的智能寻址算法，实现了幽灵对玩家的围堵。在你玩的过程中，你会发现这些精灵似乎很有想法，它们知道如何彼此协作对你穷追不舍。
+
如果你对此感兴趣，可以在Github上关注此项目。我希望能通过游戏和代码与你分享一些我对游戏开发的感悟。
+
-
-
+
+
diff --git a/PressStart2P.ttf b/static/font/PressStart2P.ttf
similarity index 100%
rename from PressStart2P.ttf
rename to static/font/PressStart2P.ttf
diff --git a/game.js b/static/script/game.js
similarity index 100%
rename from game.js
rename to static/script/game.js
diff --git a/index.js b/static/script/index.js
similarity index 99%
rename from index.js
rename to static/script/index.js
index 2bb5b8b..2d58883 100644
--- a/index.js
+++ b/static/script/index.js
@@ -1071,7 +1071,7 @@
});
})();
- const myFont = new FontFace('PressStart2P', 'url(./PressStart2P.ttf)');
+ const myFont = new FontFace('PressStart2P', 'url(./static/font/PressStart2P.ttf)');
myFont.load().then(font => {
document.fonts.add(font);
game.init();
diff --git a/static/style/index.css b/static/style/index.css
new file mode 100644
index 0000000..5db08e9
--- /dev/null
+++ b/static/style/index.css
@@ -0,0 +1,59 @@
+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;
+}
+.mod-panel .hd{
+ padding-top: 10px;
+ line-height: 40px;
+ text-align: center;
+}
+.mod-panel .hd h1{
+ font-size: 20px;
+ font-weight: bold;
+ color: #333;
+}
+.mod-panel canvas{display:block;background: #000;}
+.mod-panel .info{
+ padding: 10px 0;
+ margin-bottom: 5px;
+ line-height: 20px;
+ text-align: center;
+ color: #666;
+}
+.mod-panel .info p{
+ line-height: 20px;
+ font-size: 14px;
+ color: #666;
+}
+.mod-panel .intro{
+ padding: 10px 15px;
+ background: #f8f8f8;
+ border-radius: 5px;
+}
+.mod-panel .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;
+}
\ No newline at end of file