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;">&nbsp;</div>

<div id="div2"></div>

</div>

----------------------------------------------------------

 在js里面，结束动画移动的时候，我们想让等上几秒才显示另外一个div

需要以下几步：

1，给之前定义的时钟器命名一个id

然后再取消时钟器。

2，再调用setTimeout

function gameOver(){

clearInterval(id);

       setTimeout(function(){
                fun（）；
                },2000)
}

这样就能实现结束时钟器时，过2秒，显示fun（）里面的内容。