大家好,今天乐乐子来为大家解答以下的问题,关于水果游戏机下载,水果游戏机厂家这个很多人还不知道,现在让我们一起来看看吧!
游戏介绍
幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯。玩家使用游戏币选择希望押注的目标,按下开始后,小灯开始绕着正方形中每个格子转。当小灯停下时,如果停在玩家押注的目标上则可赢取相应的游戏币。 物品:游戏中的物品有八种,分别为:苹果、西瓜、木瓜、橙子、铃铛、77、双星,这些物品又分为大小两种。还有BAR图标,分为2种。 赔率:以下为所有固定赔率物品的赔率。·所有其他小的物品(小77、小星星、小西瓜、小铃铛、小木瓜、小橙子) 1:2 苹果 1:5·橙子 1:10·木瓜 1:15·铃铛 1:20·西瓜 1:20·双星 1:30·77 1:40·小BAR 1:25·中BAR 1:50·大BAR 1:100 当玩家中奖之后,玩家点击“开始”按钮为收分,再次点击“开始”按钮为按照上一次押注再次进行游戏。如果玩家要重新押注,在押注物品上直接押注即可。在押注的同时会将中奖的金额收入“当前余额”区中。 如果玩家没有中奖,则玩家点击“开始”按钮为按照上一次押注再次进行游戏。
课程目标
我们使用原生JS+CSS3,来开发一个集趣味性与技术性于一体的H5小游戏,项目使用到了以下知识点:
- CSS:盒子模型,定位,浮动,CSS3的Flex弹性盒模型,图片背景,CSS3选择器...
- JS:json,map,定时器,随机数,dom操作,模板字符串...
读者对象
学习本课程的同学,了解一点HTML/CSS/JS基础知识即可,我们会就地讲解项目中用到的css,js基础知识点,先举一些小的示例,来阐明知识点的用法,再说明如何在本项目中应用,应用在哪块功能的实现上。比如标准文档流,定位,浮动,盒子模型,CSS3弹性盒子,CSS3高级选择器,背景图片,json,map,定时器,随机数,dom操作,模板字符串,是综合运用前端基础知识的当前互联网上少见优秀综合案例。
水果老虎机之原生js实现
1. 安装vscode插件Live Server
2. 水果机轮盘界面设计
2.1 轮盘界面设计之基本方格
demo1.html
u0026lt;bodyu0026gt; u0026nbsp;u0026lt;ulu0026gt; u0026nbsp; u0026nbsp;u0026lt;liu0026gt;苹果u0026lt;/liu0026gt; u0026nbsp; u0026nbsp;u0026lt;liu0026gt;香蕉u0026lt;/liu0026gt; u0026nbsp; u0026nbsp;u0026lt;liu0026gt;桔子u0026lt;/liu0026gt; u0026nbsp; u0026nbsp;u0026lt;liu0026gt;苹果u0026lt;/liu0026gt; u0026nbsp; u0026nbsp;u0026lt;liu0026gt;香蕉u0026lt;/liu0026gt; u0026nbsp; u0026nbsp;u0026lt;liu0026gt;桔子u0026lt;/liu0026gt; u0026nbsp;u0026lt;/ulu0026gt;u0026lt;/bodyu0026gt;
u0026nbsp; u0026nbsp;li{ u0026nbsp; u0026nbsp; u0026nbsp;border: 1px solid red; u0026nbsp; u0026nbsp; u0026nbsp;list-style: none; u0026nbsp; u0026nbsp; u0026nbsp;width: 50px; u0026nbsp; u0026nbsp; u0026nbsp;height: 50px; u0026nbsp; u0026nbsp; u0026nbsp;text-align: center; u0026nbsp; u0026nbsp; u0026nbsp;line-height: 50px; u0026nbsp; }
运行效果
可以看到每个li独占一行,因为li是块级元素,必须使li脱离标准文档流,才能水平排布。 标准文档流 标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。 一般在HTML元素分为两种:块级元素和行内元素。像figure,p,ul,li这些的元素属于块级元素,块级元素是从上到下一行一行的排列;默认一个块级元素会占用一行,而跟在后面的元素会另起一行排列; 行内元素是在一行中水平布置,从左到右的排列;span,strong,a等属于行内元素。
2.2 绝对定位VS相对定位
demo2.html代码:
u0026lt;!DOCTYPE htmlu0026gt;u0026lt;html lang="en"u0026gt;u0026lt;headu0026gt; u0026lt;meta charset="UTF-8"u0026gt; u0026lt;meta name="viewport" content="width=device-width, initial-scale=1.0"u0026gt; u0026lt;titleu0026gt;Documentu0026lt;/titleu0026gt; u0026lt;styleu0026gt; u0026nbsp; ul{ u0026nbsp; u0026nbsp; border: 1px solid red; u0026nbsp; u0026nbsp; height: 500px; u0026nbsp; u0026nbsp; padding: 0; u0026nbsp; u0026nbsp; position: relative; u0026nbsp; } u0026nbsp; li{ u0026nbsp; u0026nbsp; border: 1px solid red; u0026nbsp; u0026nbsp; list-style: none; u0026nbsp; u0026nbsp; width: 50px; u0026nbsp; u0026nbsp; height: 50px; u0026nbsp; u0026nbsp; text-align: center; u0026nbsp; u0026nbsp; line-height: 50px; u0026nbsp; u0026nbsp; position: absolute; u0026nbsp; u0026nbsp; top: 20px; u0026nbsp; u0026nbsp; left: 50px; u0026nbsp; } u0026lt;/styleu0026gt;u0026lt;/headu0026gt;u0026lt;bodyu0026gt; u0026lt;ulu0026gt; u0026nbsp; u0026lt;liu0026gt;苹果u0026lt;/liu0026gt; u0026lt;/ulu0026gt;u0026lt;/bodyu0026gt;u0026lt;/htmlu0026gt;
运行效果
2.3 内部样式
demo3.html
u0026lt;!DOCTYPE htmlu0026gt;u0026lt;html lang="en"u0026gt;u0026lt;headu0026gt; u0026nbsp; u0026lt;meta charset="UTF-8"u0026gt; u0026nbsp; u0026lt;titleu0026gt;Titleu0026lt;/titleu0026gt; u0026nbsp; u0026lt;styleu0026gt; u0026nbsp; u0026nbsp; u0026nbsp; ul{ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; /*border: 1px solid red;*/ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; position: relative; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; height: 500px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; width: 500px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; margin-left: auto; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; margin-right: auto; u0026nbsp; u0026nbsp; u0026nbsp; } u0026nbsp; u0026nbsp; u0026nbsp; li{ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; width: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; height: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; border: 1px solid red; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; list-style: none; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; text-align: center; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; line-height: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; position: absolute;• u0026nbsp; u0026nbsp; u0026nbsp; } u0026nbsp; u0026lt;/styleu0026gt;u0026lt;/headu0026gt;u0026lt;bodyu0026gt;u0026lt;ulu0026gt; u0026lt;li style="left:0px;top:0px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:50px;top:0px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:100px;top:0px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:150px;top:0px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:200px;top:0px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:250px;top:0px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:300px;top:0px;"u0026gt;苹果u0026lt;/liu0026gt;• u0026lt;li style="left:300px;top:50px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:300px;top:100px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:300px;top:150px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:300px;top:200px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:300px;top:250px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:300px;top:300px;"u0026gt;苹果u0026lt;/liu0026gt;• u0026lt;li style="left:250px;top:300px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:200px;top:300px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:150px;top:300px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:100px;top:300px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:50px;top:300px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:0px;top:300px;"u0026gt;苹果u0026lt;/liu0026gt;•• u0026lt;li style="left:0px;top:250px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:0px;top:200px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:0px;top:150px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:0px;top:100px;"u0026gt;苹果u0026lt;/liu0026gt; u0026lt;li style="left:0px;top:50px;"u0026gt;苹果u0026lt;/liu0026gt;•u0026lt;/ulu0026gt;u0026lt;/bodyu0026gt;u0026lt;/htmlu0026gt;
效果:
2.4 背景图片
demo4.html
u0026lt;!DOCTYPE htmlu0026gt;u0026lt;html lang="en"u0026gt;u0026lt;headu0026gt; u0026nbsp; u0026lt;meta charset="UTF-8"u0026gt; u0026nbsp; u0026lt;titleu0026gt;Titleu0026lt;/titleu0026gt; u0026nbsp; u0026lt;styleu0026gt; u0026nbsp; u0026nbsp; u0026nbsp; li{ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; width: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; height: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; border: 1px solid red; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; list-style: none; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; text-align: center; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; line-height: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; /* position: absolute; */ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; /*background-image: url("images/77.png");*/ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; background-size: contain; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; /*left:0px;*/ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; /*top:0px;*/ u0026nbsp; u0026nbsp; u0026nbsp; } u0026nbsp; u0026lt;/styleu0026gt;u0026lt;/headu0026gt;u0026lt;bodyu0026gt;u0026lt;ulu0026gt; u0026nbsp; u0026lt;li style="background-image: url(u0026#39;images/77.pngu0026#39;)"u0026gt;u0026lt;/liu0026gt;u0026lt;/ulu0026gt;u0026lt;/bodyu0026gt;u0026lt;/htmlu0026gt;
效果:
2.5 综合在一起
u0026lt;!DOCTYPE htmlu0026gt;u0026lt;html lang="en"u0026gt;u0026lt;headu0026gt; u0026nbsp; u0026lt;meta charset="UTF-8"u0026gt; u0026nbsp; u0026lt;titleu0026gt;Titleu0026lt;/titleu0026gt; u0026nbsp; u0026lt;styleu0026gt; u0026nbsp; u0026nbsp; u0026nbsp; ul{ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; /*border: 1px solid red;*/ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; position: relative; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; height: 500px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; width: 500px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; margin-left: auto; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; margin-right: auto; u0026nbsp; u0026nbsp; u0026nbsp; } u0026nbsp; u0026nbsp; u0026nbsp; li{ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; width: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; height: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; border: 1px solid red; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; list-style: none; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; text-align: center; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; line-height: 50px; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; position: absolute; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; background-size: contain; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; /*left:0px;*/ u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; u0026nbsp; /*top:0px;*/ u0026nbsp; u0026nbsp; u0026nbsp; } u0026nbsp; u0026lt;/styleu0026gt;u0026lt;/headu0026gt;u0026lt;bodyu0026gt;u0026lt;ulu0026gt; u0026nbsp; u0026lt;li style="left:0px;top:0px;background-image: url(u0026#39;images/orange.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:50px;top:0px;background-image: url(u0026#39;images/alarm.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:100px;top:0px;background-image: url(u0026#39;images/s_bar.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:150px;top:0px;background-image: url(u0026#39;images/bar.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:200px;top:0px;background-image: url(u0026#39;images/apple.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:250px;top:0px;background-image: url(u0026#39;images/s_apple.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:300px;top:0px;background-image: url(u0026#39;images/coconut.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt;• u0026nbsp; u0026lt;li style="left:300px;top:50px;background-image: url(u0026#39;images/watermelons.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:300px;top:100px;background-image: url(u0026#39;images/s_watermelons.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:300px;top:150px;background-image: url(u0026#39;images/cha.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:300px;top:200px;background-image: url(u0026#39;images/apple.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:300px;top:250px;background-image: url(u0026#39;images/s_orange.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:300px;top:300px;background-image: url(u0026#39;images/orange.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt;• u0026nbsp; u0026lt;li style="left:250px;top:300px;background-image: url(u0026#39;images/alarm.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:200px;top:300px;background-image: url(u0026#39;images/s_77.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:150px;top:300px;background-image: url(u0026#39;images/77.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:100px;top:300px;background-image: url(u0026#39;images/apple.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:50px;top:300px;background-image: url(u0026#39;images/s_coconut.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:0px;top:300px;background-image: url(u0026#39;images/coconut.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt;• u0026nbsp; u0026lt;li style="left:0px;top:250px;background-image: url(u0026#39;images/star.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:0px;top:200px;background-image: url(u0026#39;images/s_star.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:0px;top:150px;background-image: url(u0026#39;images/cha.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:0px;top:100px;background-image: url(u0026#39;images/apple.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt; u0026nbsp; u0026lt;li style="left:0px;top:50px;background-image: url(u0026#39;images/s_alarm.pngu0026#39;);"u0026gt;u0026lt;/liu0026gt;•u0026lt;/ulu0026gt;u0026lt;/bodyu0026gt;u0026lt;/htmlu0026gt;
最终效果:
搜索
本文到此结束,希望对大家有所帮助。