读心术小游戏(附加源码)

server/2024/12/20 12:44:45/

写在开头

上期代码主要实现瀑布流功能,本期就来实现读心术小游戏,开发久了很多功能都是通过框架组件库来完成,但是如果组件满足不了开发需求,还需要开发人员手动封装组件,专门出这样一期文章,通过原生js实现一些特定功能,功能也比较简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript,培养程序思维,本期到此结束。

实现功能

主要是读心术小游戏,看起来很神秘,其实都是有js语句控制的,代码中有备注,就不一一讲解了

创建页面

html" title=javascript>javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>读心术2</title><link rel="stylesheet" href="../css/index.css">
</head><body><!-- 外层容器 --><div class="container"><!-- 左侧部分 --><div class="board"><!-- 左上的魔盘 --><div class="panel"><!-- 魔盘圆心 --><img src="../images/round.png" alt="魔盘圆心" class="result" id="initImg"><!-- 显示最终结果的图片 --><img src="../images/values/0.png" style="opacity: 0" alt="结果图片" class="result" id="resultImg"></div><!-- 左下的游戏说明 --><div class="tip"><p>在心中任意选择一个两位数</p><p>(或者说,从10~99之间任意选择一个数)</p><p>把这个数字分别减去其十位数和个位数</p><p>(例如你选择的是71,那就:71-7-1=63</p><p>在右边图表中找出与最后得出的数所相应的图形,并把这个图形牢记心中。</p><p>然后点击上方的阵型。</p><p>你会发现,阵型所显示出来的图形就是你刚刚心里记下的那个图形。</p></div></div><!-- 右侧部分,这一个部分的内容由 js 动态生成 --><div class="dictionary"></div></div><script src="../js/index.js"></script>
</body></html>

样式创建

html" title=javascript>javascript">/* 容器整体样式 */.container{width: 1000px;height: 700px;margin: 0 auto;display: flex;
}/* 容器左边的样式 */.container .board{width: 350px;height: 100%;
}/* 魔盘样式 */
.board .panel{width: 100%;height: 300px;position: relative;background: url('../images/bg.gif') no-repeat;background-position: center;
}/* 魔盘中心样式 */
.board .panel .result{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}/* 下方游戏说明样式 */
.board .tip p{font-weight: 100;text-align: center;
}/* 右侧字典表样式 */
.container .dictionary{width: 650px;display: grid;grid-template: repeat(20, 35px)/repeat(5, 130px);grid-auto-flow: column;font-weight: 100;
}.container .dictionary .number{display: inline-block;width: 40px;text-align: right;margin-right: 10px;
}.container .dictionary img{height: 30px;vertical-align: -5px;
}

逻辑实现

html" title=javascript>javascript">var maxImgIndex = 15; // 最大的索引值
var curTargetIndex = null; // 当前的索引
var isGameOver = false; // 游戏是否结束// 封装两个 DOM 查询方法function $(selector) {return document.querySelector(selector);
}function $$(selector) {return document.querySelectorAll(selector);
}// 获取 DOM 节点
var panel = $('.panel'); // 获取整个魔盘
var initImg = $('#initImg'); // 获取魔盘的圆心
var resultImg = $('#resultImg'); // 获取结果图片
var dictionary = $('.dictionary'); // 获取右侧的字典表// Math.floor(Math.random() * 可能性数 + 第一个可能值)
// 1-10之间
// Math.floor(Math.random() * 10 + 1)// 返回从 min 到 max 的随机数
function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1) + min)
}// 初始化右侧的字典表function init() {// 需要随机选择一张 9 的倍数显示什么图片curTargetIndex = getRandom(0, maxImgIndex); // 得到一个从 0 到 15 的随机数// 首先清空上一次的字典表结果dictionary.innerHTML = '';// 生成这一次的字典表// 一共是 100 张图片,如果是 9 的倍数,那么图片的索引应该为 curTargetIndex// 否则的话就从 0~15 之间随便选择一张for(var i=0; i<100; i++){var imgIndex = null; // 用于存储图片的索引值if(i % 9 === 0){// 说明是 9 的倍数imgIndex = curTargetIndex;} else {// 说明不是 9 的倍数,随便摇一张即可imgIndex = getRandom(0, maxImgIndex);}dictionary.innerHTML += `<div class="item"><span class="number">${i}</span><span class="value"><img src="../images/values/${imgIndex}.png"/></span></div>`;}}init();// 接下来,我们需要绑定点击事件
panel.onclick = function(e){if(isGameOver){// 说明游戏结束,需要询问玩家是否再玩一遍,如果要,我就做一些初始化的工作if(window.confirm('是否再玩一次?')){init(); // 重新初始化魔盘initImg.style.opacity = 1; // 显示魔盘圆心resultImg.style.opacity = 0; // 隐藏结果图片isGameOver = false;// 接下来一步很关键,去除 transition 和 transform 都去除// 并且还要删除 transitionend 事件,否则下一次游戏会直接触发 transitionend 事件e.currentTarget.setAttribute('style', '');panel.removeEventListener('transitionend', transitionendHandle)}} else {// 如果进入到 else,我们就需要将结果给玩家显示出来// 显示结果其实很简单,就是将魔盘圆心隐藏,将结果图片显示出来// 但是我们需要旋转 1800 deg,有一点仪式感e.currentTarget.style.transition = 'all 2s'e.currentTarget.style.transform = 'rotate(1800deg)';// 旋转完成后,我们就需要将魔盘圆心隐藏,将结果图片显示出来// 通过 transitionend 事件,我们就可以知道旋转完了没有panel.addEventListener('transitionend', transitionendHandle);}
}// 旋转完成后,要做的事情
function transitionendHandle(){initImg.style.opacity = 0; // 将魔盘圆心修改为透明resultImg.src = `../images/values/${curTargetIndex}.png`; // 设置结果图片resultImg.style.opacity = 1; // 将结果图片显示出来isGameOver = true;
}

呈现结果

在这里插入图片描述


http://www.ppmy.cn/server/151703.html

相关文章

vue框架的搭建

1什么是Node.js&#xff1b; Node.js 是一个免费、开源、跨平台的 JavaScript 运行时环境, 它让开发人员能够创建服务器 Web 应用、命令行工具和脚本 Node.js下载&#xff1a; 下载Node 16.20.2 安装Node.js 安装Node.js 测试安装 运行命令行 win键R 查看node版本 输入&am…

HTMLCSS:动态星空按钮

这段代码创建了一个具有动态背景和光晕效果的按钮&#xff0c;模拟了太空中星星闪烁的效果。按钮在鼠标悬停和按下时有不同的视觉效果&#xff0c;增加了页面的互动性。 演示效果 HTML&CSS <!DOCTYPE html> <html lang"en"><head><meta c…

【系统】Mac crontab 无法退出编辑模式问题

【系统】Mac crontab 无法退出编辑模式问题 背景一、问题回答1.定位原因&#xff1a;2.确认编辑器类型3.确保编辑器进入正确3.1 确认是否有crontab调度任务3.2 进入编辑器并确保编辑器正常3.3 保存操作 4.确认crontab任务存在5.确保脚本的可执行性和正确性 二、后续 背景 之前…

航空航天领域 FMEA 如何保障飞行安全

【大家好&#xff0c;我是唐Sun&#xff0c;唐Sun的唐&#xff0c;唐Sun的Sun。】 在航空航天领域&#xff0c;飞行安全始终是首要任务&#xff0c;而故障模式与影响分析&#xff08;FMEA&#xff09;在保障飞行安全方面发挥着不可或缺的作用。 航空航天系统极其复杂&#xff0…

Python:利用蒙特卡洛方法求解圆周率

1. 蒙特卡洛方法概述 蒙特卡洛方法是一种以概率统计理论为指导的数值计算方法。它通过随机抽样来求解问题&#xff0c;在许多复杂的数学、物理等领域都有广泛的应用。其基本思想是利用随机数来模拟实验&#xff0c;通过大量重复的实验得到近似的结果。 2. 利用蒙特卡洛方法求…

Tomcat原理(5)——tomcat最终实现

目录 一、什么是Servlet容器 二、ServletConfigMapping构建实现容器 ServletConfigMapping MyTomcat 三、优化server Server MyTomcat 四、匹配 代码如下&#xff1a; 测试如下&#xff1a; 上一篇博客已经为介绍了servelet的实现 &#xff0c;这篇对上一篇博客进行补…

三分钟完成vue项目中iconfont图标的导入

iconfont 提供了丰富的图标库&#xff0c;也允许个人上传分享图标&#xff0c;非常复合中文视觉体验。平时的开发中也离不开iconfont图标的使用&#xff0c;今天就给大家聊一下iconfont图表在vue项目中的快速导入&#xff01; 1、添加图标 登录iconfont-阿里巴巴矢量图标库&a…

springboot446数字化农家乐管理平台的设计与实现(论文+源码)_kaic

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#x…