Merge pull request #163 from our-mini-games/dev

humandetail · web-flow · commit 186712e4c569 · 2025-03-11T20:22:49.000+08:00
Dev
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Mini-games
 
-A collection of small games(mine sweeper 扫雷, greedy snake 贪吃蛇, link game 连连看, tetris 俄罗斯方块, spider-solitaire 蜘蛛纸牌, Chinese chess 中国象棋, klotski 华容道 and 2048)
+A collection of small games(mine sweeper 扫雷, greedy snake 贪吃蛇, link game 连连看, tetris 俄罗斯方块, spider-solitaire 蜘蛛纸牌, Chinese chess 中国象棋, klotski 华容道 arkanoid 打砖块 and 2048)
 
 ## Playground
 https://our-mini-games.github.io/mini-games/games/
@@ -22,3 +22,5 @@ https://our-mini-games.github.io/mini-games/games/
 - [x] 中国象棋
 
 - [x] 华容道
+
+- [x] 打砖块
diff --git a/packages/arkanoid/index.html b/packages/arkanoid/index.html
@@ -2,7 +2,7 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/mini-games/arkanoid.svg" />
+    <link rel="icon" type="image/svg+xml" href="/mini-games/arkanoid.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>打砖块</title>
   </head>
diff --git a/packages/arkanoid/src/assets/style.css b/packages/arkanoid/src/assets/style.css
@@ -30,20 +30,21 @@ h1 {
 
 .header .title {
   flex: 1;
-  text-align: left;
+  text-align: center;
   font-size: 20px;
   font-weight: bold;
 }
 
 .btn {
   padding: 5px 10px;
-  border: 1px solid #ccc;
+  border: 1px solid #f1f1f1;
   border-radius: 5px;
   cursor: pointer;
 }
 
 .arkanoid {
   flex: 1;
+  min-height: 0;
 }
 
 .footer {
@@ -56,7 +57,7 @@ h1 {
   position: relative;
   width: 300px;
   height: 32px;
-  border: 1px solid #ccc;
+  border: 1px solid #f1f1f1;
   border-radius: 4px;
 }
 
diff --git a/packages/arkanoid/src/lib/Layout.ts b/packages/arkanoid/src/lib/Layout.ts
@@ -53,8 +53,14 @@ class Layout {
     this.#initControls()
     this.#initLights()
 
-    this.onWindowResize = this.onWindowResize.bind(this)
-    window.addEventListener('resize', this.onWindowResize)
+    const observe = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === this.el) {
+          this.onWindowResize(entry.contentRect.width, entry.contentRect.height)
+        }
+      }
+    })
+    observe.observe(this.el)
   }
 
   #initCamera (): void {
@@ -103,9 +109,9 @@ class Layout {
     this.el.appendChild(this.renderer.domElement)
   }
 
-  onWindowResize (): void {
-    this.width = this.el.offsetWidth
-    this.height = this.el.offsetHeight
+  onWindowResize (width: number, height: number): void {
+    this.width = width
+    this.height = height
 
     this.camera.aspect = this.width / this.height
     this.camera.updateProjectionMatrix()
diff --git a/packages/arkanoid/src/main.ts b/packages/arkanoid/src/main.ts
@@ -100,23 +100,31 @@ const init = (): void => {
 
   const hammer = new Hammer(target)
 
+  hammer.get('pan').set({
+    threshold: 10,
+    direction: Hammer.DIRECTION_HORIZONTAL
+  })
+
   let startTime = performance.now()
+  let startX = 0
   hammer.on('panstart', (e) => {
     e.target.classList.add('active')
     startTime = performance.now()
+    startX = e.center.x
   })
 
   hammer.on('panmove', (e) => {
     e.target.style.transform = `translateX(${Math.max(Math.min(e.deltaX, 123), -123)}px)`
     const nowTime = performance.now()
     if (nowTime - startTime > 32) {
-      if (e.deltaX > 0) {
+      if (startX < e.center.x) {
         arkanoid.moveBaffle('right')
-      } else {
+      } else if (startX > e.center.x) {
         arkanoid.moveBaffle('left')
       }
       startTime = nowTime
     }
+    startX = e.center.x
   })
 
   hammer.on('panend', (e) => {
@@ -125,6 +133,4 @@ const init = (): void => {
   })
 }
 
-window.addEventListener('DOMContentLoaded', () => {
-  setTimeout(init, 0)
-})
+window.addEventListener('DOMContentLoaded', init)
diff --git a/packages/entry/index.html b/packages/entry/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/org.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="小游戏合集 A collection of small games" />
-    <meta name="keywords" content="(mine sweeper 扫雷, greedy snake 贪吃蛇, link game 连连看, tetris 俄罗斯方块, spider-solitaire 蜘蛛纸牌, Chinese chess 中国象棋, klotski 华容道 and 2048)" />
+    <meta name="keywords" content="(mine sweeper 扫雷, greedy snake 贪吃蛇, link game 连连看, tetris 俄罗斯方块, spider-solitaire 蜘蛛纸牌, Chinese chess 中国象棋, klotski 华容道 arkanoid 打砖块 and 2048)" />
     <title>小游戏合集</title>
   </head>
   <body>
diff --git a/packages/entry/src/config/games.config.ts b/packages/entry/src/config/games.config.ts
@@ -48,7 +48,7 @@ export const games: GameConfig[] = [
   {
     path: '/mini-games/arkanoid/index.html',
     name: '打砖块',
-    cover: 'org.svg'
+    cover: 'arkanoid.png'
   },
   {
     path: 'https://github.com/our-mini-games/mini-games/discussions',

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ export const games: GameConfig[] = [`
`48`	`48`	`{`
`49`	`49`	`path: '/mini-games/arkanoid/index.html',`
`50`	`50`	`name: '打砖块',`
`51`		`- cover: 'org.svg'`
	`51`	`+ cover: 'arkanoid.png'`
`52`	`52`	`},`
`53`	`53`	`{`
`54`	`54`	`path: 'https://github.com/our-mini-games/mini-games/discussions',`