專案體驗地址
免費視頻教程
游戲介紹
幸運水果機是一款街機游戲，游戲界面由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
<body>
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>桔子</li>
<li>蘋果</li>
<li>香蕉</li>
<li>桔子</li>
</ul>
</body>
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
border: 1px solid red;
height: 500px;
padding: 0;
position: relative;
}
li{
border: 1px solid red;
list-style: none;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
top: 20px;
left: 50px;
}
</style>
</head>
<body>
<ul>
<li>蘋果</li>
</ul>
</body>
</html>
運行效果
2.3 內部樣式
demo3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
/*border: 1px solid red;*/
position: relative;
height: 500px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 50px;
position: absolute;
}
</style>
</head>
<body>
<ul>
<li style="left:0px;top:0px;">蘋果</li>
<li style="left:50px;top:0px;">蘋果</li>
<li style="left:100px;top:0px;">蘋果</li>
<li style="left:150px;top:0px;">蘋果</li>
<li style="left:200px;top:0px;">蘋果</li>
<li style="left:250px;top:0px;">蘋果</li>
<li style="left:300px;top:0px;">蘋果</li>
<li style="left:300px;top:50px;">蘋果</li>
<li style="left:300px;top:100px;">蘋果</li>
<li style="left:300px;top:150px;">蘋果</li>
<li style="left:300px;top:200px;">蘋果</li>
<li style="left:300px;top:250px;">蘋果</li>
<li style="left:300px;top:300px;">蘋果</li>
<li style="left:250px;top:300px;">蘋果</li>
<li style="left:200px;top:300px;">蘋果</li>
<li style="left:150px;top:300px;">蘋果</li>
<li style="left:100px;top:300px;">蘋果</li>
<li style="left:50px;top:300px;">蘋果</li>
<li style="left:0px;top:300px;">蘋果</li>
<li style="left:0px;top:250px;">蘋果</li>
<li style="left:0px;top:200px;">蘋果</li>
<li style="left:0px;top:150px;">蘋果</li>
<li style="left:0px;top:100px;">蘋果</li>
<li style="left:0px;top:50px;">蘋果</li>
</ul>
</body>
</html>
效果：
2.4 背景圖片
demo4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
width: 50px;
height: 50px;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 50px;
/* position: absolute; */
/*background-image: url("images/77.png");*/
background-size: contain;
/*left:0px;*/
/*top:0px;*/
}
</style>
</head>
<body>
<ul>
<li style="background-image: url('images/77.png')"></li>
</ul>
</body>
</html>
效果：
2.5 綜合在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
/*border: 1px solid red;*/
position: relative;
height: 500px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
list-style: none;
text-align: center;
line-height: 50px;
position: absolute;
background-size: contain;
/*left:0px;*/
/*top:0px;*/
}
</style>
</head>
<body>
<ul>
<li style="left:0px;top:0px;background-image: url('images/orange.png');"></li>
<li style="left:50px;top:0px;background-image: url('images/alarm.png');"></li>
<li style="left:100px;top:0px;background-image: url('images/s_bar.png');"></li>
<li style="left:150px;top:0px;background-image: url('images/bar.png');"></li>
<li style="left:200px;top:0px;background-image: url('images/apple.png');"></li>
<li style="left:250px;top:0px;background-image: url('images/s_apple.png');"></li>
<li style="left:300px;top:0px;background-image: url('images/coconut.png');"></li>
<li style="left:300px;top:50px;background-image: url('images/watermelons.png');"></li>
<li style="left:300px;top:100px;background-image: url('images/s_watermelons.png');"></li>
<li style="left:300px;top:150px;background-image: url('images/cha.png');"></li>
<li style="left:300px;top:200px;background-image: url('images/apple.png');"></li>
<li style="left:300px;top:250px;background-image: url('images/s_orange.png');"></li>
<li style="left:300px;top:300px;background-image: url('images/orange.png');"></li>
<li style="left:250px;top:300px;background-image: url('images/alarm.png');"></li>
<li style="left:200px;top:300px;background-image: url('images/s_77.png');"></li>
<li style="left:150px;top:300px;background-image: url('images/77.png');"></li>
<li style="left:100px;top:300px;background-image: url('images/apple.png');"></li>
<li style="left:50px;top:300px;background-image: url('images/s_coconut.png');"></li>
<li style="left:0px;top:300px;background-image: url('images/coconut.png');"></li>
<li style="left:0px;top:250px;background-image: url('images/star.png');"></li>
<li style="left:0px;top:200px;background-image: url('images/s_star.png');"></li>
<li style="left:0px;top:150px;background-image: url('images/cha.png');"></li>
<li style="left:0px;top:100px;background-image: url('images/apple.png');"></li>
<li style="left:0px;top:50px;background-image: url('images/s_alarm.png');"></li>
</ul>
</body>
</html>
最終效果：
3. 使用原生JS動態生成水果機輪盤
3.1 JS動態創建HTML元素
分2步：
1.創建元素（document.createElement）
2.添加元素（appendChild）
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">這是一個段落，</p>
<p id="p2">這是另一個段落，</p>
</div>
<script>
let para = document.createElement("p");
para.innerText = "這是新段落，";
let element = document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
再看一個例子
<!DOCTYPE html>
<html>
<body>
<div id="div1">
</div>
<script>
let ul = document.createElement('ul')
let div = document.getElementById('div1')
for (let i = 0; i < 3; i++){
let li = document.createElement('li')
li.innerText = i;
ul.appendChild(li)
}
div.appendChild(ul)
</script>
</body>
</html>
3.2 JS控制元素樣式
style屬性
html檔案中的每一個元素都是一個物件,檔案的每個元素都有一個屬性style，使用JS，通過物件的style屬性可以設定元素的任意css樣式，看一個例子：
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="content">helloworld</p>
</div>
<script>
let p = document.querySelector('p')
p.style.color = 'red'
p.style.fontSize = '30px'
</script>
</body>
</html>
3.3 認識JSON
JSON（JavaScriptObject Notation）、采用完全獨立于編程語言的文本格式來存盤和表示資料，
1、物件
物件是一個無序的“‘名稱/值’對”集合，一個物件以“{”（左括號）開始，“}”（右括號）結束，每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’ 對”之間使用“,”（逗號）分隔，
var person = { "name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing" }};
2.陣列
var students =
[
{"sno":"001","name":"jack","age":130},
{"sno":"002","name":"tame","age":120},
{"sno":"003","name":"cule","age":110}
];
看一個例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>json</title>
<script>
var imgData=https://www.cnblogs.com/songboriceboy/p/{ "name":"圖片描述和圖片相對路徑", "title":"logo圖片","url":"logo.png" };
console.log( imgData.name );
console.log( imgData["name"] );
var json1={"name":"這里是一組圖片的文字描述和圖片相對路徑",
"title":["logo圖片","圖片1","圖片2","圖片3"],
"url":["logo.png","1.png","2.png","3.png"]
};
console.log( json1.name);
console.log( json1.url );
console.log( json1.url[1] );
var json2 ={ "name":"圖片描述和圖片相對路徑",
"imgData":[
{ "name":"圖片1", "title":"logo圖片1","url":"logo1.png" } ,
{ "name":"圖片2", "title":"logo圖片2","url":"logo2.png" } ,
{ "name":"圖片3", "title":"logo圖片3","url":"logo3.png" }
]
};
console.log( json2.name );
console.log( json2.imgData[0].name );
</script>
<body>