自动提交

frankelinli · Aug 4, 2024 · 3d6696e · 3d6696e
1 parent 8c18d49
commit 3d6696e
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 0 deletions.
diff --git a/src/pages/friend-link.mdx b/src/pages/friend-link.mdx
@@ -18,6 +18,7 @@ hide_table_of_contents: true
 10. [About - Xiaohan Zou (zxh.io)](https://zxh.io/)
 11. [如何更改WordPress类别基本前缀（分步） --- How to Change WordPress Category Base Prefix (Step-By-Step) (quadlayers.com)](https://quadlayers.com/change-the-wordpress-category-base-prefix/)
 12. [松子博客 - 学习成长分享 (szfx.top)](https://blog.szfx.top/)
+13. HTML+CSS教程开发；https://www.bilibili.com/video/BV1ux41127DU/
 
 ---
 

diff --git a/static/xyx.html b/static/xyx.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>吃豆人游戏</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+            font-family: Arial, sans-serif;
+        }
+        #gameCanvas {
+            border: 2px solid #000;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas" width="400" height="400"></canvas>
+
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+
+        const gridSize = 20;
+        const gridWidth = canvas.width / gridSize;
+        const gridHeight = canvas.height / gridSize;
+
+        // 增加头像大小
+        const avatarSize = gridSize * 1.5; // 将头像大小增加到1.5倍格子大小
+
+        let pacman = { x: 1, y: 1 };
+        let dots = [];
+        let score = 0;
+
+        const avatarPath = '徐叶蓁.JPG';
+        const avatarImg = new Image();
+        avatarImg.src = avatarPath;
+
+        function initGame() {
+            for (let x = 0; x < gridWidth; x++) {
+                for (let y = 0; y < gridHeight; y++) {
+                    if (Math.random() < 0.3) {
+                        dots.push({ x, y });
+                    }
+                }
+            }
+        }
+
+        function drawGame() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // 绘制豆子
+            ctx.fillStyle = 'yellow';
+            dots.forEach(dot => {
+                ctx.beginPath();
+                ctx.arc(dot.x * gridSize + gridSize / 2, dot.y * gridSize + gridSize / 2, 3, 0, Math.PI * 2);
+                ctx.fill();
+            });
+
+            // 绘制吃豆人（使用孩子的头像）
+            // 调整绘制位置，使头像居中于格子
+            const drawX = pacman.x * gridSize - (avatarSize - gridSize) / 2;
+            const drawY = pacman.y * gridSize - (avatarSize - gridSize) / 2;
+            ctx.drawImage(avatarImg, drawX, drawY, avatarSize, avatarSize);
+
+            // 显示得分
+            ctx.fillStyle = 'black';
+            ctx.font = '20px Arial';
+            ctx.fillText(`得分: ${score}`, 10, 30);
+        }
+
+        function movePacman(dx, dy) {
+            const newX = pacman.x + dx;
+            const newY = pacman.y + dy;
+
+            if (newX >= 0 && newX < gridWidth && newY >= 0 && newY < gridHeight) {
+                pacman.x = newX;
+                pacman.y = newY;
+
+                const dotIndex = dots.findIndex(dot => dot.x === pacman.x && dot.y === pacman.y);
+                if (dotIndex !== -1) {
+                    dots.splice(dotIndex, 1);
+                    score++;
+                }
+            }
+        }
+
+        document.addEventListener('keydown', (event) => {
+            switch (event.key) {
+                case 'ArrowUp': movePacman(0, -1); break;
+                case 'ArrowDown': movePacman(0, 1); break;
+                case 'ArrowLeft': movePacman(-1, 0); break;
+                case 'ArrowRight': movePacman(1, 0); break;
+            }
+        });
+
+        function gameLoop() {
+            drawGame();
+            requestAnimationFrame(gameLoop);
+        }
+
+        initGame();
+        gameLoop();
+
+        avatarImg.onerror = function() {
+            console.log('头像加载失败，使用默认图形');
+            avatarImg.onerror = null;
+            avatarImg = null;
+        };
+    </script>
+</body>
+</html>
diff --git a/static/徐叶蓁.jpg b/static/徐叶蓁.jpg