寻找徐峥小游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
*{
margin:0; padding:0;}
#wrap{
width:600px; height:650px; border:1px solid #000; margin:0 auto;position:relative;}
#time{
width:110px; height:50px; font-size:20px; line-height:50px; text-align:center; float:left}
#score{
width:110px; height:50px; font-size:20px; line-height:50px; text-align:center; float:right}
#content{
width:600px; height:600px; clear:both; display:flex; flex-wrap:wrap}
#content>img{
width:100%; height:100%}
#menuGame{
width:600px; height:650px; position:absolute; top:0; left:0; background:rgba(0,0,0,0.2);}
#start{
width:200px; height:60px; border-radius:10px; background:red; color:#fff; text-align:center; font-size:30px; line-height:60px; position:absolute;
top:50%; left:50%; margin-left:-100px; margin-top:-30px; cursor:pointer;}
</style>
</head>
<body>
<div id="wrap" >
<!--剩余时间、分数-->
<div id="time" >剩余时间:30</div>
<div id="score">分数:0</div>
<div id="content">
<img src="http://photo.yupoo.com/wangjx0212/FFb8Kal5/medish.jpg" alt=""/>
</div>
<div id="menuGame">
<p id="start">开始游戏</p>
</div>
</div>
<script type="text/javascript" >
var oTime=document.getElementById("time");
var oScore=document.getElementById("score");
var oContent=document.getElementById("content");
var oMenuGame=document.getElementById("menuGame");
var oStare=document.getElementById("start");
var timer;
oStare.οnclick=function(){
oMenuGame.style.display="none";
var time=30;
timer=setInterval(function(){
time--;
oTime.innerHTML="剩余时间:"+time;
if(time==0){
alert("亲,您的分数为"+(scores-1)+"分")
clearInterval(timer);
oMenuGame.style.display="block";
oTime.innerHTML="剩余时间:30";
oStare.innerHTML="重新开始";
oScore.innerHTML="分数:0";
oContent.innerHTML="";
var img=document.createElement("img");
img.src="http://img0.ph.126.net/zwgKZ9wWFqFgieMHux4lqg==/6631494376210670232.jpg";
oContent.appendChild(img);
img.οnclick=function(){
addScoreAndImage();
}
}
},1000);
oContent.firstElementChild.οnclick=addScoreAndImage;
var scores=1;
function addScoreAndImage(){
var allImgs = oContent.children;
for (var i = 0;i < allImgs.length;i++) {
oContent.removeChild(allImgs[i]);
i--;
}
oScore.innerHTML="分数:"+scores;
scores++;
var count=Math.pow(scores,2);
for(var j=0;j<count;j++){
var img=document.createElement("img");
img.src="http://img2.ph.126.net/PbY6MKWJrkB_HpzqoMz4KA==/6631742865838549361.jpg";
img.style.width=(100/scores)+"%";
img.style.height=(100/scores)+"%";
oContent.appendChild(img);
}
var ranNum = Math.floor(Math.random() * count);
var imgTem=oContent.children[ranNum];
imgTem.src="http://img0.ph.126.net/zwgKZ9wWFqFgieMHux4lqg==/6631494376210670232.jpg";
imgTem.οnclick=function(){
addScoreAndImage();
}
}
}
</script>
</body>
</html>
转载于:https://my.oschina.net/newSpring/blog/742216
- 寻找徐峥的小游戏
- 寻找猴王小游戏php代码
- 5、Cocos2dx 3.0小游戏开发的例子寻找测试三个简单的介绍和总结
- 寻找金馆长canvas小游戏
- 趣题:寻找隐藏的公共秘密
- jQuery制作拼图小游戏
- 蓝桥杯-寻找数列中最大数
- 趣题:寻找隐藏的公共秘密
- 【二叉树】寻找二叉树/BST的两个节点的最低公共祖先
- 寻找和为定值的两个数
- Pygame(三)游戏编程,第三弹——完整小游戏上线了
- 寻找连接-------NETSTAT
- 寻找数组中最大值
- 寻找[nginx] 由Lua 粘合的Nginx生态环境-- agentzh
- 使用Silverlight制作简单的小游戏—Jewellery (Part 3)
- [C++]LeetCode: 118 Find Peak Element (二分查找 寻找数组局部峰值)
- 【JS小游戏】游戏编程初体验之扫雷
- 贪吃蛇小游戏
- SpriteKit实现的小游戏ColorAtom
- 寻找发帖水王