基于JavaScript制作一个骰子游戏

目录

• 知识点
• HTML 部分
• CSS 部分
• JavaScript 部分
• 总结

游戏可以通过这个链接进入 

完整源码我已经放在GitHub上了

这节实验我们将使用 HTML、CSS 和 JavaScript 构建一个骰子游戏。设置两名玩家(一个人玩也行)然后掷骰子，获得更高点数的玩家将赢得游戏。

知识点

• :hover 选择器
• querySelector() 方法
• setAttribute() 方法

骰子 1-6 点的图片都放在这里了，大家可以将这些图片保存在本地的文件夹中然后用相对地址引用，或者也可以直接使用这些图片地址。

HTML 部分

HTML 代码用于设计项目的基本结构，其中一个 div 包含玩家姓名和初始骰子阶段，另一个 div 包含两个按钮（一个按钮用于掷骰子，另一个按钮用于编辑玩家姓名）。

  
  
  



  

    
让我们开始吧

    

      
玩家 1
      
    

    

      
玩家 2
      
    
  

  

    
      掷骰子
    
  
  

    
      编辑玩家姓名
    
  

CSS 部分

在这里我们使用一些 CSS 属性来设置骰子游戏的样式。

:hover 选择器可在鼠标移到元素上时添加特殊样式。

JavaScript 部分

JavaScript 代码包含骰子游戏的两个功能。第一个功能是在单击按钮后重命名玩家姓名。另一个功能是在单击按钮后掷骰子。双方玩家掷骰子后，获得点数最高的玩家将获胜，如果两个玩家获得相同的相位值则游戏平局。

• querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
• setAttribute() 方法创建或改变某个新属性。

到这里我们的骰子游戏就做好了，下面我给出了完整的源代码，同学们可以下载下来试一试：

https://github.com/wanghao221/moyu

总结

相信通过上面的教程，大家已经学会了如何使用 JavaScript 构建骰子游戏。同时我们又学习/复习了一些知识，如：:hover 选择器、querySelector()和setAttribute()方法等。

到此这篇关于基于JavaScript制作一个骰子游戏的文章就介绍到这了,更多相关JavaScript骰子游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！