利用原生JS写成小游戏——欢乐水果机

2023-12-18 18:59
文章标签 js 小游戏 原生 写成 欢乐 水果机

本文主要是介绍利用原生JS写成小游戏——欢乐水果机，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

利用原生JS写成小游戏——欢乐水果机

简介：
玩家点击某个押注物品则在该物品上下注。点击开始则游戏开始，如果没有下注则不能开始游戏。
游戏中的物品有八中，分别为：苹果、西瓜、柠檬、橙子、铃铛、77、双星、BAR。
在放行游戏区左右方为押注区，每种物品下方有加减号按钮，每次点
击加号增加一个筹码注金，反之减号就减少一个筹码注金
开始： 开始键
奖励：GOOD LUCK
由于这个时低配版的，我就没有按照原版的写进去，就是中了GOOD LUCK直接获得15分。
出于好耍，本人想起了小时候玩过的水果机，js也学了一会儿了，就想用它写一个简单的水果机玩玩，废话不多说，直接上代码，只有js有注释，html和css就没有注释了。
这是样式图
在这里插入图片描述

这里是html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Fruit</title><link rel="stylesheet" href="Fruit.css"><script src="Fruit.js"></script>
</head>
<body>
<div id="content"><h2>欢乐水果机</h2><div class="box"><div class="top"><div><a href="javascript:;"><img src="imgs/orange.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/ld.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/25.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/50.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/apple.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/apple2.png" alt=""></a></div></div><div class="right"><div><a href="javascript:;"><img src="imgs/lemon.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/watermelon.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/watermelon2.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/right.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/apple.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/orange2.png" alt=""></a></div></div><div class="bottom"><div><a href="javascript:;"><img src="imgs/orange.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/ld.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/seven2.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/seven.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/apple.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/lemon2.png" alt=""></a></div></div><div class="left"><div><a href="javascript:;"><img src="imgs/lemon.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/star.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/star2.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/left.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/apple.png" alt=""></a></div><div><a href="javascript:;"><img src="imgs/ld2.png" alt=""></a></div></div><button class="begin">开始</button><div class="stake"><div class="stake_left"><div><img src="imgs/apple.png" alt=""><button class="minus">-</button><span>0</span><button class="add">+</button></div><div><img src="imgs/orange.png" alt=""><button class="minus">-</button><span>0</span><button class="add">+</button></div><div><img src="imgs/lemon.png" alt=""><button class="minus">-</button><span>0</span><button class="add">+</button></div><div><img src="imgs/ld2.png" alt=""><button class="minus">-</button><span>0</span><button class="add">+</button></div></div><div class="stake_right"><div><img src="imgs/watermelon.png" alt=""><button class="minus">-</button><span>0</span><button class="add">+</button></div><div><img src="imgs/star.png" alt=""><button class="minus">-</button><span>0</span><button class="add">+</button></div><div><img src="imgs/seven.png" alt=""><button class="minus">-</button><span>0</span><button class="add">+</button></div><div><img src="imgs/50.png" alt=""><button class="minus">-</button><span>0</span><button class="add">+</button></div></div></div><span id="move"></span><span id="getScore">中将金额<p>0</p></span><span id="allScore">当前余额<p>0</p></span><button id="change">充值￥100</button></div>
</div>
</body>
</html>

加上一点简单的css布局

* {margin: 0;padding: 0;list-style: none;text-decoration: none;
}img {display: block;
}#content {width: 1200px;height: 1200px;margin: 0 auto;text-align: center;
}.box {width: 1000px;height: 100%;margin: 0 auto;background-color: blue;position: relative;
}
.top{width: 600px;height: 100px;display: flex;position: absolute;top: 50px;left: 150px;
}
.right{width: 100px;height: 600px;position: absolute;top: 50px;right: 150px;
}
.bottom{width: 600px;height: 100px;display: flex;flex-direction: row-reverse;position: absolute;top: 650px;right: 150px;
}
.left{width: 100px;height: 600px;display: flex;flex-flow: column-reverse;position: absolute;top: 150px;left: 150px;
}
.stake>div>div{width: 100px;height: 150px;font-size: 20px;
}
.stake>div>div>img{border: 1px solid black;
}
.stake>div>div>button{width: 30px;height: 30px;font-size: 25px;background-color: #fff3fc;border: 1px solid black;
}
.stake_left{position: absolute;top: 100px;left: 25px;
}
.stake_right{position: absolute;top: 100px;right: 25px;
}
#move{display: block;width: 98px;height: 98px;border: 2px solid purple;position: absolute;top: 50px;left: 150px;
}
#getScore{display: block;width: 200px;height: 50px;font-size: 35px;position: absolute;top: 200px;left: 290px;
}
#getScore>p{display: block;width: 200px;height: 50px;border: 2px solid yellow;
}
#allScore{display: block;width: 200px;height: 50px;font-size: 35px;position: absolute;top: 200px;right: 290px;
}
#allScore>p{display: block;width: 200px;height: 50px;border: 2px solid yellow;
}
.begin{width: 120px;height: 30px;position: absolute;top: 700px;right: 15px;background-color: pink;
}
#change{width: 120px;height: 30px;position: absolute;top: 25px;right: 15px;
}

最后是js部分

window.addEventListener('load', function (ev) {//获取使用元素var begin = document.querySelector('.begin');var move = document.querySelector('#move');var getScore = document.querySelector('#getScore>p');var allScore = document.querySelector('#allScore>p');var change = document.querySelector('#change');var pours = document.querySelectorAll('.stake span');var add = document.querySelectorAll('.stake .add');var minus = document.querySelectorAll('.stake .minus');var timer = null;       //定义两个空对象nullvar time = null;var flag = null;        //定义一个flag，以此来判断是否下注var Score = 0;          //Score为当前余额//开始按钮点击事件begin.addEventListener('click', function (evt) {//每次点击开始的时候都从第一个开始move.style.left = 150 + 'px';move.style.top = 50 + 'px';clickMove(Score);   //调用开始按钮的点击事件函数});//开始按钮的点击事件函数function clickMove(score) {//判断flag的值，for循环判断每一个水果是否有下注，如果都为下注，flag为false；//反之有任意一个水果有下注，flag都为true；for (var i = 0; i < pours.length; i++) {//先判断flag的值，再调用函数判断每个水果是否下注if (flag) {break;}decide_pour(pours[i]);}//点击开始按钮的条件if (score === 0) {//先判断是否有余额alert('您的余额已不足，请充值后再开始！');} else if (!flag) {//再判断flag的值，flag为false执行当前代码。alert('您未下注，请下注后再开始！');} else {//如果上诉都满足了，则可以执行开始按钮clearInterval(timer);   //定时器先清后设。var randNum = Math.ceil(Math.random() * 200) * 24; //定义一个0-4800的随机整数var scoreNum = Math.floor(randNum / 20 % 24 + 1);   //利用上随机数来获得移动过后得到的水果的索引号timer = setInterval(function () {       //定时器使得可以让move盒子移动起来var moveLeft = move.offsetLeft;var moveTop = move.offsetTop;if (moveTop === 50 && moveLeft <= 650) {move.style.left = moveLeft + 100 + 'px';} else if (moveLeft >= 650 && moveTop >= 50 && moveTop <= 550) {move.style.top = moveTop + 100 + 'px';} else if (moveTop >= 650 && moveLeft <= 750 && moveLeft >= 250) {move.style.left = moveLeft - 100 + 'px';} else if (moveLeft <= 150 && moveTop <= 750 && moveTop > 50) {move.style.top = moveTop - 100 + 'px';}}, 20);begin.disabled = true;                      //move盒子停止移动后才能再次点击开始按钮for (var i = 0; i < add.length; i++) {      //利用for循环使得每个下注按钮和取消下注按钮开始之后就不能被点击add[i].disabled = true;                 // move盒子停止移动后才能再次点击下注和取消下注按钮minus[i].disabled = true;}time = setTimeout(function () {     //结束的判断clearInterval(timer);                    //当到达指定的随机数时间后，清除定时器timer，move盒子停止运动setTimeout(function () {switch (scoreNum) {case 5:case 11:case 17:case 23:score = reward(1) * 5;getScore.innerText = score;sum(score);break;case 6:score = reward(1) * 10;getScore.innerText = score;sum(score);break;case 1:case 13:score = reward(2) * 10;getScore.innerText = score;sum(score);break;case 12:score = reward(2) * 20;getScore.innerText = score;sum(score);break;case 7:case 19:score = reward(3) * 10;getScore.innerText = score;sum(score);break;case 18:score = reward(3) * 20;getScore.innerText = score;sum(score);break;case 2:case 14:score = reward(4) * 10;getScore.innerText = score;sum(score);break;case 24:score = reward(4) * 20;getScore.innerText = score;sum(score);break;case 8:score = reward(5) * 20;getScore.innerText = score;sum(score);break;case 9:score = reward(5) * 40;getScore.innerText = score;sum(score);break;case 20:score = reward(6) * 20;getScore.innerText = score;sum(score);break;case 21:score = reward(6) * 40;getScore.innerText = score;sum(score);break;case 16:score = reward(7) * 20;getScore.innerText = score;sum(score);break;case 15:score = reward(7) * 40;getScore.innerText = score;sum(score);break;case 10:case 22:score = 15;sum(score);break;case 3:score = reward(8) * 25;getScore.innerText = score;sum(score);break;case 4:score = reward(8) * 50;getScore.innerText = score;sum(score);break;}              //当停止运动后，算出当前获得的分数，并加在当前余额上for (var i = 0; i < add.length; i++) {  //利用for循环对上一次下注的清零，然后下注和取消下注停止禁用add[i].previousElementSibling.innerText = 0;add[i].disabled = false;minus[i].disabled = false;}begin.disabled = false;               //开始按钮停止禁用score = 0;                            //获得的分数清零}, 500);                         //当move盒子停止运动后，0.5s后执行定时器time里的定时器flag = false;                             //当move盒子停止运动后，flag的值重新变为false}, randNum);                                   //利用上面定义的随机数来控制盒子的随机运动}}//充值按钮，每点击一次，当前余额增加100change.addEventListener('click', function (evt) {allScore.innerText = Score += 100;//console.log(Score);Score = allScore.innerText - 0;     //string强制转换为number});//下注按钮for (var i = 0; i < add.length; i++) {decide_minus();         //调用函数判断取消下注是否可以点击，每点击一次下注和取消下注都要判断取消下注按钮是否可以点击//给每个下注按钮绑定点击事件add[i].addEventListener('click', function (evt) {//判断有无余额if (Score <= 0) {alert('您的余额已不足，请充值后再下注');} else {this.previousElementSibling.innerText++;decide_minus();Score--;allScore.innerText = Score;}});minus[i].addEventListener('click', function (evt) {this.nextElementSibling.innerText--;decide_minus();Score++;allScore.innerText = Score;});}//判断是否下注函数function decide_pour(obj) {var nums = obj.innerText - 0;nums !== 0 ? flag = true : flag = false;}//判断是否可以点击取消下注按钮，当未下注时，不能点击取消下注按钮function decide_minus() {for (var i = 0; i < add.length; i++) {pours[i].innerText - 0 <= 0 ? pours[i].previousElementSibling.disabled = true : pours[i].previousElementSibling.disabled = false}}//返回当前move盒子停在的水果的下注次数function reward(number) {return pours[number-1].innerText - 0;}//获得的分数加在当前余额上function sum(score) {allScore.innerText = Score += score;}
});

到此结束，基本功能都能实现，如果有看不懂的地方或者游戏什么bug，都可以私信我或者评论；读者想要图片素材也可以直接私信我，把邮箱给我我打包发给你（我也是第一次写博客，有点激动233333）想提醒一句，别拿去和别人赌博，因为这个概率都是相同的，一般只有庄家会输，玩玩儿就可以了。

这篇关于利用原生JS写成小游戏——欢乐水果机的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/509453。

相关文章

Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
mac安装nvm(node.js)多版本管理实践步骤

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》：本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
JS 实现复制到剪贴板的几种方式小结

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点：缺点：
阅读更多...
Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2