HW01

 1.notebooklm



學習卡

測驗



4.寫一個程式附加readme說明

小恐龍

專案結構

dino-game/
├── index.html
├── style.css
├── game.js
└── README.md

index.html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>小恐龍遊戲</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="game">
    <h1>🦖 小恐龍遊戲</h1>

    <div class="score">
      分數：<span id="score">0</span>
      <span class="high-score">
        最高分：<span id="highScore">0</span>
      </span>
    </div>

    <div id="gameArea" class="game-area">
      <div id="dino" class="dino">🦖</div>
      <div id="ground" class="ground"></div>
    </div>

    <p id="message">按空白鍵或點擊畫面開始</p>

    <button id="restartBtn" class="restart-btn">重新開始</button>
  </main>

  <script src="game.js"></script>
</body>
</html>

style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: Arial, "Microsoft JhengHei", sans-serif;
  background: #f7f7f7;
  color: #333;
}

.game {
  width: min(900px, 95vw);
  text-align: center;
}

h1 {
  margin-bottom: 10px;
}

.score {
  font-size: 20px;
  margin-bottom: 15px;
}

.high-score {
  margin-left: 20px;
  color: #777;
}

.game-area {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;

  background: #fff;
  border: 2px solid #333;
  border-radius: 8px;
  cursor: pointer;
}

.dino {
  position: absolute;
  left: 80px;
  bottom: 40px;

  font-size: 48px;
  line-height: 1;

  z-index: 2;
}

.dino.jump {
  animation: jump 0.55s ease-out;
}

@keyframes jump {
  0% {
    bottom: 40px;
  }

  50% {
    bottom: 180px;
  }

  100% {
    bottom: 40px;
  }
}

.obstacle {
  position: absolute;
  bottom: 40px;
  right: -50px;

  width: 35px;
  height: 55px;

  background: #333;
  border-radius: 5px 5px 0 0;
}

.obstacle::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 20px;

  width: 15px;
  height: 8px;

  background: #333;
}

.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 40px;
  border-top: 2px solid #333;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 30px,
      #999 30px,
      #999 40px
    );
}

#message {
  height: 25px;
  font-size: 16px;
}

.restart-btn {
  padding: 10px 20px;

  border: none;
  border-radius: 6px;

  background: #333;
  color: white;

  font-size: 16px;
  cursor: pointer;
}

.restart-btn:hover {
  background: #555;
}

@media (max-width: 600px) {
  .game-area {
    height: 250px;
  }

  .dino {
    left: 40px;
  }
}

game.js

const gameArea = document.getElementById("gameArea");
const dino = document.getElementById("dino");
const scoreElement = document.getElementById("score");
const highScoreElement = document.getElementById("highScore");
const messageElement = document.getElementById("message");
const restartBtn = document.getElementById("restartBtn");

let score = 0;
let highScore = Number(localStorage.getItem("dinoHighScore")) || 0;

let gameRunning = false;
let gameOver = false;
let obstacleTimer = null;
let scoreTimer = null;

highScoreElement.textContent = highScore;

function jump() {
  if (!gameRunning || gameOver) {
    return;
  }

  if (dino.classList.contains("jump")) {
    return;
  }

  dino.classList.add("jump");

  setTimeout(() => {
    dino.classList.remove("jump");
  }, 550);
}

function createObstacle() {
  if (!gameRunning || gameOver) {
    return;
  }

  const obstacle = document.createElement("div");
  obstacle.classList.add("obstacle");

  gameArea.appendChild(obstacle);

  let position = -50;

  const moveTimer = setInterval(() => {
    if (!gameRunning || gameOver) {
      clearInterval(moveTimer);
      obstacle.remove();
      return;
    }

    position += 6;
    obstacle.style.right = `${position}px`;

    checkCollision(obstacle);

    if (position > gameArea.offsetWidth + 60) {
      clearInterval(moveTimer);
      obstacle.remove();
    }
  }, 20);
}

function checkCollision(obstacle) {
  const dinoRect = dino.getBoundingClientRect();
  const obstacleRect = obstacle.getBoundingClientRect();

  const padding = 8;

  const collision =
    dinoRect.left + padding < obstacleRect.right &&
    dinoRect.right - padding > obstacleRect.left &&
    dinoRect.top + padding < obstacleRect.bottom &&
    dinoRect.bottom - padding > obstacleRect.top;

  if (collision) {
    endGame();
  }
}

function updateScore() {
  if (!gameRunning || gameOver) {
    return;
  }

  score++;
  scoreElement.textContent = score;
}

function startGame() {
  if (gameRunning) {
    return;
  }

  gameRunning = true;
  gameOver = false;

  score = 0;
  scoreElement.textContent = score;

  messageElement.textContent = "按空白鍵跳躍！";

  obstacleTimer = setInterval(() => {
    createObstacle();
  }, 1500);

  scoreTimer = setInterval(updateScore, 100);
}

function endGame() {
  if (gameOver) {
    return;
  }

  gameOver = true;
  gameRunning = false;

  clearInterval(obstacleTimer);
  clearInterval(scoreTimer);

  if (score > highScore) {
    highScore = score;
    localStorage.setItem("dinoHighScore", highScore);
    highScoreElement.textContent = highScore;
  }

  messageElement.textContent = `遊戲結束！你的分數是 ${score}`;
}

function restartGame() {
  clearInterval(obstacleTimer);
  clearInterval(scoreTimer);

  document.querySelectorAll(".obstacle").forEach((obstacle) => {
    obstacle.remove();
  });

  dino.classList.remove("jump");

  score = 0;
  scoreElement.textContent = score;

  gameRunning = false;
  gameOver = false;

  messageElement.textContent = "按空白鍵或點擊畫面開始";

  startGame();
}

document.addEventListener("keydown", (event) => {
  if (event.code === "Space") {
    event.preventDefault();

    if (!gameRunning && !gameOver) {
      startGame();
    } else {
      jump();
    }
  }
});

gameArea.addEventListener("click", () => {
  if (!gameRunning && !gameOver) {
    startGame();
  } else {
    jump();
  }
});

restartBtn.addEventListener("click", restartGame);

README.md

# 🦖 小恐龍遊戲

一個使用 HTML、CSS 和 JavaScript 製作的簡易小恐龍跑酷遊戲。

玩家需要控制小恐龍跳過障礙物，盡可能取得更高的分數。

## 🎮 遊戲方式

- 按下 `Space` 空白鍵開始遊戲
- 遊戲開始後，再按 `Space` 可以跳躍
- 也可以直接點擊遊戲畫面
- 撞到障礙物後遊戲結束
- 點擊「重新開始」可以重新遊玩

## ✨ 功能

- 🦖 小恐龍跳躍
- 🌵 隨機出現障礙物
- 💯 即時分數
- 🏆 最高分紀錄
- 💾 使用 `localStorage` 儲存最高分
- 📱 支援手機與桌面瀏覽器
- 📦 不需要安裝任何第三方套件

## 📁 專案結構

```text
dino-game/
├── index.html
├── style.css
├── game.js
└── README.md

🚀 執行方式

方法一：直接開啟

直接用瀏覽器開啟：

index.html

即可開始遊戲。

方法二：使用 VS Code

如果使用 Visual Studio Code，可以安裝 Live Server，
然後對 index.html 按右鍵：

Open with Live Server

瀏覽器就會自動開啟遊戲。

🛠️ 使用技術

  • HTML5

  • CSS3

  • JavaScript

  • DOM API

  • localStorage

📌 注意

本專案是練習用途的簡易 Dino Game，
並非 Google 官方的小恐龍遊戲，也沒有使用 Google 的原始程式碼或素材。

📄 License

MIT License


把這 4 個檔案放進同一個資料夾後，直接開 `index.html` 就可以玩。



5.這個網站讓我學到Python，收穫良多


















留言

張貼留言

這個網誌中的熱門文章

HW02 Python運算子表達式

圖片
1.  Notebooklm 2. 3. 學習卡 及測驗 4. 寫1個程式需附加說明 Create a README For Github 1. 專案名稱 car-speed-calculator 2. C 語言程式碼 檔案名稱： main.c c #include <stdio.h> int main() { float distance, time, speed; // Input distance in meters printf("Enter distance in meters: "); scanf("%f", &distance); // Input time in seconds printf("Enter time in seconds: "); scanf("%f", &time); // Calculate speed if (time > 0) { speed = distance / time; printf("Speed of the car = %.2f m/s\n", speed); } else { printf("Time must be greater than zero.\n"); } return 0; } 程式說明 #include <stdio.h> ：引入標準輸入與輸出函式庫。 float distance, time, speed; ：宣告距離、時間和速度變數。 scanf() ：讓使用者透過鍵盤輸入距離和時間。 speed = distance / time; ：使用距離除以時間計算速度。 if (time > 0) ：確保時間大於零，避免除以零。 printf() ：顯示計算結果。 %.2f ：將速度顯示至小數點後兩位。 計算公式： Speed = Distance Time Speed = Time Distance ​ 3. GitHub README.md...
閱讀完整內容