如何从零开始学javascript (从零开始学web全套教程)

游戏介绍

幸运水果机是一款街机游戏，游戏界面由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

如何从零开始学javascript,从零开始学javascript

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;
   }

运行效果

如何从零开始学javascript,从零开始学javascript

可以看到每个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>

运行效果

如何从零开始学javascript,从零开始学javascript

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>

效果：

如何从零开始学javascript,从零开始学javascript

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>

效果：

如何从零开始学javascript,从零开始学javascript

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>

最终效果：

如何从零开始学javascript,从零开始学javascript

搜索