Teach you how to use native JS+CSS3 to realize lucky fruit machine game from scratch

Project experience address
Free video tutorial

Introduction to the game

Lucky fruit machine is an arcade game. The game interface is made up of 24 squares, each of which has a different fruit figure and a small lamp. Players use the game currency to select the target they want to bet on. When they press the start button, the small lamp starts to rotate around each grid in the square. When the light stops, you can win the corresponding game currency if you stop at the target you are betting on.

Items: there are eight kinds of items in the game, namely: apple, watermelon, papaya, orange, bell, 77, double star. These items are divided into two sizes. There are also BAR icons, which are divided into two types.

Odds: the following is the odds for all fixed odds items. ·All other small items (small 77, small star, small watermelon, small bell, small papaya, small orange) 1:2
Apple 1:5, orange 1:10, papaya 1:15, bell 1:20, watermelon 1:20, double star 1:30, 77 1:40, little BAR 1:25, middle BAR 1:50, big BAR 1:100

When the player wins the prize, the player clicks the "start" button to score, and then clicks the "start" button again to play the game again according to the last bet. If players want to bet again, they can bet directly on the items they are betting on. At the same time of betting, the winning amount will be included in the "current balance" area.

If the player does not win the prize, the player clicks the "start" button to play again according to the last bet.

Online experience

Course objectives

We use the native JS+CSS3 to develop an H5 small game integrating interest and technology. The following knowledge points are used in the project:

CSS: box model, positioning, floating, Flex elastic box model of CSS3, picture background, CSS3 selector
JS: json, map, timer, random number, dom operation, template string

Readers

Students of this course can learn a little basic knowledge of HTML/CSS/JS. We will explain the basic knowledge points of css and js used in the project in place. First, we will give some small examples to illustrate the usage of knowledge points, and then explain how to apply them in the project and which function to implement. For example, standard document flow, positioning, floating, box model, CSS3 elastic box, CSS3 advanced selector, background picture, json, map, timer, random number, dom operation, template string are rare and excellent comprehensive cases on the current Internet that comprehensively use the front-end basic knowledge.

Native js implementation of lucky fruit machine

1. Install vscode plug-in Live Server

2. Interface design of fruit machine wheel

2.1 basic grid of wheel disc interface design

demo1.html

<body> <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> </body>

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

Operation effect

You can see that each li is exclusive to one row. Because li is a block level element, you must separate li from the standard document flow to arrange it horizontally.

Standard document flow

Standard document flow: refers to the simple and normal layout of page elements one by one from top to bottom and left to right.

Generally, HTML elements are divided into two types: block level elements and inline elements. Elements such as div,p,ul,li belong to block level elements, and block level elements are arranged row by row from top to bottom. By default, one block level element will occupy one row, and the following elements will be arranged in another row;

Inline elements are arranged horizontally in a row, from left to right; span,strong,a, etc. belong to inline elements.

2.2 absolute positioning VS relative positioning

demo2.html Code:

<!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>Apple</li> </ul> </body> </html>

Operation effect

2.3 internal style

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;">Apple</li> <li style="left:50px;top:0px;">Apple</li> <li style="left:100px;top:0px;">Apple</li> <li style="left:150px;top:0px;">Apple</li> <li style="left:200px;top:0px;">Apple</li> <li style="left:250px;top:0px;">Apple</li> <li style="left:300px;top:0px;">Apple</li> <li style="left:300px;top:50px;">Apple</li> <li style="left:300px;top:100px;">Apple</li> <li style="left:300px;top:150px;">Apple</li> <li style="left:300px;top:200px;">Apple</li> <li style="left:300px;top:250px;">Apple</li> <li style="left:300px;top:300px;">Apple</li> <li style="left:250px;top:300px;">Apple</li> <li style="left:200px;top:300px;">Apple</li> <li style="left:150px;top:300px;">Apple</li> <li style="left:100px;top:300px;">Apple</li> <li style="left:50px;top:300px;">Apple</li> <li style="left:0px;top:300px;">Apple</li> <li style="left:0px;top:250px;">Apple</li> <li style="left:0px;top:200px;">Apple</li> <li style="left:0px;top:150px;">Apple</li> <li style="left:0px;top:100px;">Apple</li> <li style="left:0px;top:50px;">Apple</li> </ul> </body> </html>

effect:

2.4 background picture

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>

effect:

2.5 integration

<!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>

Final effect:

3. Use native JS to dynamically generate fruit machine wheel

3.1 JS dynamically creates HTML elements

There are two steps:
1. Create element( document.createElement )
2. Add element (appendChild)

<!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> let para = document.createElement("p"); para.innerText = "This is a new paragraph."; let element = document.getElementById("div1"); element.appendChild(para); </script> </body> </html>

Let's take another example

<!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 control element style

style attribute
Each element in an html document is an object, and each element of the document has an attribute style. Using JS, you can set any css style of an element through the style attribute of an object. See an example:

<!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 understanding JSON

JSON (JavaScript object notation), a text format completely independent of programming language, is used to store and represent data.
1. Object
Object is an unordered collection of name / value pairs. An object begins with '{' (left parenthesis) and ends with '}' (right parenthesis). Each name is followed by a ':' (colon); the ', (comma) is used to separate the' name / value 'pairs.

var person = { "name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing" }};

2. Array

var students = [ {"sno":"001","name":"jack","age":130}, {"sno":"002","name":"tame","age":120}, {"sno":"003","name":"cule","age":110} ];

Take an example:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>json</title> <script> var imgData={ "name":"Picture description and picture relative path", "title":"logo picture","url":"logo.png" }; console.log( imgData.name ); console.log( imgData["name"] ); var json1={"name":"Here is the text description and relative path of a group of pictures", "title":["logo picture","Picture 1","Picture 2","Picture 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":"Picture description and picture relative path", "imgData":[ { "name":"Picture 1", "title":"logo Picture 1","url":"logo1.png" } , { "name":"Picture 2", "title":"logo Picture 2","url":"logo2.png" } , { "name":"Picture 3", "title":"logo Picture 3","url":"logo3.png" } ] }; console.log( json2.name ); console.log( json2.imgData[0].name ); </script> </head> <body> </body> </html>

3.4 template string

var name = "Neo"; var occupation = "programmer"; //Do not use template string splicing var str1 = "He is " + name + ",he is a " + occupation; //Using template string splicing var str2 = `He is $,he is a $`; console.log(str1) console.log(str2)

3.5 integration

<!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> <script> window.onload = function () { var fruits = [ , , , , , , , , , , , , , , , , , , , , , , , ]; var ul = document.getElementById('machine'); for(var i = 0; i < fruits.length; i++) { //Dynamic creation of li elements var li = document.createElement('li'); li.style.left = fruits[i].left; li.style.top = fruits[i].top; li.style.backgroundImage = `url('images/$')`; ul.appendChild(li); } } </script> </head> <body> <ul id = 'machine'>                         </ul> </body> </html>

4. Let the running light run

4.1 two timers in JS

Periodic timer

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // setInterval(fun,time) // function hello() { // console.log('hello'); // } // setInterval(hello, 1000); // var timerID = setInterval(fun,time); / / the return value is the timer id // //Stop timer // clearInterval(timerID); var count = 1; window.onload = function () { var h2 = document.getElementById('count'); //Start timer var timerID = setInterval(function () { h2.innerHTML = count++; if(count == 11) { //Stop Timer clearInterval(timerID); } },1000); } </script> </head> <body> <h2 id="count"> 0 </h2> </body> </html>

2. One time timer

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var count = 1; var h2 = document.getElementById('count'); function counter() { h2.innerHTML = count++; if (count < 11) { setTimeout(counter, 1000) } } setTimeout(counter, 1000) } </script> </head> <body> <h2 id="count"> 0 </h2> </body> </html>

4.2 random number in JS

var num = Math.random();//Number between 0 and 1 [0,1) console.log(num); //Integer between 0-10 var num2 = num*10; var num3 = parseInt(5.69); console.log(num3); var num = parseInt(Math.random()*10); console.log(num); // An integer between 30 and 50 // Integer between 0 and 20 + 30 var num2 = parseInt(Math.random()*20) + 30; console.log(num2);

4.3 z-index attribute in CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ position: relative; } #one{ height: 100px; width: 100px; background-color: red ; position: absolute; left:0; top: 0; z-index: 10; } #two{ height: 80px; width: 80px; background-color: blue ; position: absolute; left:0; top: 0; z-index: 20; } </style> </head> <body> <div id="one"> </div> <div id="two"> </div> </body> </html>

4.4 integration

html

<body> <ul id = 'machine'> <div id="active"> </div> </ul> <div id="footer"> <div id="msg"></div> <button id="btn">start</button> </div> </body>

css

<style> #footer{ width: 500px; margin: 0px auto; } #active { width: 50px; height: 50px; position: absolute; background-color: rgba(255,0,0,0.4); z-index: 1000; left:0; top: 0; display: none; } 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>

<script> window.onload = function () { //Binding event handler to start button var index = 0;//Which subscript fruit should active div coincide with var btn = document.getElementById('btn'); btn.onclick = function () { //Realize the rotation of rotary lamp //Calculate the number of steps (non fixed) and random steps to be rotated this time //The number of steps should not be too small, at least 3 turns should be turned, plus a random number of steps (0-20) var step = fruits.length * 3 + parseInt(Math.random()*20); //Start a timer to turn the lights var timerID = setInterval(function () { //Let the rotary lamp rotate one grid and walk one step //Let the hidden div display, change the left and top of the div to realize the rotation of the rotary lamp var div = document.getElementById('active'); div.style.display = 'block'; div.style.left = fruits[index].left; div.style.top = fruits[index].top; step--; if(step == 0)//You should stop the timer { clearInterval(timerID); var msg = document.getElementById('msg'); msg.innerHTML = fruits[index].content + ':' + fruits[index].score; return; } index++; if(index == fruits.length) { index=0; } },100); } } </script>

4.5 variable speed rotation of small lamp

//Binding event handler to start button var btn = document.getElementById('btn'); var index = 0;//Which subscript fruit should active div coincide with btn.onclick = function () { //Realize the rotation of rotary lamp //Calculate the number of steps (non fixed) and random steps to be rotated this time //The number of steps should not be too small, at least 3 turns should be turned, plus a random number of steps (0-20) var step = fruits.length * 2 + parseInt(Math.random() * 35); var timerID = 0 function turnOneStep() { console.log(step) //Let the rotary lamp rotate one grid and walk one step //Let the hidden div display, change the left and top of the div to realize the rotation of the rotary lamp var div = document.getElementById('active'); div.style.display = 'block'; div.style.left = fruits[index].left; div.style.top = fruits[index].top; step--; if (step == 0)//You should stop the timer { clearTimeout(timerID); var msg = document.getElementById('msg'); msg.innerHTML = fruits[index].content + ':' + fruits[index].score; return; } index++; if (index == fruits.length) { index = 0; } timerID = setTimeout(turnOneStep, 1200/step); } //Start a timer to turn the lights turnOneStep(step); }