原生javascript扫雷游戏
<!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">
<head>
<title>扫雷游戏</title>
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="Notepad++" />
<meta name="Robots" content="all" />
<meta name="Author" content="622" />
<meta name="Keywords" content="模版" />
<meta name="Description" content="模版" />
<meta name="Copyright" content="Copyright (c) 2014 rick All Rights Reserved." />
<script language="javascript"></script>
<style>
.all{margin:0 auto; width:960px;}
ul,li{margin:0; padding:0; list-style:none;}
#block>ul{height:32px; cursor:pointer;}
#block>ul>li{float:left; width:30px; height:30px; border:1px solid black; background:gray; color:white; text-align:center; position:relative;}
#block>ul>li>span{position:absolute; top:0; left:0; height:30px; width:30px; background:#eee;}
#ctrl{margin:20px auto;}
</style>
</head>
<body>
<div class="all">
<h1>小乐扫雷大作战</h1>
<form id="ctrl">
<label>行（1~30）<input type="text" id="row_n" value="10" /></label><br />
<label>列（1~30）<input type="text" id="col_n" value="10" /></label><br />
<label>雷的比例（1~0.01）<input type="text" id="thunder_n" value="0.3" /></label><br />
<input type="button" id="submit" value="提交" />
<input type="reset" id="reset" value="重置" /><br />
<label>提示消息<input type="text" id="msg" readonly="ture" /></label>
</form>
<div id="block"></div>
</div>
</body>
</html>
document.oncontextmenu=function ()
{
return false; //阻止默认事件
};
window.onload=function(){
var oSubmit = document.getElementById("submit");
//var oReset = document.getElementById("reset");
//var oRow_n = document.getElementById("row_n");
//var oCol_n = document.getElementById("col_n");
//var oThunder_n = document.getElementById("thunder_n");
var oMsg = document.getElementById("msg");
oMsg.value = "请输入要挑战的雷阵!";
oSubmit.onclick = init;
function init(){
var oSubmit = document.getElementById("submit");
var oReset = document.getElementById("reset");
var oRow_n = document.getElementById("row_n");
var oCol_n = document.getElementById("col_n");
var oThunder_n = document.getElementById("thunder_n");
var oMsg = document.getElementById("msg");
//参数设置
var m = oRow_n.value; //行
var n = oCol_n.value; //列
var p = oThunder_n.value;
var x = Math.floor(m*n*p); //雷的数目
//console.log(m,n,x);
if(!(m<30&&m>=0&&n<30&&n>=0&&p>=0&&p<=1)){
oMsg.value = "参数不合法";
}else{
oMsg.value = "参数设置成功";
var oDiv = document.getElementById("block");
oDiv.innerHTML = "";
var array = new Array(m);
//布局
for(var j=0; j<m; j++){
var oUl = document.createElement("ul");
array[j] = new Array(n);
for(var i=0; i<n; i++){
var oLi = document.createElement("li");
oUl.appendChild(oLi);
array[j][i] = [0,0,0]; //[是否是雷,标记状态,周围雷数]
}
oDiv.appendChild(oUl);
}
//初始化雷区
for(var i=0; i<x; i++){
var a = Math.floor(Math.random() * m);
var b = Math.floor(Math.random() * n);
if(array[a][b][0] == 0){
array[a][b][0] = 1;
valid(a-1,b-1);
valid(a-1,b);
valid(a-1,b+1);
valid(a,b-1);
valid(a,b+1);
valid(a+1,b-1);
valid(a+1,b);
valid(a+1,b+1);
}else{
x++;
}
}
//布雷
for(var i=0; i<m; i++){
for(var j=0; j<n; j++){
oLi = getBlock(i,j);
if(array[i][j][0] == 0){
oLi.innerHTML = array[i][j][2];
}else{
oLi.innerHTML = "#";
oLi.style.background = "red";
}
var oSpan = document.createElement("span");
oLi.appendChild(oSpan);
}
}
//监听事件
for(var i=0; i<m; i++){
for(var j=0; j<n; j++){
var oSpan = getBlock(i,j).getElementsByTagName("span")[0];
oSpan._i = i;
oSpan._j = j;
function listen_1(){
if(array[this._i][this._j][1]==2) return false;
this.style.display = "none";
array[this._i][this._j][1] = 1;
check();
if(array[this._i][this._j][0]==1){
alert("game over");
oMsg.value = "抱歉，挑战失败";
var aSpan = oDiv.getElementsByTagName("span");
for(var m=0; m < aSpan.length; m++){
aSpan[m].style.display = "none";
}
}
}
function listen_2(){
if(array[this._i][this._j][1] == 0){
array[this._i][this._j][1] = 2;
this.style.backgroundColor = "red";
check();
}else{
array[this._i][this._j][1] = 0;
this.style.backgroundColor = "#eee";
check();
}
}
function check(){
console.log(array);
var f=1;
for(var i=0; i<m; i++){
for(var j=0; j<n; j++){
console.log(array[i][j]);
if(array[i][j][0]==0){
if(array[i][j][1]!=1){
f=0;
break;
break;
}
}
if(array[i][j][0]==1){
if(array[i][j][1]!=2){
f=0;
break;
break;
}
}
}
}
if(f==1){
alert("恭喜挑战成功");
oMsg.value = "恭喜挑战成功";
}
}
on(oSpan,"click",listen_1);
on(oSpan,"contextmenu",listen_2);
}
}
}
function valid(x,y){
if(x>=0&&x<m&&y>=0&&y<n){
array[x][y][2] ++;
}
}
}
function getBlock(m,n){
var oDiv = document.getElementById("block");
var aUl = oDiv.getElementsByTagName("ul");
var ali = aUl[m].getElementsByTagName("li");
var oLi = ali[n];
return oLi;
}
function on(node,eventType,handler){
node = typeof node == "string" ? document.getElementById(node) : node;
if(document.all){
node.attachEvent("on" + eventType, handler);
}else{
node.addEventListener(eventType, handler, false);
}
}
}
原生javascript扫雷游戏的更多相关文章
- 原生javascript开发仿微信打飞机小游戏
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...
- 用原生javascript模拟经典FC游戏公路争霸
#用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...
- Javascript 综合示例 网页扫雷游戏
---------------认定了的事情,只要是对的,干到底! ------------------------------------------------------------------- ...
- javascript+HTMl5游戏下载，开发一个都能月薪上万！舅服你
HTML5时代已经到来许久了,你是否已经掌握了那么一点呢?今天小编给大家讲讲h5的折叠多设备.跨平台特性, 即用HTML5制作游戏.相比flash,HTML5更加灵活方便,随着浏览器技术的不断升级,H ...
- 原生JavaScript运动功能系列（二）：缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...
- 原生 Javascript 编写五子棋
原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...
- 20 个使用原生 JavaScript 实现的 Web 项目
20 个使用原生 JavaScript 实现的 Web 项目 20 vanilla JavaScript Web Projects https://github.com/learning-js-by- ...
- 原生javascript 实现 animate
原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...
随机推荐
- Scala + Play + Sbt + Protractor
Scala + Play + Sbt + Protractor = One Build 欢迎关注我的新博客地址:http://cuipengfei.me/ 我所在的项目的技术栈选用的是Play fra ...
- CentOS 6.4源码编译安装httpd并启动测试
今天来总结一下在Linux中软件安装,通常我们应该知道,安装软件有两种方法:一种是软件包的安装,也就是rpm包的安装,就是指这些软件包都是 已经编译好的二进制rpm包,我们通过rpm安装工具和yum安 ...
- CString转换为const char*
CString str=_T("这是我的测试程序.");// 先得到要转换为字符的长度const size_t strsize=(str.GetLength()+1)*2; // ...
- EntityFramework中支持BulkInsert扩展
EntityFramework中支持BulkInsert扩展 本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 前言 很显然,你应该不至于使用 Ent ...
- SignalR 2.0 系列： SignalR简介
SignalR 2.0 系列: SignalR简介 英文渣水平,大伙凑合着看吧,并不是逐字翻译的…… 这是微软官方SignalR 2.0教程Getting Started with ASP.NET S ...
- sqlite3结合ios开发
简介: SQLite是遵守ACID的关系数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp创建的公有领域项目. 不像常见的客户端/服务器结构范例,SQLite引 ...
- 网址URL中特殊字符转义编码
网址URL中特殊字符转义编码 字符 - URL编码值 空格 - %20 " - %22 # - %23 % - %25 & - %26 ( - %28 ) - %29 + - %2B ...
- 关于grub的那些事（三）
接着第二篇的研究,继续分析/etc/grub.d/10_linux. #! /bin/sh set -e prefix="/usr" exec_prefix="${pre ...
- MongoDB学习之--安全和认证
MongoDB学习之--安全和认证 本文主要介绍两部分内容,Mongodb的安全检查配置以及安全认证操作: 虽然确保系统安全是系统管理员的重要工作,但是作为程序员了解其机制也是大有好处的,毕竟不是每个 ...
- 风萧萧兮易水寒 coding一去兮不复还
这一年都在忙碌中渡过.没有看过日落没有享受过日常.希望可以在忙碌中有些收获.工作马上要三年了. 风萧萧兮易水寒 coding一去兮不复还 记的刚毕业的时候喜欢自己晚上更新下博客.那时候也很忙.但是后来 ...