基于JavaScript制作一个骰子游戏
目录
- 知识点
- HTML 部分
- CSS 部分
- JavaScript 部分
- 总结
游戏可以通过这个链接进入
完整源码我已经放在GitHub上了
这节实验我们将使用 HTML、CSS 和 JavaScript 构建一个骰子游戏。设置两名玩家(一个人玩也行)然后掷骰子，获得更高点数的玩家将赢得游戏。
知识点
- :hover 选择器
- querySelector() 方法
- setAttribute() 方法
骰子 1-6 点的图片都放在这里了，大家可以将这些图片保存在本地的文件夹中然后用相对地址引用，或者也可以直接使用这些图片地址。
HTML 部分
HTML 代码用于设计项目的基本结构，其中一个 div 包含玩家姓名和初始骰子阶段，另一个 div 包含两个按钮（一个按钮用于掷骰子，另一个按钮用于编辑玩家姓名）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>使用 JavaScript 构建骰子游戏</title>
</head>
<body>
<div class="container">
<h1>让我们开始吧</h1>
<div class="dice">
<p class="Player1">玩家 1</p>
<img class="img1" src="dice6.png">
</div>
<div class="dice">
<p class="Player2">玩家 2</p>
<img class="img2" src="dice6.png">
</div>
</div>
<div class="container bottom">
<button type="button" class="butn" onClick="rollTheDice()">
掷骰子
</button>
</div>
<div class="container bottom">
<button type="button" class="butn" onClick="editNames()">
编辑玩家姓名
</button>
</div>
</body>
</html>
CSS 部分
在这里我们使用一些 CSS 属性来设置骰子游戏的样式。
<style>
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
margin: 10px;
}
body {
background-image: url(https://labfile.oss.aliyuncs.com/courses/8605/bg-451838.jpeg);
background-size: 100% 100%;
height: 95vh;
margin: 0;
}
h1 {
margin: 30px;
font-family: "Lobster", cursive;
text-shadow: 5px 0 #232931;
font-size: 4.5rem;
color: #4ecca3;
text-align: center;
}
p {
font-size: 2rem;
color: #4ecca3;
font-family: "Indie Flower", cursive;
}
img {
width: 100%;
}
.bottom {
padding-top: 30px;
}
.butn {
background: #4ecca3;
font-family: "Indie Flower", cursive;
border-radius: 7px;
color: #ffff;
font-size: 30px;
padding: 16px 25px 16px 25px;
text-decoration: none;
}
.butn:hover {
background: #232931;
text-decoration: none;
}
</style>
:hover 选择器可在鼠标移到元素上时添加特殊样式。
JavaScript 部分
JavaScript 代码包含骰子游戏的两个功能。第一个功能是在单击按钮后重命名玩家姓名。另一个功能是在单击按钮后掷骰子。双方玩家掷骰子后，获得点数最高的玩家将获胜，如果两个玩家获得相同的相位值则游戏平局。
<script>
// 玩家姓名
var player1 = "Player 1";
var player2 = "Player 2";
// 改变玩家姓名的功能
function editNames() {
player1 = prompt("更改玩家 1 姓名");
player2 = prompt("更改玩家 2 姓名");
document.querySelector("p.Player1").innerHTML = player1;
document.querySelector("p.Player2").innerHTML = player2;
}
// 掷骰子的功能
function rollTheDice() {
//设置了一个 1000 毫秒的延迟
setTimeout(function () {
//生成 1-6 的随机数
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
//将骰子的图片改成对应随机数
document.querySelector(".img1").setAttribute("src", "dice" + randomNumber1 + ".png");
document.querySelector(".img2").setAttribute("src", "dice" + randomNumber2 + ".png");
//两个数相等
if (randomNumber1 === randomNumber2) {
//将 h1 的文本改为 "平局!"
document.querySelector("h1").innerHTML = "平局!";
} else if (randomNumber1 < randomNumber2) {
document.querySelector("h1").innerHTML = (player2 + "获得胜利!");
} else {
document.querySelector("h1").innerHTML = (player1 + "获得胜利!");
}
}, 1000);
}
</script>
- querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
- setAttribute() 方法创建或改变某个新属性。
到这里我们的骰子游戏就做好了，下面我给出了完整的源代码，同学们可以下载下来试一试：
https://github.com/wanghao221/moyu
总结
相信通过上面的教程，大家已经学会了如何使用 JavaScript 构建骰子游戏。同时我们又学习/复习了一些知识，如：:hover 选择器、querySelector()和setAttribute()方法等。
到此这篇关于基于JavaScript制作一个骰子游戏的文章就介绍到这了,更多相关JavaScript骰子游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS实现简单随机3D骰子
本文实例为大家分享了JS实现简单随机3D骰子的具体代码,供大家参考,具体内容如下 描述: JS--实现简单的随机3D骰子. 效果: 实现: html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
-
js实现简单掷骰子小游戏
本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下 实现方法: 方法一:通过background-position.background-image.backg-repeat三个属性以及jquery animate()方法改变背景骰子图来实现图片切换. PS:调整background-position比较麻烦,由于背景是一张包含各个点数以及旋转时骰子的整图 方法二:设置定时调整css样式background-image. PS:实现简单,但是视觉效果不佳 <!DOCTYPE
-
js实现掷骰子小游戏
本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下 因为这次作业是第一个实验,比较简单,但是要求面向对象来做,而我这个时候又刚好在学JS,JS来做骰子游戏即有前端了,又省了后台处理,代码量会比用JAVA来做少了非常非常多.考虑到这种实验实在不想浪费时间去用JAVA写,于是有了一下JS实现的版本.但是大家都知道JS的面向对象其实是伪面向对象.我感觉并不好用,因为用句柄的方式无法传值,你封装成对象了还得拆出来成为过程(单一方法)来用. 版本1: (没有用面向对象) <!DOCT
-
JS实现骰子3D旋转效果
本文实例为大家分享了JS实现骰子3D旋转效果展示的具体代码,供大家参考,具体内容如下 css部分代码: .dice_box { width: 400px; height: 400px; position:relative; margin:0 auto; perspective: 900px; -moz-perspective: 900px; -webkit-perspective: 900px; perspective-origin: 50%, 50%; -moz-perspective-ori
-
js实现简单掷骰子效果
本案例要实现的掷骰子效果: 点击按钮,使骰子转动起来,转动随机时间之后,自动停止在某一个点数上. 思路: 点击按钮之后,将原本静态的骰子图片替换为一个动态转动的gif图片: 创建定时器,实现随机时间之后,动态的图片随机替换为1~6点图片的任意一张图片. 注意: 1.要考虑用户点击一次按钮后再连续多次点击按钮的情况. 2.为了防止不必要的问题,需要设置使定时器执行完毕一次之后,再点击按钮才有效. 3.这里设置了一个开关: 用户点击按钮时,先判断开关是否关闭,如未关闭,可执行函数内容: 若开关已关闭
-
js实现转动骰子模型
本文创建了一个自动随机生成骰子数的模型,因为需要引入图片这里将图片省去了,自己导入图片即可验证代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--创建对象--> <div id="c1"> <img src=&qu
-
基于JavaScript制作一个骰子游戏
目录 知识点 HTML 部分 CSS 部分 JavaScript 部分 总结 游戏可以通过这个链接进入 完整源码我已经放在GitHub上了 这节实验我们将使用 HTML.CSS 和 JavaScript 构建一个骰子游戏.设置两名玩家(一个人玩也行)然后掷骰子,获得更高点数的玩家将赢得游戏. 知识点 :hover 选择器 querySelector() 方法 setAttribute() 方法 骰子 1-6 点的图片都放在这里了,大家可以将这些图片保存在本地的文件夹中然后用相对地址引用,或者也可
-
基于PyQt5制作一个猜数字小游戏
开始之前,直接来看一下实现后的效果.想自己实现或者需要源码的童鞋直接进场... 将PyQt5的相关模块直接导入即可. from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.QtWidgets import * 为了照顾一下新关注的童鞋,这里介绍一下PyQt5的安装,还是采用pip的安装方式. pip install PyQt5 将准备好的样式导入到代码块中. # 主题样式模块引用 from QCandyUi import
-
基于Java制作一个好玩的打飞机游戏
目录 1.效果图 2.项目整体构造 3.主类代码展示 4.飞机类代码展示 5.炮弹类代码展示 6.爆炸类代码展示 1.效果图 2.项目整体构造 3.主类代码展示 public class MyGameFrame extends Frame { Image planeImg = GameUtil.getImage("images/plane.png"); Image bg = GameUtil.getImage("images/bg.j
-
基于JavaScript编写一个翻卡游戏
目录 前言 翻卡动画 生成随机分布数组 均匀元素下的随机算法 不均匀元素下的随机算法 生成最终数组 点击事件 完整代码 前言 首先将这个游戏需求拆分成三个部分: 翻卡动画 生成随机分布数组 点击事件 翻卡动画 假如我们的盒子模型不是个二维的平面,而是有个三维的体积,让它可以有正反两面,那我们在做的时候是不是只要将它真实的翻个面就可以了.让我们来想想将它变成三维的方法. 之后发现了这个属性: transform: translateZ(1px); 使用了它,就可以把盒子内部的元素与盒子的底部撑出个
-
如何基于javascript实现贪吃蛇游戏
这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div class="content"> <div class="btn startBtn"> <!-- 开始按钮 --> <button type="button"></button> </div>
-
基于Python制作炸金花游戏的过程详解
目录 前言 一.思路 二.解决方案 三.总结 前言 <诈金花>又叫三张牌,是在全国广泛流传的一种民间多人纸牌游戏.比如JJ比赛中的诈金花(赢三张),具有独特的比牌规则.游戏过程中需要考验玩家的胆略和智慧.--<百度百科> 前几天在交流群里边,有个叫[^-^]的粉丝分享了一道扑克牌诈金花的题目,要求用Python实现,题目如下: 自己写一个程序,实现发牌.比大小判断输赢. 游戏规则: 一付扑克牌,去掉大小王,每个玩家发3张牌,最后比大小,看谁赢. 有以下几种牌: 豹子:三张一样的牌,
-
基于JS制作一个简单的网页版地图
目录 前言 一.申请地图的AK密钥 二.主要代码分析 三.全部代码 四.结果展示 前言 以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管
-
详解基于electron制作一个node压缩图片的桌面应用
基于electron制作一个node压缩图片的桌面应用 下载地址:https://github.com/zenoslin/imagemin-electron/releases 项目源码Github:https://github.com/zenoslin/imagemin-electron 准备工作 我们来整理一下我们需要做什么: 压缩图片模块 获取文件路径 桌面应用生成 压缩图片 我们需要使用imagemin这个库来压缩图片,这里我们把这个库封装成压缩模块. const imagemin = r
-
基于JavaScript实现一个简单的Vue
Object.defineProperty() 实现之前我们得先看一下Object.defineProperty的实现,因为vue主要是通过数据劫持来实现的,通过get.set来完成数据的读取和更新. var obj = {name:'wclimb'} var age = 24 Object.defineProperty(obj,'age',{ enumerable: true, // 可枚举 configurable: false, // 不能再define get () { return a
-
原生javascript制作的拼图游戏实现方法详解
本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置 计算背景图位置 //1.让所有的li(在ul里)可以拖拽 //根据鼠标的位置,计算目标li的序号 //根据行号和列号计算下标 //行号*3+列号 //2.归位 此处没有背景图 请自行添加 css样式 <!DOCTYPE html> <html> <head> <meta charset=&q