html5小游戏基础知识
显示一个DIV和隐藏一个DIV
首先，我们要显示一个DIV和隐藏一个DIV需要使用css里面使用：
.hide{ display:none;}
.show{display:block;}
在需要显示或隐藏的DIV输入：
<div id="title" class="show"></div>
<div id="title" class="hide"></div>
----------------------------------------------------------
还有一种点击显示和隐藏方法：
js里面的：
function fun(){
var div=document.getElementById("div1");
div1.style.display="none";
}
<div id="title" onclick="fun()"></div>
----------------------------------------------------------
另外一种方法：
在js里面需要封装一个函数：
function showDIV(id){
var obj=document.getElementById(id);
obj.setAttribute("class","show");
}
function hideDiv(id){
var obj=document.getElementById(id);
obj.setAttribute("class","hide");
}
只需要在需要显示或隐藏的DIV里面输入：
<div id="stop" onclick="showDIV('end')"></div>
<div id="end">123</div>
需要注意的是：在输入id时，需要加引号。
----------------------------------------------------------
让背景图片动起来：
首先定义1个动画名称：
@keyframes myfirst
{
0% {background-position: 1920px 0px;}
100% {background-position: 0px 0px;}
}
这里需要注意的是：我们要改变的不是背景图片的宽度，而是背景图片的起始位置。所以用到background-position。
再将定义的动画添加到需要实现移动的div上
#div{ animation: myfirst 7s linear infinite;}
就能够实现背景的移动
----------------------------------------------------------
在一个大DIV里面，有个小的div，我们需要移动小的DIV,而不影响大的div有3种方法：
1、设置大的div边框，这样移动小的div,大div就不会跟随移动了。
<div id="div1">
<div id="div2"></div>
</div>
在css里面：
#div1{
width:200px;
height:200px;
border: 1px solid red;}
#div2{
width:100px;
height:100px;
border: 1px solid red;
margin:10px auto; }
2.设置小的div的padding的值，需要注意的是，设置padding想上移动，需要在div的高度上进行相减，不然会改变div 的大小。
#div2{
width:100px;
height:90px;
border: 1px solid red;
padding:10px auto; }
3.在大div和小div之间加上一个空格和div，设置div的高度为0。
<div id="div1">
<div style:"height:opx;"> </div>
<div id="div2"></div>
</div>
----------------------------------------------------------
在js里面，结束动画移动的时候，我们想让等上几秒才显示另外一个div
需要以下几步：
1，给之前定义的时钟器命名一个id
然后再取消时钟器。
2，再调用setTimeout
function gameOver(){
clearInterval(id);
setTimeout(function(){
fun（）；
},2000)
}
这样就能实现结束时钟器时，过2秒，显示fun（）里面的内容。
