提示:1:先把两个图片放到重命名并放到相应的路径内. 2:本小游戏只为闲事练手,如有小bug自行解决,解决不了的可以留言,我看到后解决.

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#wrap{
margin:0 auto;
border : 1px solid red;
width:400px;
height:500px;
background: #ccc;
}
#title{
height:20px;
}
#time{float:left}
#score{float:right}
#begin{display:block;margin:20px auto;width:100px;height:30px;border-radius: 5px;border:1px solid #ccc;background:blue;color:white;font-size:18px;}
#main{
width:300px;
margin:40px auto;
}
#main img{
width:100%;
margin:5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="title">
<span id="time">剩余时间：60秒</span>
<span id="score">分数：0</span>
</div>
<div id="center"><button id="begin">开始</button></div>
<div id="main">
<img src="img/2.png" alt="" />
</div>
</div>
</body>

<script type="text/javascript">

var main = document.getElementById("main");
//开始按钮
var btn = document.getElementById("begin");
//分数
var score = document.getElementById("score");
//剩余时间
var time = document.getElementById("time");
var step = 2;
//开始按钮点击
btn.onclick = function(){
createImg();
score.innerHTML = "分数：0";
var initTime = 60;
btn.disabled = "disabled";
btn.style.background = "gray";
btn.innerHTML = "游戏中..."
//添加定时器
var inter = setInterval(function(){
initTime-=0.1;
initTime = initTime.toFixed(2);
if(initTime<=0){
alert("时间到啦");
clearInterval(inter);
btn.removeAttriute("disabled");
btn.style.background = "blue";
btn.innerHTML = "开始";
step = 2;
}
time.innerHTML = "剩余时间："+initTime+"秒";
},100)
};
//生成随机数
function rand(min,max){
return Math.floor(Math.random()*(max-min));
}
//创建图片
function createImg(){
//先移除图片
remove();
var count = Math.pow(step,2);
var imgWidth = (main.offsetWidth-step*10)/step + "px";
for(var i=0;i<count;i++){
var img = document.createElement("img");
img.src="img/1.png";
img.style.width = imgWidth;
main.appendChild(img);
}
step++;
if(step>20){
alert("神啊，你已经不用再玩了")
}
var FIndex = rand(0,count);
var FImg = main.children[FIndex];
FImg.src="img/2.png";
FImg.onclick = function(){
score.innerHTML = "分数："+(step-2);
createImg();
}
}
//每次生成新图片时把现在的图片清空
function remove(){
main.innerHTML = "";
}

</script>
</html>

JS小游戏寻找房祖名的更多相关文章

  1. 一个js小游戏----总结

    花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...

  2. JS小游戏：贪吃蛇（附源码）

    javascript小游戏:贪吃蛇 此小游戏采用的是面向对象的思想,将蛇,食物,和游戏引擎分为3个对象来写的. 为方便下载,我把js写在了html中, 源码中暂时没有注释,等有空我在添加点注释吧. 游 ...

  3. js小游戏：五子棋

    使用纯js的小游戏,五子棋 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. JS小游戏-蓝色拼图

    // a[href=#viewSource]"); //查看源代码标签 viewSourceArr.attr("title", "查看源代码"); v ...

  5. Vue.js小游戏：测试CF打狙速度

    此项目只测试反应速度,即手点击鼠标的反应速度 html代码 <div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div> < ...

  6. js小游戏---智力游戏

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  7. JS小游戏

    捕鱼达人 飞机大战游戏 详解javaScript的深拷贝 http://www.cnblogs.com/penghuwan/p/7359026.html

  8. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

  9. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

随机推荐

  1. Ubuntu 14.04 ThinkPad E431无线网卡驱动安装

    Ubuntu 14.04下安装无线网卡驱动. sudo apt-get install linux-headers-generic build-essential dkms  sudo apt-get ...

  2. 1.ubuntu的安装

    分两种 1. 在VMware中安装,则与Centos的安装类似 2. 在VirtualBox里安装 --> 1. 先“新建” 一个虚拟电脑 2. 根据需求编辑虚拟电脑的信息 (具体的大小.内存等 ...

  3. PHP获取ip与ip所在城市

    1获取真实ip,本地测试总是::1 或者127.0.0.1 或者局域网的ip /** * 获取用户真实 IP */ function getIP() { static $realip; if (iss ...

  4. django使用haystack对接Elasticsearch实现商品搜索

    # 原创,转载请留言联系 前言: 在做一个商城项目的时候,需要实现商品搜索功能. 说到搜索,第一时间想到的是数据库的 select * from tb_sku where name like %苹果手 ...

  5. linux命令（31）：lsof命令

    1.递归查看某个目录的文件信息: lsof  test/test1 2.不使用+D选项,遍历查看某个目录的所有文件信息的方法 :lsof |grep 'test/test3' 3.列出某个用户打开的文 ...

  6. 属性名、变量名与 内部关键字 重名 加&

    procedure TForm4.btn3Click(Sender: TObject); var MyQj: TQJson; MyPrinter: TPrinter; begin MyQj := TQ ...

  7. Storm实战常见的问题

    该文档为实实在在的原创文档,转载请注明: http://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html 类型 详细 备注 该文档是群里几个朋友在storm实 ...

  8. [转]windows消息机制（MFC）

    消息分类与消息队列 Windows中,消息使用统一的结构体(MSG)来存放信息,其中message表明消息的具体的类型, 而wParam,lParam是其最灵活的两个变量,为不同的消息类型时,存放数据 ...

  9. Qt笔记——QSqlLite

    静态数据库,简单方便 在.pro文件里添加 +sql #ifndef WIDGET_H #define WIDGET_H #include <QWidget> namespace Ui { ...

  10. qtp录制时间控件不允许用户手动输入的解决办法

    qtp录制时间控件不允许用户手动输入的解决办法 [前面的话] 一边学习qtp,一边用自己的项目试着写代码,而遇到一个问题就会让自己卡壳很久,这次也是这样的,在写好了登录代码以后,自己就试着写第一个预订 ...