网页小游戏贪吃蛇制作笔记（2）---惊喜部分

用if循环当游戏分数达到520分时，将弹出准备收获小惊喜的弹窗，再通过 window.location.href="js/suiprise.html";
实现当前页面打开URL页面，从原来的页面跳转到另一个新的页面。
location.href 常见的几种形式：

      self.location.href;//当前页面打开URL页面
      window.location.href;//当前页面打开URL页面
      this.location.href;//当前页面打开URL页面
      location.href;// 当前页面打开URL页面
      parent.location.href;//在父页面打开新页面
      top.location.href;//在顶层页面打开新页面

四、构建新的页面

1. 设置背景图片

在<head>对中创建<style>对，添加对象body{ }中包含背景图设置

    background-image: url(../img/b.jpg);//设置背景图片，图片位于img文件中  
    background-size: auto;//图片尺寸为原图尺寸
    background-repeat: repeat;//重复背景图，实现平铺
    background-attachment: fixed;//背景图片随着页面剩余部分滚动

background属性

属性	描述：值
background-color	背景颜色：颜色(名称、RGB、HEX)
background-image	背景图片：url(“图片URL”)
background-position	背景图片起始位置：水平位置、垂直位置、x%、y%
background-repeat	是否及如何重复背景图：repeat、no-repeat、repeat-x、repeat-y
background-attachment	背景图片是否固定或随着页面其他部分滚动：fixed(固定的)、scroll(滚动)
background	简写属性，在一个声明中设置所有背景属性：#ff0000 url(路径) no-repeat fixed center

2. 设置背景音乐
在<body>对中

<audio autoplay="autoplay" loop="loop" preload="preload"  src="a.mp3"></audio>

说明：
①、autoplay=“autoplay”，则背景音乐将在音网页打开后就自动马上播放。

②、controls=“controls”，则为了在页面内显示显示控件，如播放按钮。

③、"loop=“loop”，则是为了是背景音乐重复播放。

④、preload=“auto”，则音频在页面加载的同时进行加载，并预备播放。

⑤、src=""，即是在""内加入背景音乐的保存路径。

ps：在该环节出现一点问题暂时还未解决，设置为打开网页便自动播放之后仍需点击按钮后再返回原来页面时才开始播放背景音乐，其中音乐位于js文件中
pps:当两个页面联系在一起实现的时候，背景音乐能够自动播放，当播放页面中自带的视频时，背景音乐依然存在，所以将背景音乐删除了

3.添加视频以及按钮
在添加视频和按钮的同时，需要提前想好其布局，作为一个小小白，首先则以其默认位置排版，再根据div代码实现分划，

div 元素是用于分组 HTML 元素的块级元素。

      <div id="head" style="height: 50px;" >	
		<h2>恭喜突突进入惊喜环节</h2><br/><br/>//标题
	  </div>	
		  <div id=vidio style="height: 650px;width: 950;float:left;">//设置视频所占的大小
		<h3>Eminem--Rap God</h3>
		<video width="950" height="550"controls="controls" src="Eminem%20-%20Rap%20God.mp4"> 
		</video>//设置视频的大小
	      </div>
		      <div id='b';width=10px;float:right>//设置按钮的位置
	    <button onclick="window.location='h.mp4'">点我点我</button><br/><br/>
	    <button onclick="window.location='p.mp4'">嘻嘻嘻你也可以点我</button><br/><br/>
	    <button onclick="window.location='p.mp4'">你还可以点我噢</button><br/><br/>
	    <button onclick="window.location='p.mp4'">也可以点我！</button><br/>
	          </div>