js实现windows扫雷(jquery)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head>
<body>
<style>
table{background-color: red;}
tr td{width: 20px;height: 20px;background-color: yellow;}
</style> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<table>
<script> var x=9;//宽度
var y=9;//高度
var shu=20;//雷数
var lei=new Array();//雷的位置
//循环出随机雷的位置
for(var l=0;l<shu;l++){
var c=Math.floor(Math.random()*parseInt(String(x)+y));
lei[l]=c;
} for(var i=1;i<x;i++){
document.write('<tr>');
for(var s=1;s<y;s++){
//如果这个位置是雷 显示*
if(xunhuan(String(i) + String(s))){
document.write('<td value="*"></td>');
}else{
//不是累就显示 周围的雷数
document.write('<td value="'+leishu(i,s)+'"></td>'); } }
document.write('</tr>'); }
//判断一个坐标是不是雷
function xunhuan(xy){ if(jQuery.inArray(parseInt(xy), lei)!=-1){
return true;
}else{
return false;
}
}
//判断一个坐标的 上下左右的坐标
function leishu(i,s){
var shu=0;
//上边
if((i-1)>=1){
if(xunhuan(String(i-1)+s)){
shu+=1;
}
}
//下边
if((i+1)<y){
if(xunhuan(String(i+1)+s)){
shu+=1;
}
}
//左边
if((s-1)>=1){
if(xunhuan(String(i)+(s-1))){
shu+=1;
}
}
//右边
if((s+1)<x){
if(xunhuan(String(i)+(s+1))){
shu+=1;
}
}
//左上
if((i-1)>=1 && (s-1)>=1){
if(xunhuan(String(i-1)+String(s-1))){
shu+=1;
}
}
//右上
if((i-1)>=1 && (s+1)<x){
if(xunhuan(String(i-1)+String(s+1))){
shu+=1;
}
}
//左下
if((i+1)<y && (s-1)>=1){
if(xunhuan(String(i+1)+String(s-1))){
shu+=1;
}
}
//右下
if((i+1)<y && (s+1)<x){
if(xunhuan(String(i+1)+String(s+1))){
shu+=1;
}
} return shu;
}
$(function(){
$("table").on("click","td", function () {
$val=$(this).attr("value");
if($val=='*'){
$(this).text('雷');
}else{
$(this).text($val);
} });
}); </script>
</table>
</body>
</html>
js实现windows扫雷(jquery)的更多相关文章
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- 原生js使用forEach()与jquery使用each遍历数组，return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- 用Node.js开发Windows 10物联网应用
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 未来10年内,物联网将会如移动互联网这样深入到我们生活的各方各面.所以微软现在对物联网进行了 ...
- Node.js在Windows与Linux下的安装
一.Windows配置 (1)官网(http://nodejs.org)选择Node.js的Windows系统(32位和64位)最新版本. (2)下载完成后,执行MSI的安装文件. (3)安装完成,查 ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- jquery.validate.js默认配置，jquery.validate.js自定义提示信息
jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...
- 原生JS研究：学习jquery源码，收集整理常用JS函数
原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
随机推荐
- C# 扩展方法 总结
扩展方法是静态方法,它是类的一部分,但实际上没有放在类的源代码中. 设计一个Money类 public class Money { private decimal amount; public dec ...
- 递归神经网络（RNN，Recurrent Neural Networks)和反向传播的指南 A guide to recurrent neural networks and backpropagation（转载）
摘要 这篇文章提供了一个关于递归神经网络中某些概念的指南.与前馈网络不同,RNN可能非常敏感,并且适合于过去的输入(be adapted to past inputs).反向传播学习(backprop ...
- 357. Count Numbers with Unique Digits
Given a non-negative integer n, count all numbers with unique digits, x, where 0 ≤ x < 10n. Examp ...
- ZOJ 1074 To the Max
原题链接 题目大意:这是一道好题.在<算法导论>这本书里面,有一节是介绍如何求最大子序列的.这道题有点类似,区别是从数组变成了矩阵,求最大子矩阵. 解法:完全没有算法功底的人当然不知道最大 ...
- html5的发展历程
20年磨一剑,HTML5作为下一代Web标准,她的语义之美.人性之美.简单之美.实用之美……如同一场革命,将Web从内容平台推向标准化的应用平台,并一统各在平台阵营的标准.2008年,HTML5发布首 ...
- 《Java程序设计》第7周学习总结
学号20145220<Java程序设计>第7周学习总结 教材学习内容总结 12.1认识Lambda语法 12.1.1Lambda语法概览 在java中引入了Lambda的同时,与现有API ...
- ThinkPHP缓存微信公众号access_token
access_token作为微信的全局票据,在高级接口中需要频繁调用,其有效期为7200秒,即2小时,而微信官方对调用Token的次数有限制(参见接口频率限制说明),获取access_token每日限 ...
- (转)Tarjan应用:求割点/桥/缩点/强连通分量/双连通分量/LCA(最近公共祖先)
基本概念: 1.割点:若删掉某点后,原连通图分裂为多个子图,则称该点为割点. 2.割点集合:在一个无向连通图中,如果有一个顶点集合,删除这个顶点集合,以及这个集合中所有顶点相关联的边以后,原图变成多个 ...
- [hdu 3605]Escape
这题的做法非常直观,却又非常不直观 先容许我吐一下槽吧~作者你的英语是读到火星上去了喵? 题目大体是说人类要移民,然后有 n 个人, m 个星球 每个人都有 m 个 0 . 1 数码表示他能否移民到该 ...
- spring源码学习之【准备】cglib动态代理例子
一:委托者 package com.yeepay.porxy.cglib.test; import java.util.HashMap; import java.util.Map; /** * 目标类 ...