一个简单网页游戏--丑陋的连连看
主页面<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="utf-8"><title>连连看</title><style type="text/css">span{color: red}table{background-color: #dca7d4}td{border-style: solid;border-color: midnightblue;width: 100px;height: 100px;text-align: center;font-size: large}.change {background-color: #6d60dc;opacity:0.8}</style><script src="jquery-1.11.1.js"></script><script>$(function(){$("#start").click(function(){$(this).attr("disabled",true);var time=60;var i=0;//记录每次点击的个数var a=new Array();//存放点击事件的值var count=0;$("#s").show();$("#div").slideDown();//计时器var timer=setInterval(function(){$("#time").html(time);time--;if(time<0){clearInterval(timer);$("#div").slideUp();$("#div2").slideDown();}},1000);/*** 对表格的初始化以及点击事件绑定*/$("td").each(function(){$(this).html(parseInt(Math.random()*300)%10);//为每个表格绑定点击事件$(this).click(function(){if($(this).prop("class")=="change"){//不执行任何操作}else{$(this).prop("class","change");//将点击过的表格添加class属性a.push($(this).html());//记录当前点击的数值i++;//记录点击次数if(i%2==0){//每两次点击事件判断一下是否相等//弹出最后两个数值var t1= a.pop();var t2= a.pop();//alert(t1+";"+t2);if(t1==t2){//如果两个值相等，则重新为两个表格赋值$(".change").each(function(){$(this).html(parseInt(Math.random()*300)%10);});count++;//分数增加}//点击两次之后重新清除class属性$(".change").prop("class","");}}//显示分数信息$("#score").html(count);});});});});</script>
</head>
<body>
<input type="button" value="开始游戏" id="start"/>
<div style="display:none" id="s"><h2>你的得分：<span id="score">0</span></h2>剩余时间：<span id="time"></span> s<hr/>
</div>
<div style="display: none;position: absolute;top: 135px" id="div"><table boder="1"><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>
</div><div style="display: none;position: absolute;top: 135px;background-image: url('GameOver.jpg');width: 530px;height: 530px;" id="div2"><a href="linkTest.html">再来一次</a><a href="exitTest.html">退出游戏</a>
</div>
</body>
</html>退出页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title><script>window.close();</script>
</head>
<body></body>
</html>用到了JQuery1.1库
图片：
一个简单网页游戏--丑陋的连连看相关推荐
- rust如何在木板上上传图片_通过编写一个简单的游戏来学习 Rust | Linux 中国
导读:你可以尝试以多种语言编程一个简单的游戏来开始编程之路. 本文字数:4068,阅读时长大约: 5分钟 https://linux.cn/article-12979-1.html 作者:Moshe ...
- python编程制作接金币游戏_pygame学习笔记（6）：完成一个简单的游戏
学了这么长时间的Pygame,一直想写个游戏实战一下.看起来很简单的游戏,写其来怎么这么难.最初想写个俄罗斯方块,想了很长时间如何实现,想来想去,也没写出来,于是干脆下载别人的代码来读.后来,要想写一 ...
- 本文将引导你使用XNA Game Studio Express一步一步地创建一个简单的游戏
本文将引导你使用XNA Game Studio Express一步一步地创建一个简单的游戏 第1步: 安装软件 第2步: 创建新项目 第3步: 查看代码 第4步: 加入一个精灵 第5步: 使精灵可以移 ...
- 如何制作一个简单的游戏 Cocos2d x 2 0 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本文实践 ...
- 如何制作一个简单的游戏 Cocos2d-x 2.0.4
本文实践自 Ray Wenderlich 的文章< How To Make A Simple iPhone Game with Cocos2D 2.X Tutorial>,文中使用Coco ...
- 用python 编写一个简单的游戏
This blog will memory my work and process with the interesting skill. 用python 编写一个简单的游戏 这是一个非常简单的游戏, ...
- 游戏编程笔记-起步（一）一个简单的游戏-贪吃蛇
二 游戏编程起步 1.一个简单的游戏-贪吃蛇 1.贪吃蛇游戏剖析 1)游戏的目标.在不被撞死的前提下,吃掉奖子增加自己的长度,来完成升级. 2)游戏中的物体.蛇,墙壁,奖子. 3)动作.蛇移动,蛇吃奖 ...
- 做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱 做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
- Java怎么做一个简单网页呢？
学java的同学在接触到Java web开发之后都跃跃欲试想要尝试自己开发一个页面,那么应该如何操作呢?都需要使用到哪些技术呢?下面小千就来告诉你. 需要使用到的技术 java 语言知识, jsp 知 ...
最新文章
- 根据功率计算用电量和电费
- P12 离散控制系统-《Matlab/Simulink与控制系统仿真》程序指令总结
- 2010 eWEEK 年度产品
- HDU-3507Print Article 斜率优化DP
- c语言复杂的程序代码,C语言中复杂结构的序列化
- mysql 如何清除sql缓存
- ubuntu重命名移动硬盘
- 利用R、Octave和NumPy求解线性方程组
- 网站爬取工具_Python项目：结合Django和爬虫开发小说网站，免安装，无广告
- Grafana实现zabbix数据可视化展示
- 编程语言python怎么读-网红编程语言Python将纳入高考你怎么看?
- 工程分析：Kconfig
- RestAssured接口自动化框架学习
- JIAR 使用笔记 - 素材
- 150分钟学会R语言与R常见问题解答
- 阿里云code下载代码和更新代码
- 复旦MBA：热情从未消退，让这场云端盛会点燃你的斗志
- 阿里云ECS每天一件事D1：配置SSH
- Single Variable Calculus 总结
- activity 被输入法挤扁的问题