从零开始手把手教你使用原生JS+CSS3实现老虎水果机游戏 .pdfVIP

从零开始⼿把⼿教你使⽤原⽣JS+CSS3实现⽼虎⽔果机游戏

本教程完整⽬录

image.png

项⽬体验地址

免费视频教程

游戏介绍

幸运⽔果机是⼀款街机游戏，游戏界⾯由24个⽅格拼接成⼀个正⽅形，每个⽅格中都有⼀个不同的⽔果图形，⽅格下都有⼀个⼩灯。玩家使⽤游

戏币选择希望押注的⽬标，按下开始后，⼩灯开始绕着正⽅形中每个格⼦转。当⼩灯停下时，如果停在玩家押注的⽬标上则可赢取相应的游戏币。

物品：游戏中的物品有⼋种，分别为：苹果、西⽠、⽊⽠、橙⼦、铃铛、77、双星，这些物品⼜分为⼤⼩两种。还有BAR图标，分为2种。

赔率：以下为所有固定赔率物品的赔率。·所有其他⼩的物品（⼩77、⼩星星、⼩西⽠、⼩铃铛、⼩⽊⽠、⼩橙⼦）1：2

苹果1：5·橙⼦1：10·⽊⽠1：15·铃铛1：20·西⽠1：20·双星1：30·771：40·⼩BAR1：25·中BAR1：50·⼤BAR1：

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插件LiveServer

image.png

2.⽔果机轮盘界⾯设计

2.1轮盘界⾯设计之基本⽅格

demo1.html

body

ul

li苹果/li

li⾹蕉/li

li桔⼦/li

li苹果/li

li⾹蕉/li

li桔⼦/li

/ul

/body

li{

border:1pxsolidred;

list-style:none;

width:50px;

height:50px;

text-align:center;

line-height:50px;

}

运⾏效果

image.png

可以看到每个li独占⼀⾏，因为li是块级元素，必须使li脱离标准⽂档流，才能⽔平排布。

标准⽂档流

标准⽂档流:是指页⾯上从上到下,从左到右,⽹页元素⼀个挨⼀个的简单的正常的布局⽅式。

⼀般在HTML元素分为两种：块级元素和⾏内元素。像div,p,ul,li这些的元素属于块级元素，块级元素是从上到下⼀⾏⼀⾏的排列；默认⼀个块级元

素会占⽤⼀⾏，⽽跟在后⾯的元素会另起⼀⾏排列；

⾏内元素是在⼀⾏中⽔平布置，从左到右的排列；span,strong,a等属于⾏内元素。

2.2绝对定位相对定位

VS

demo2.html代码：

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

titleDocu