从零开始制作一个趣味骰子游戏

大家好!今天我要和大家分享一个非常有趣的Web小项目 – 双人骰子游戏。这个项目看起来简单,但实际上涵盖了HTML、CSS和JavaScript的多个最基础重要概念。让我们一步步来看看如何实现它!

项目预览

这是一个双人骰子游戏,玩家通过刷新页面来掷骰子。如下图所示，每次刷新,两个骰子会随机显示点数,并自动判断获胜者。游戏界面简洁优雅,还加入了一些动画效果,非常适合初学者练手。

项目初始文件下载⬇️

Dicee+Challenge+-+Starting+Files 下载

完整项目文件在结尾⬇️

技术栈

HTML5
CSS3
JavaScript(原生)
Google Fonts

项目结构

首先看看项目的文件结构:

├── index.html
├── styles.css
├── index.js
└── images/
    ├── dice1.png
    ├── dice2.png
    ├── dice3.png
    ├── dice4.png
    ├── dice5.png
    └── dice6.png

第一步:搭建HTML结构

让我们先来看看HTML部分的代码。这里的结构非常清晰:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="styles.css">
    <link href="<https://fonts.googleapis.com/css?family=Indie+Flower|Lobster>" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Refresh Me</h1>
      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="images/dice6.png">
      </div>
      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="images/dice6.png">
      </div>
    </div>
    <script src="index.js"></script>
  </body>
  <footer>
    www 🎲 App Brewery 🎲 com
  </footer>
</html>

这里有几个重要的点需要注意:

我们使用了Google Fonts提供的两种字体:’Indie Flower’和’Lobster’
主体结构采用div嵌套的方式,便于CSS布局
初始状态下,两个骰子都显示6点

第二步:添加样式

接下来是CSS部分,这里我们重点关注几个关键的样式设置:

.container {
  width: 70%;
  margin: auto;
  text-align: center;
}

.dice {
  text-align: center;
  display: inline-block;
}

body {
  background-color: #393E46;
}

h1 {
  margin: 30px;
  font-family: 'Lobster', cursive;
  text-shadow: 5px 0 #232931;
  font-size: 8rem;
  color: #4ECCA3;
}

样式的亮点:

使用了舒适的深色背景配色方案
标题采用了阴影效果,增加立体感
骰子区域使用inline-block实现水平排列
响应式设计考虑,container使用百分比宽度

第三步:JavaScript实现游戏逻辑

这是最有趣的部分,我们来看看游戏的核心逻辑:

// 1. 生成1-6之间的随机整数
var randomNumber1 = Math.floor(Math.random() * 6) + 1;  
// Math.random() 生成0-1之间的随机数
// 乘以6得到0-5.99之间的数
// Math.floor()向下取整，得到0-5
// 最后加1，得到1-6之间的随机整数

// 2. 构建骰子图片的文件名
var randomDiceImage = "dice" + randomNumber1 + ".png";  
// 通过字符串拼接，比如randomNumber1为3
// 则得到"dice3.png"

// 3. 构建骰子图片的完整路径
var randomImageSource = "images/" + randomDiceImage;  
// 将文件夹路径和文件名拼接
// 例如："images/dice3.png"

// 4. 获取第一个骰子图片元素
var image1 = document.querySelectorAll("img")[0];  
// querySelectorAll("img")选择页面中所有img标签
// [0]选择第一个img元素

// 5. 设置图片源为新的随机骰子图片
image1.setAttribute("src", randomImageSource);
// 使用setAttribute方法更新img的src属性
// 这将显示新的随机骰子图片

代码解析:

Math.random() * 6 生成0-5的随机数
Math.floor() 向下取整
+ 1 确保范围在1-6之间
使用字符串拼接构建图片路径
通过DOM操作更新图片源

判断胜负的逻辑也很直观:

// 比较两个骰子的点数来决定获胜者
if (randomNumber1 > randomNumber2) {  // 如果玩家1的点数大于玩家2
    document.querySelector("h1").innerHTML = "🚩 Play 1 Wins!";  // 玩家1获胜，更新标题文本，在玩家1一侧显示旗帜图标
}
else if (randomNumber2 > randomNumber1) {  // 如果玩家2的点数大于玩家1
    document.querySelector("h1").innerHTML = "Player 2 Wins! 🚩";  // 玩家2获胜，更新标题文本，在玩家2一侧显示旗帜图标
}
else {  // 如果两个玩家点数相等
    document.querySelector("h1").innerHTML = "Draw!";  // 平局，更新标题文本为Draw
}

学习要点

通过这个项目,我们可以学到:

HTML语义化结构的重要性
CSS布局技巧(居中、inline-block使用)
JavaScript随机数生成
DOM操作和事件处理
条件判断和字符串处理

总结

这个骰子游戏虽然简单,但是非常适合初学者练习。它完美展示了前端三大技术的协同工作方式,同时项目结构清晰,便于理解和扩展。

希望这篇教程对大家有帮助!如果你有任何问题或建议,欢迎在评论区留言交流。祝大家编程愉快!

项目完整文件下载⬇️

Dicee+Challenge+-+Completed 下载