|
【济南中心】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>实现效果： 点我啊小游戏： 代码： [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>效果：
| 
收藏
淘帖
踩
