A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

【济南中心】PHP课程同步笔记day06:JS小游戏
      通过前几周的学习我们对JS有一定的了解,今天的内容就是将之前的学习的内容在小游戏中应用,希望大家能够在小游戏中进一步提升自己的js水平。
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>
实现效果:
图片1.png
点我啊小游戏:
代码:
[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>
效果:
图片3.png
锦绣齐鲁.jpg

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马