前言
《找月饼》：是一款 pc 端单机 html 灵活智力和鼠标技巧小游戏，休闲娱乐游戏；同时，需要耐心和探索，琢磨变化多端的关卡；锻炼摸鱼的时刻到了，出发吧，找到需要拯救的月饼！
九种获取月饼的方法~（回答关卡 + 触发机制次数关卡）
如：回答题
一、游戏介绍与规则
游戏介绍
回答关卡：根据题目，输入正确答案，即可获得月饼。
触发机制次数关卡：多次触发机制，达到一定次数，获得月饼。
管你看没看懂，玩就行了！（破音；海皇式）
技术介绍
css + jq
游戏名称
《解锁月饼》
游戏规则
① 不限时间.
② 分为两种方式获得：回答关卡；触发机制次数关卡。
③ 仔细观察对应灰框上数字的变化 （小技巧课堂：多摆弄摆弄鼠标，说不定就出现变化了呢！）
二、大体设计与代码讲解
大体设计
首先，这个不好说吧，最好通过玩的过程；去了解代码吧~ 直接放逻辑就不好玩了吧~ 先玩起来，加深印象~ 代码上也有比较完整代码，就不多说设计了哈~（也因为比较简单）
代码讲解
<!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">
<link rel="shortcut icon"
href="https://p3-passport.byteimg.com/img/user-avatar/db3b09f9ca107d8843cee3fe8f4f0cd4~100x100.awebp">
<title>找月饼</title>
</head>
<body>
<div class="v-title">
<h1>解锁月饼</h1>
<h3>当前已解锁月饼：<span id="moon-cake" style="color: rgb(226, 184, 184);">0</span>（共 9 个）</h3>
<div class="v-detail">
<span style="color: black;">解锁月饼，找出9种获取月饼的方法！赶紧出发吧！</span><br>
<span>（ps：一个月饼对应一个灰框）</span>
</div>
</div>
<div class="v-body">
<div class="v-game">
<div class="v-game-div">
<div class="v-img">
<span id="s-sum-1">q1</span>
<img src="./moon-cake.gif" alt="大月饼" onclick="question1(this)">
</div>
<div class="v-img">
<span id="s-sum-2">3</span>
<img src="./moon-cake.gif" alt="大月饼" onmousedown="downMoonCake(this)">
</div>
<div class="v-img">
<span id="s-sum-3">5</span>
<img src="./moon-cake.gif" alt="大月饼" onmouseup="upMoonCake(this)">
</div>
</div>
<div class="v-game-div">
<div class="v-img">
<span id="s-sum-4">q2</span>
<img src="./moon-cake.gif" alt="大月饼" onclick="question2(this)">
</div>
<div class="v-img">
<span id="s-sum-5">4</span>
<img src="./moon-cake.gif" alt="大月饼" onclick="onclikeMoonCake(this)">
</div>
<div class="v-img">
<span id="s-sum-6">8</span>
<img src="./moon-cake.gif" alt="大月饼" onmouseleave="leaveMoonCake(this)">
</div>
</div>
<div class="v-game-div">
<div class="v-img">
<span id="s-sum-7">6</span>
<img src="./moon-cake.gif" alt="大月饼" oncontextmenu="menuMoonCake(this)">
</div>
<div class="v-img">
<span id="s-sum-8">520</span>
<img src="./moon-cake.gif" alt="大月饼" onmousemove="moveMoonCake(this)">
</div>
<div class="v-img">
<span id="s-sum-9">9</span>
<img src="./moon-cake.gif" alt="大月饼" onmouseenter="enterMoonCake(this)">
</div>
</div>
</div>
<!-- 直接重刷页面，再来一把（简单粗暴） -->
<span class="btn" onclick="location.reload()">再来一把</span>
</div>
</body>
<script>
var countList = ["+", "-", "*", "/", "%"];
var q1 = false; // 标记是否已回答问题获取月饼了
var q2 = false;
// 当前需要回答一个问题解锁
function question1(e) {
if (q1) { // 已经回答过
return;
}
var countStr = countList[Math.floor(Math.random() * (countList.length))];
var ques = String(Math.floor(Math.random() * (100))) + countStr + String(Math.floor(Math.random() * (100)));
var ans = prompt("请输入：" + ques);
// console.log(ans)
if (ans == null) {
return;
}
if (ques != ans) {
alert("错误！请重新输入");
question1(e);
} else {
var span = document.getElementById("s-sum-1");
removeAndShow(e, span);
q1 = true;
}
}
// 当前需要回答一个问题解锁
function question2(e) {
if (q2) { // 已经回答过
return;
}
var countStr = countList[Math.floor(Math.random() * (countList.length))];
var num1 = Number(Math.floor(Math.random() * (100)));
var num2 = Number(Math.floor(Math.random() * (100)));
let res = Number(num1) + Number(num2);
if (countStr == "+") {
// console.log("+")
} else if (countStr == "-") {
// console.log("-")
res = num1 - num2;
} else if (countStr == "*") {
// console.log("*")
res = num1 * num2;
} else if (countStr == "/") {
// console.log("/")
res = num1 / num2;
} else if (countStr == "%") {
// console.log("%")
res = num1 % num2;
}
var ques = String(num1) + countStr + String(num2);
var ans = prompt("请计算：" + ques);
if (ans == null) {
return;
}
// console.log("答案：", res, "回答：", ans)
if (res != ans) {
alert("错误！请重新输入");
question2(e);
} else {
var span = document.getElementById("s-sum-4");
removeAndShow(e, span);
q2 = true;
}
}
// 点击事件
var c1 = 0; // 记录需要点击两次（不论点击取消、确定）
function onclikeMoonCake(e) {
var span = document.getElementById("s-sum-5");
var spanSum = Number(span.innerText);
if (spanSum == 0) {
return;
}
if (c1 < 2) {
var msg = "点击我没用~";
if (c1 == 1) {
msg = "不要点击啦！真没用！";
}
confirm(msg);
c1++;
return;
}
if (spanSum > 1) {
var msg = "再点我生气了！😠";
confirm(msg);
spanSum--;
span.innerText = spanSum;
return;
}
spanSum--;
alert("行吧，月饼给你了！")
removeAndShow(e, span);
}
// 鼠标滑入事件
function enterMoonCake(e) {
var span = document.getElementById("s-sum-9");
var spanSum = Number(span.innerText) - 1;
if (spanSum > 0) {
span.innerText = spanSum;
} else if (spanSum == 0) {
removeAndShow(e, span);
}
}
var m2 = 0; // 故意使坏，第3次滑出才开始计算
// 鼠标滑出事件
function leaveMoonCake(e) {
var span = document.getElementById("s-sum-6");
var spanSum = Number(span.innerText);
if (spanSum == 8 && m2 < 2) {
m2++;
return;
}
spanSum--;
if (spanSum > 0) {
span.innerText = spanSum;
} else if (spanSum == 0) {
removeAndShow(e, span);
}
}
// 鼠标点下事件（鼠标点击的瞬间）
function upMoonCake(e) {
var span = document.getElementById("s-sum-3");
var spanSum = Number(span.innerText);
// e.style.opacity = 1;
if (spanSum == 0) {
return;
}
if (spanSum > 1) {
var msg = "你要不试试取消？";
if (spanSum == 3) {
msg = "点我真没用~";
}
var c = confirm(msg);
if (c) {
spanSum--;
span.innerText = spanSum;
}
return;
}
spanSum--;
alert("可恶，还是被你识破了！")
removeAndShow(e, span);
}
// 鼠标松开事件（鼠标点击后，松开的瞬间）
function downMoonCake(e) {
var span = document.getElementById("s-sum-2");
var spanSum = Number(span.innerText);
if (spanSum == 0) {
return;
}
// console.log(spanSum)
if (spanSum > 1) {
var msg = "点击我没用~";
if (spanSum % 2 == 1) {
msg = "你点击取消试试？";
}
var c = confirm(msg);
if (!c) {
spanSum--;
span.innerText = spanSum;
}
return;
}
spanSum--;
alert("获得一块月饼")
removeAndShow(e, span);
}
// 长按事件
// function touchMoonCake(e) {
// e.style.opacity = 1;
// }
// 鼠标在当前区域内移动的事件
function moveMoonCake(e) {
var span = document.getElementById("s-sum-8");
var spanSum = Number(span.innerText);
spanSum--;
if (spanSum > 0) {
span.innerText = spanSum;
} else if (spanSum == 0) {
removeAndShow(e, span);
}
}
var m1 = false;
// 鼠标右击
function menuMoonCake(e) {
console.log("鼠标右击");
var span = document.getElementById("s-sum-7");
var spanSum = Number(span.innerText);
if (spanSum == 6 && !m1) {
// 故意使坏右击第一次无变化
m1 = true;
return;
}
spanSum--;
if (spanSum > 0) {
span.innerText = spanSum;
} else if (spanSum == 0) {
removeAndShow(e, span);
}
}
// 把span里的字去掉，同时显示图片（通过透明度）
function removeAndShow(e, span) {
span.innerHTML = ""; // 置空
e.style.opacity = 1; // 显示图片
countMoonCake();
}
// 记录已月饼++
function countMoonCake() {
var moonCake = document.getElementById("moon-cake");
var moonCakeSum = Number(moonCake.innerText);
moonCakeSum++;
moonCake.innerText = moonCakeSum;
if (moonCakeSum == 9) {
var msg = "恭喜你解锁了所有月饼！获得了胜利！";
console.log(msg);
setTimeout(function () {
alert(msg);
}, 300);
}
}
</script>
<style>
.btn {
cursor: pointer;
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color 0.1s ease;
}
.btn:hover {
background: #357ebd;
}
.v-game {
margin: 0 auto;
/* left: 30%; */
width: 500px;
}
.v-game-div {
display: flex;
}
.v-img {
background-color: #ccc;
margin: 5px;
height: 145px;
width: 30%;
}
.v-img img {
-webkit-user-drag: none;
opacity: 0;
border: 1px solid #ccc;
/* margin: 5px; */
width: 100%;
height: 100%;
float: left;
box-sizing: border-box;
padding: 10px;
cursor: pointer;
}
.v-body {
margin-top: 10px;
display: inline-block;
}
body {
align-items: center;
text-align: center;
justify-content: center;
/* min-height: 100vh; */
/* background: linear-gradient(-135deg, #c850c0, #4158d0); */
}
.v-detail {
font-size: small;
color: #aaa;
}
</style>
</html>
三、仓库地址与体验地址
这里代码片段展示（注：手机端有部分关卡无法获得月饼 ~ ）点击右上角可直达码上掘金!查看更完整的代码！
代码片段 目前，码上掘金无法 alter()方法失效的，功能不全~
大家可以直接来笔者的网站来体验
在线体验（pc端）：体验传送门
仓库地址：暂无（想要的可以直接去扒笔者的网站传送门 ）
文章小尾巴
文章写作、模板、文章小尾巴可参考：《写作“小心思”》
感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是南方者，一个热爱计算机更热爱祖国的南方人。
（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
