浏览 6939 次
|
锁定老帖子 主题：JS编写的扫雷游戏（简单易懂）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-03-18
最后修改：2010-03-19
初学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);
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-03-24
最后修改：2010-03-24
IE6 chrome 下字符串有问题 chrome下不能运行js代码
|
| 返回顶楼 | |
|
发表时间：2010-03-30
wgoku 写道 IE6 chrome 下字符串有问题 chrome下不能运行js代码
呃 ·· 这个我倒没注意到呢，我就在ie7下写的哈 |
| 返回顶楼 | |
