從零開始手把手教你使用HTML+CSS+Javascript實現水果機賭幣遊戲

遊戲介紹

幸運水果機是一款街機遊戲，遊戲介面由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

蘋果
香蕉
桔子
蘋果
香蕉
桔子

li{ border： 1px solid red； list-style： none； width： 50px； height： 50px； text-align： center； line-height： 50px； }

執行效果

可以看到每個li獨佔一行，因為li是塊級元素，必須使li脫離標準文件流，才能水平排布。

標準文件流

標準文件流：是指頁面上從上到下，從左到右，網頁元素一個挨一個的簡單的正常的佈局方式。一般在HTML元素分為兩種：塊級元素和行內元素。像div，p，ul，li這些的元素屬於塊級元素，塊級元素是從上到下一行一行的排列；預設一個塊級元素會佔用一行，而跟在後面的元素會另起一行排列；行內元素是在一行中水平佈置，從左到右的排列；span，strong，a等屬於行內元素。

2。2 絕對定位VS相對定位

demo2。html程式碼：

<！DOCTYPE html> Document