初学JavaScript,这是自己仿照windows下面的扫雷游戏用写成的，网页上的扫雷游戏。通过这个程序的编写让我更加熟悉js的面向函数编程的思想和模式。同时深刻的体会到，要学好一门语言，一定得多动手写些代码。这里将代码分享出来，欢迎大家批评指正。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS扫雷游戏</title>
<script type="text/javascript" src="Mine.js"></script>
<script type="text/javascript">
document.oncontextmenu=function(){
event.returnValue=false
}
</script>
<link type="text/css" rel="stylesheet" href="Mine.css">
</head>
<body onload="Interface(8,8);">
<p>
目前剩余雷数:<span id="markNum" style="color: red"></span>个
</p>请选择难度：
<select id="level" onchange="selectLevel(this.value);">
<option value="1">初级玩家
<option value="2">普通玩家
<option value="3">高级玩家
</select>
<table id="mainTab" cellpadding="0" cellspacing="0">
<tbody id="mainInt"></tbody>
</table>
</body>
</html>
@CHARSET "UTF-8";
.myButton{
width: 30px;
height: 30px;
background: silver;
}
.myButton0{
width: 30px;
height: 30px;
color:gray;
background:gray;
}
.myButton1{
background: gray;
color:blue;
font-size:10px;
width: 30px;
height: 30px;
}
.myButton2{
background: gray;
font-size:10px;
color:green;
width: 30px;
height: 30px;
}
.myButton3{
background: gray;
color:yellow;
width: 30px;
height: 30px;
}
.myButton4{
background: gray;
color: aqua;
width: 30px;
height: 30px;
}
.myButton5{
background: gray;
color: fuchsia;
width: 30px;
height: 30px;
}
.myButton6{
background: gray;
color:lime;
width: 30px;
height: 30px;
}
.myButton7{
background: gray;
color: teal;
width: 30px;
height: 30px;
}
.myButton8{
background: gray;
color: navy;
width: 30px;
height: 30px;
}
.myButton_{
background: gray;
color: red;
width: 30px;
height: 30px;
}
/**********************************************
* JavaScript扫雷游戏
*
* @author : Sailor
*
* @version : 1.0
*
* Date : 2010-03-15
*
* Email : zpsailor@yahoo.com.cn
*
**********************************************/
var Mine;//用来记录每个小方块应对应的值
var markNum=8;//用来记录用户标记的数目
/**
* 布局游戏界面 size是布局大小，number是布雷数
*/
function Interface(size,number){
markNum=number;
var mainFrame=$("mainInt");
$("markNum").innerText=markNum;
mainFrame.innerText="";
var mine=new Array(size);
for(var i=0;i<size;i++){
mine[i]=new Array(size);
}
mine=randomNumber(mine,number);
Mine=mine;
for(var i=0;i<size;i++){
mainFrame.appendChild(createRow(i,size,mine));
}
}
/**
* randomNumber
* 参数mine,num分别表示一个二维数组和布雷的数目
*/
function randomNumber(mine,num) {
var mine=mine;
var rows=mine.length;
var cols=mine.length;
var i=0;
//完成布雷工作
while(i<num){
var row=Math.ceil((rows*Math.random()))-1;
var col=Math.ceil((cols*Math.random()))-1;
if(mine[row][col]!="雷"){
mine[row][col]="雷";
i++;
}
}
//完成雷数提示工作
for(var i=0;i<rows;i++){
for(var j=0;j<cols;j++){
var mineNum=0;
//判断左上
if((i-1>=0)&&(j-1>=0)){
if(mine[i-1][j-1]=="雷")
mineNum++;
}
//判断正上
if(i>=1){
if(mine[i-1][j]=="雷")
mineNum++;
}
//判断右上
if((i-1>=0)&&(j<=cols-2)){
if(mine[i-1][j+1]=="雷")
mineNum++;
}
//判断左边
if(j>=1){
if(mine[i][j-1]=="雷")
mineNum++;
}
//判断右边
if(j<=cols-2){
if(mine[i][j+1]=="雷")
mineNum++;
}
//判断左下
if((i<=rows-2)&&(j-1>=0)){
if(mine[i+1][j-1]=="雷")
mineNum++;
}
//判断正下
if(i<=rows-2){
if(mine[i+1][j]=="雷")
mineNum++;
}
//判断右下
if((i<=rows-2)&&(j<=cols-2)){
if(mine[i+1][j+1]=="雷")
mineNum++;
}
if(mine[i][j]!="雷"){
mine[i][j]=mineNum;
}
}
}
return mine;
}
/**
* 创建行
*/
function createRow(row,len,mine){
var mine=mine;
var tr=document.createElement("tr");
for(var i=0;i<len;i++){
var td=document.createElement("td");
var button=document.createElement("input");
button.type="button";
button.id=row+"."+i;
button.className="myButton";
var context=mine[row][i];
button.onclick=function (){
//alert(this.id)
getValue(this);
if(this.value=="雷"){
this.className="myButton_";
getValue("over");
alert("你触雷了，游戏结束！");
if(confirm("重新开始？")){
window.location.reload();
}
return false;
}
if(this.value==0){
showSpace2(this);
}
this.oncontextmenu=function (){
return false;
}
judge();
};
button.oncontextmenu=function (){
if(this.value=="确定"){
this.value="?";
markNum++;
$("markNum").innerHTML=markNum;
}else if(this.value=="?"){
this.value="";
}else{
this.value="确定";
markNum--;
$("markNum").innerHTML=markNum;
judge();
}
}
//button.value=mine[row][i];
td.appendChild(button);
tr.appendChild(td);
}
return tr;
}
//当点击的不是空白区或者是触动雷的时候调用下面的函数
function getValue(object){
if("over"!=object){
var id=object.id;
var button=document.getElementById(id);
var row=id.split(".")[0];
var col=id.split(".")[1];
button.value=Mine[row][col];
button.className="myButton"+button.value;
}else{
for(var i=0;i<Mine.length;i++)
for(var j=0;j<Mine[i].length;j++){
var button = $(i+"."+j);
if(Mine[i][j]=="雷"){
button.value=Mine[i][j];
button.className="myButton_";
}
}
}
}
/**
* 当点击的区域为空白区域时调用的下面的函数将与该区域相连的空白区域都显示出来
*/
function showSpace(object){
var id=object.id;
var button=document.getElementById(id);
var cols=Mine.length;
var rows=Mine.length;
var mark=0;
while(mark<cols){
for(var i=0;i<cols;i++)
for(var j=0;j<rows;j++){
var button2 = $(i+"."+j);
if(button2.value=="0"){
//判断左上
if((i-1>=0)&&(j-1>=0)){
var but=$((i-1)+"."+(j-1));
but.value=(Mine[i-1][j-1]=="雷") ? "" : Mine[i-1][j-1];
but.className="myButton"+but.value;
}
//判断正上
if(i>=1){
var but=$((i-1)+"."+(j));
but.value=(Mine[i-1][j]=="雷") ? "" : Mine[i-1][j];
but.className="myButton"+but.value;
}
//判断右上
if((i-1>=0)&&(j<=cols-2)){
var but=$((i-1)+"."+(j+1));
but.value=(Mine[i-1][j+1]=="雷") ? "" : Mine[i-1][j+1];
but.className="myButton"+but.value;
}
//判断左边
if(j>=1){
var but=$((i)+"."+(j-1));
but.value=(Mine[i][j-1]=="雷") ? "" : Mine[i][j-1];
but.className="myButton"+but.value;
}
//判断右边
if(j<=cols-2){
var but=$((i)+"."+(j+1));
but.value=(Mine[i][j+1]=="雷") ? "" : Mine[i][j+1];
but.className="myButton"+but.value;
}
//判断左下
if((i<=rows-2)&&(j-1>=0)){
var but=$((i+1)+"."+(j-1));
but.value=(Mine[i+1][j-1]=="雷") ? "" : Mine[i+1][j-1];
but.className="myButton"+but.value;
}
//判断正下
if(i<=rows-2){
var but=$((i+1)+"."+(j));
but.value=(Mine[i+1][j]=="雷") ? "" : Mine[i+1][j];
but.className="myButton"+but.value;
}
//判断右下
if((i<=rows-2)&&(j<=cols-2)){
var but=$((i+1)+"."+(j+1));
but.value=(Mine[i+1][j+1]=="雷") ? "" : Mine[i+1][j+1];
but.className="myButton"+but.value;
}
}
}
mark++;
}
}
/**
* 3月18日在showSpace()方法的基础上使用递归算法改进的，速度快了很多。
*/
function showSpace2(object){
var id=object.id;
var row=parseInt(id.split(".")[0]);
var col=parseInt(id.split(".")[1]);
//alert(row+"."+col);
var cols=Mine.length;
var rows=Mine.length;
//判断左上
if((row-1>=0)&&(col-1>=0)){
var but=$((row-1)+"."+(col-1));
if(but.value!="0"){
but.value=(Mine[row-1][col-1]=="雷") ? "" : Mine[row-1][col-1];
but.className="myButton"+but.value;
if(but.value=="0"){
showSpace2(but);
}
}
}
//判断正上
if(row>=1){
var but=$((row-1)+"."+(col));
if(but.value!="0"){
but.value=(Mine[row-1][col]=="雷") ? "" : Mine[row-1][col];
but.className="myButton"+but.value;
if(but.value=="0"){
showSpace2(but);
}
}
}
//判断右上
if((row-1>=0)&&(col<=cols-2)){
var but=$((row-1)+"."+(col+1));
if(but.value!="0"){
but.value=(Mine[row-1][col+1]=="雷") ? "" : Mine[row-1][col+1];
but.className="myButton"+but.value;
if(but.value=="0"){
showSpace2(but);
}
}
}
//判断左边
if(col>=1){
var but=$((row)+"."+(col-1));
if(but.value!="0"){
but.value=(Mine[row][col-1]=="雷") ? "" : Mine[row][col-1];
but.className="myButton"+but.value;
if(but.value=="0"){
showSpace2(but);
}
}
}
//判断右边
if(col<=cols-2){
var but=$((row)+"."+(col+1));
if(but.value!="0"){
but.value=(Mine[row][col+1]=="雷") ? "" : Mine[row][col+1];
but.className="myButton"+but.value;
if(but.value=="0"){
showSpace2(but);
}
}
}
//判断左下
if((row<=rows-2)&&(col-1>=0)){
var but=$((row+1)+"."+(col-1));
if(but.value!="0"){
but.value=(Mine[row+1][col-1]=="雷") ? "" : Mine[row+1][col-1];
but.className="myButton"+but.value;
if(but.value=="0"){
showSpace2(but);
}
}
}
//判断正下
if(row<=rows-2){
var but=$((row+1)+"."+(col));
if(but.value!="0"){
but.value=(Mine[row+1][col]=="雷") ? "" : Mine[row+1][col];
but.className="myButton"+but.value;
if(but.value=="0"){
showSpace2(but);
}
}
}
//判断右下
if((row<=rows-2)&&(col<=cols-2)){
var but=$((row+1)+"."+(col+1));
if(but.value!="0"){
but.value=(Mine[row+1][col+1]=="雷") ? "" : Mine[row+1][col+1];
but.className="myButton"+but.value;
if(but.value=="0"){
showSpace2(but);
}
}
}
}
/**
* 判断是否说有的格子是否都是正确的找出来了
*/
function judge(){
var cols=Mine.length;
var rows=Mine.length;
var allTrue=true;
for(var i=0;i<cols;i++)
for(var j=0;j<rows;j++){
var button = $(i+"."+j);
if(Mine[i][j]=="雷"&&button.value!="确定"){
allTrue=false;
}
else if(Mine[i][j]!="雷"&&button.value!=Mine[i][j]){
allTrue=false;
}
}
if(allTrue){
if(confirm("全部雷已经挖出，你胜利了!重新开始?")){
window.location.reload();
}
}
}
/**
* 选择难度
*/
function selectLevel(level){
if(level=="1"){
Interface(8,6);
}else if(level=="2"){
Interface(12,15);
}else if(level=="3"){
Interface(12,25);
}
}
function $(id){
return document.getElementById(id);
}
- 大小: 36 KB
分享到：
相关推荐
java编写扫雷程序，仿windows扫雷，代码比较简单易懂，结构清晰，在Eclipse可直接运行，调试，方便学习，修改。
通过JS原生实现扫雷游戏，代码已写好注释，通俗易懂、可以选择游戏难度，代码犀利，运行效率高，JS、CSS代码已放到一个html页面、可直接运行
vba编写的扫雷游戏，完全中文界面，简单易懂，代码开源
运用java语言编写的扫雷游戏，简单易懂。
一个简单的扫雷程序 虽然简单 但是任然需要很深的基本功
win32编写的扫雷, 简单易懂， 没有任何库， 纯win32 SDK编写
这是一款简洁的jquery游戏，代码简洁易懂，扫雷基本思想全部融入进去了，和电脑自带的扫雷游戏是一个玩法，界面比较好看，所有过程都是动画实现，看上去非常的流畅。兼容性做了ie9 safari chrome opera ff，其中...
用VB写的扫雷游戏代码,大量注释,通俗易懂!编译EXE即可玩游戏.
C语言编写的扫雷游戏，注释详细，浅显易懂，可以参考一下
简单的扫雷，容易上手易懂，希望对大家有所帮助。
该程序使用JAVA语言编写的扫雷程序 非常好用！！！简单易懂~~
c#制作扫雷游戏，代码一一清楚，程序简单易懂。
Android 扫雷游戏+注释 画面精美，逻辑易懂是Android新手必看的代码之一
一个用c语言编写扫雷游戏源文件！代码简单易懂！
java扫雷简易实例程序,简单易懂,没有界面复杂代码
简易VHDL编写的数字秒表简易VHDL编写的数字秒表简易VHDL编写的数字秒表简易VHDL编写的数字秒表简易VHDL编写的数字秒表简易VHDL编写的数字秒表简易VHDL编写的数字秒表
扫雷游戏源码+扫雷游戏图片+扫雷游戏声音资源+编译好的程序（童叟无欺） 编译条件： 项目名称：C++/C语言编程扫雷游戏 开发环境：devc++ 优化级别：自动 C++标准：ISOC++11 外部库：EGE 扫雷游戏规则： 扫雷一共有...
C# 编写的简单易懂的串口通讯代码带CRC校验 带详细的注释.docxC# 编写的简单易懂的串口通讯代码带CRC校验 带详细的注释.docx
这是一套Java课设合集，包含了迷宫游戏、拼图游戏、扫雷游戏和日历。这些游戏和工具都具有独特的风格和特点，展示了Java编程语言的强大功能和灵活性。 相关的介绍放在这里了，大家可以进入这里观看： ...