【济南中心】PHP课程同步笔记day06：JS小游戏 - 黑马程序员技术交流社区

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<title>满天都是小星星</title>

<style type="text/css">

#span1{

border:1px solid red;

width:100px;

display:inline-block;

height:20px;

overflow:hidden;

}

#span2{

display:inline-block;

width:0px;

height:20px;

}

</style>

<script type="text/javascript">

var count=0;//代表星星的个数

var dingshiqi;//定时器名字

var shijian=0;//时间

var gametime;//记录游戏时间定时器

//设置body的颜色

window.onload=init;

function init(){

//document.body.bgColor="black";

}

//var dingshiqi=window.setInterval("star()",500);

//创建星星的函数

function star(){

//创建星星

var obj=document.createElement("img");

obj.src="images/xingxing.gif";

//设置星星的宽度

var w=Math.floor(Math.random()*(90-30+1))+30;

obj.width=w;

//设置随即位置

//var x=e.clientX;//鼠标的x坐标

//var y=e.clientY;//鼠标的y坐标

var x=Math.floor(Math.random()*1300)+30;

var y=Math.floor(Math.random()*500)+30;

obj.style.position="absolute";

obj.style.top=y+"px";

obj.style.left=x+"px";

//把obj加到body中

document.body.appendChild(obj);

//给对象绑定事件

obj.onclick=removestar;

//记录星星个数

count++;

//调用函数告诉玩家有多少个星星

countxingxing();

//改变进度条

document.getElementById("span2").style.width=count*5+"px";

document.getElementById("span2").style.backgroundColor="red";

}

//删除星星的函数

function removestar(){

this.parentNode.removeChild(this);

count--;

countxingxing();

}

//点击开始游戏的函数

function startxingxing(){

dingshiqi=window.setInterval("star()",500);

gametime=window.setInterval("youxishijian()",1000);

}

//暂停游戏

function zanting(){

alert("暂停游戏");

}

//星星个数

function countxingxing(){

var shu=document.getElementById("count");

if(count>20){

alert("游戏结束");

window.clearInterval(dingshiqi);

window.clearInterval(gametime);

}

shu.innerHTML=count+"个星星";

}

//记录游戏时间

function youxishijian(){

var obj=document.getElementById("jishi");

shijian++;

obj.innerHTML="游戏进行"+shijian+"秒";

}

</script>

</head>

<body>

<span id="count">0个星星</span>

<input type="button" value="点击开始游戏">

<input type="button" value="点击暂停游戏">

<span id="jishi">游戏进行0秒</span>

<span id="span1"><span id="span2"></span></span>

</body>

</html>

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html" charset="utf-8">

    <title>小游戏</title>

    <script type="text/javascript">

        var number=1;

          function mv(){

 

              if (number==1){

                  mv2();

                  number=2;

              }

              else if(number==2){

                  mv3();

                  number=3;

              }

              else if(number==3){

                  mv4();

                  number=4;

              }

              else if(number==4){

                  mv1();

                  number=1;

              }

          }

        function mv1(){

 

            document.getElementById('d1').style.left=0+"%";

            document.getElementById('d1').style.right=88+"%";

            document.getElementById('d1').style.top=0+"%";

            document.getElementById('d1').style.bottom=76+"%";

 

 

        }

 

        function mv2()

        {

            document.getElementById('d1').style.left=88+"%";

            document.getElementById('d1').style.right=0+"%";

            document.getElementById('d1').style.top=0+"%";

            document.getElementById('d1').style.bottom=76+"%";

        }

        function mv3()

        {

            document.getElementById('d1').style.top=76+"%";

            document.getElementById('d1').style.bottom=0+"%";

            document.getElementById('d1').style.left=88+"%";

            document.getElementById('d1').style.right=0+"%";

        }

        function mv4()

        {

            document.getElementById('d1').style.bottom=0+"%";

            document.getElementById('d1').style.left=0+"%";

            document.getElementById('d1').style.top=76+"%";

            document.getElementById('d1').style.right=88+"%";

        }

 

    </script>

    <style type="text/css">

        #d1

        {

            width: 160px;

            height:160px;

            background-color: #66ffff;

            border: 2px solid yellow;

            border-radius:10px 10px 10px 10px ;

            box-shadow: 2px 2px 10px #cccccc;

            position: absolute;

            top: 0%;

            left: 0%;

            right:86%;

            bottom:86%;

 

 

        }

        #input{

            margin-top:45px;

           margin-left: 30px;

           width: 101px;

            height: 68px;

            background-color: #66ffff;

            color: #ffffff;

            font-weight: 700;

            border: 0px;

        }

 

 

    </style>

</head>

<body>

 

<div id="d1" >

    <input id="input" type="button" value="来呀，点我呀！"/>

</div>

 

</body>

</html>