前段时间开始接触javascript以后，哥们要求我要写点锻炼算法的程序，就要求先写个五子棋，今天五子棋就不给大家贴出来了，有点丢人，呵呵，把后来再写的扫雷贴出来讨论下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Mine Sweeping</title> <style type='text/css'> table { border-collapse: collapse; margin: auto; } </style> <script type='text/javascript' src='jquery-1.4.2.min.js'> </script> <script type='text/javascript'>
//下面这段代码是哥们为了让我理解面向对象的思想，为我随意写的结果，希望我可以改成这样子的，一会我给大家贴出来，自己改的代码。
// /** 游戏 */ // var Game = function(level){ // this.Grenade = function(x,y){ // this.x; // this.y; // } // // this.Map = function(level){ // this.level = level; // this.render = function(){ // //画棋盘,根据Game.prototype.levelInfo 生成面板 // } // this.grenadeMaker = function(){ //// for(var i=0;i<){//进行遍历 根据雷数 随即生成雷 并push入grenadeArray中 //// for(){ //// var g = new Grenade(); //// } //// } // } // } // // this.grenadeArray; // this.map; // // this.start = function(){ // this.grenadeArray = new Array(); // this.map = new this.Map(); // this.map.render(); // this.map.grenadeMaker(); // this.actionHandler(); // } // // this.actionHandler = function(){ // //用户操作的绑定处理 （鼠标单击） // $('map tr td').click(function(){ // //进行点击判断 被点的是雷 还是空白 如果是雷。。。。 如果是空白。。。。 // }); // } // Game.prototype.object = this; // this.start(); // } // Game.prototype.levelInfo = {'easy':'9X9','normal':'16X16','hard':'30X16'}; /**______________________________________________________________ */ /**______________________________________________________________ */ var sweeps = new Array(); var position = new Array(); function getSweeps(x, y){ this.x = x; this.y = y; } var numArr = new Array(); function makeCells(x, y, n){ this.x = x; this.y = y var t = ''; $('#content').html("本局可以用的旗子数目："+n); for (var i = 0; i < x; i++) { t += '<tr>'; for (var j = 0; j < y; j++) { t += '<td id="' + j + '_' + i + '"></td>'; } t += '</tr>'; $('table').html(t); } for (var i = 0; i < x; i++) { sweeps[i] = new Array(); for (var j = 0; j < y; j++) { sweeps[i][j] = 0; } } /** * 随即生成俩个数标记为雷的位置。为了避免重复的出现，将雷得位置存在一个数组里面， * 每一次生成的雷的位置都去遍历整个数组，去比较如果重复的话，则重新生成累的位置 */ while (n > 0) { var num_1 = parseInt(Math.random() * x); var num_2 = parseInt(Math.random() * y); if (position.length != 0) { for (var i = 0; i < position.length; i++) { if (position[i].x != num_1 && position[i].y != num_2) { var lei = new getSweeps(num_1, num_2); position.push(lei); n--; break; } else { continue; } } } else { var lei = new getSweeps(num_1, num_2); position.push(lei); n--; } } // alert(position.length) for (var i = 0; i < position.length; i++) { sweeps[position[i].x][position[i].y] = 1; } } var numFlag=0; $(document).ready(function(){ $('#easy').click(function(){ makeCells(9, 9, 10); numFlag=10; // position.length=0; $('td').css({ "border": "1px solid black", "width": "30px", "height": "30px", "backgroundColor": "#999999" }); }); $('#normal').click(function(){ makeCells(16, 16, 40); numFlag=40; $('td').css({ "border": "1px solid black", "width": "30px", "height": "30px", "backgroundColor": "#999999" }); }); $('#hard').click(function(){ makeCells(22, 22, 99); numFlag=99; $('td').css({ "border": "1px solid black", "width": "30px", "height": "30px", "backgroundColor": "#999999" }); }); $('#restart').click(function(){ window.location.reload(); }); $('#clean').click(function(){ $(this).data('flag',true); }); $('#remove').click(function(){ $(this).data('flag',true); }); $('td').live('mouseover', function(){ if (!$(this).data('flag')) { $(this).css({ "backgroundColor": "#99CCFF" }) } }); $('td').live('mouseout', function(){ if (!$(this).data('flag')) { $(this).css({ "backgroundColor": "#999999" }); } }); /** * 扫雷获胜的条件：插红旗的位置是雷，同时满足红旗数目==雷的数目 * */ $('td').live('click', function(){ var t_x =parseInt($(this)[0].id.split("_")[0]); var t_y =parseInt($(this)[0].id.split("_")[1]); if($('#remove').data('flag')){ $(this).find('img').remove(); $(this).data('qi',false); $('#remove').data('flag',false); // alert($(this).data('qi')); // falseFlagNum--; numFlag++; $('#content').html("本局剩余可用的旗子数目："+(numFlag)); }else{ if($('#clean').data('flag')){ var t ='<img src="flag.gif">' $(this).html(t); numFlag--; $('#content').html("本局剩余可用的旗子数目："+(numFlag)); $(this).data('qi',true); $('#clean').data('flag',false); if(numFlag==0){ alert("You hava no Flag"); } showVictory(t_x,t_y); // alert($(this).data('qi')); }else{ $(this).data('flag', true); $(this).css({ "backgroundColor": "red" }); die(t_x, t_y); getlive(t_x, t_y); } } }); // var falseFlagNum =0; function showVictory(x,y){ // if(sweeps[x][y] !=1&&($('#' + x + '_' + y).data('qi'))){ // falseFlagNum++; // } if(sweeps[x][y] == 1&&($('#' + x + '_' + y).data('qi'))&&numFlag==0){ if(numFlag==0){ alert("YOU ARE WINNER!!"); } } } var n =0;//查看雷的数目； function die(x, y){ if (sweeps[x][y] == 1) { while (position.length > 0) { var sweep = position.pop(); n++; var t_x = parseInt(sweep.x); var t_y =parseInt(sweep.y); $('#' + t_x + '_' + t_y).html("X:"+n);//取到点击处的ID，标记为雷 } alert("Game Over"); } } /** * * @param {Object} x * @param {Object} y * living:是点击当前的位置如果不是雷，则遍历周围八个方向的格子， * 如果八个方向（递归找雷），有雷，则显示雷的个数， * 根据游戏可以得到：点击的时候遍历周围8个方向，（递归遍历）遇到数字则停止即（numSweeps!=0） */ // function living(x, y){ // if (sweeps[x][y] != 1) { // var num = countSweeps(x, y); // if (num != 0) { // $('#' + x + '_' + y).html(num); // }else{ // $('#' + x + '_' + y).html(num); // } // // } // } /** * * @param {Object} x * @param {Object} y * @param {Object} num * 点击当前的给子当前的周围（num==0）没有雷，则将周围的依次遍历开,如果（num!=0）break */ function getlive(x,y){ var num = countSweeps(x, y); if(sweeps[x][y] != 1){ //如果当前的不是雷&&没有标记是雷 $('#' + x + '_' + y).html(num); $('#' + x + '_' + y).data('flag', true); $('#'+x+'_'+y).css({ "backgroundColor": "red" }); if(num ==0){ //如果它的四周不是雷，遍历周围八个方向，同时将每个方向的再做计算() $('#'+x+'_'+y).data('flag_num',true); for (var i = (x - 1); i <= (x + 1); i++) { for (var j = (y - 1); j <=(y + 1) ; j++) { // if((i ==x && j ==y &&(( i<0 )||( i >=sweeps.length)) ||(( j <0) ||(j >= sweeps[i].length))) || ($('#'+i+'_'+j).data('flag_num'))){ // continue; // } if(i==x&&j==y){ continue; } if(i<0||i>=sweeps.length||j<0||j>=sweeps[i].length){ //如果是没有意义的位置，就跳过 continue; } if($('#'+i+'_'+j).data('flag_num')){ //标记如果是遍历过，就跳过 continue; } if($('#'+i+'_'+j).data('qi')){ //标记如果是旗帜就跳过 continue; } getlive(i,j); } } }else{ return false; } } } // function getlive(x,y){ // var num = countSweeps(x,y); // // } /** * * @param {Object} x * @param {Object} y * [x-1][y-1], [x][y-1], [x+1][y-1], * [x-1][y] , [x][y], [x+1][y], * [x-1][y+1], [x][y+1], [x+1][y+1], */ function countSweeps(x, y){ var numSweep = 0; /*** * 学会找错误，这个错误很XXXX */ x = parseInt(x); y = parseInt(y); if (x == 0 && y == 0) { //LeftUp if (sweeps[x][x + 1] == 1) { numSweep++; } if (sweeps[x + 1][y] == 1) { numSweep++; } if (sweeps[x + 1][y + 1] == 1) { numSweep++; } return numSweep; } if (x < sweeps.length - 1 && y == 0) { //Up if (sweeps[x - 1][y] == 1) { numSweep++; } if (sweeps[x - 1][y + 1] == 1) { numSweep++; } if (sweeps[x][y + 1] == 1) { numSweep++; } if (sweeps[x + 1][y] == 1) { numSweep++; } if (sweeps[x + 1][y + 1] == 1) { numSweep++; } return numSweep; } if (x == sweeps.length - 1 && y == 0) { //RightUp if (sweeps[x - 1][y] == 1) { numSweep++; } if (sweeps[x - 1][y + 1] == 1) { numSweep++; } if (sweeps[x][y + 1] == 1) { numSweep++; } return numSweep; } if (x == 0 && y == sweeps[x].length - 1) { //LeftDown if (sweeps[x][y - 1] == 1) { numSweep++; } if (sweeps[x + 1][y - 1] == 1) { numSweep++; } if (sweeps[x + 1][y]) { numSweep++; } return numSweep; } if (x == 0 && y < sweeps[x].length - 1) { //Left if (sweeps[x][y - 1] == 1) { numSweep++; } if (sweeps[x][y + 1] == 1) { numSweep++; } if (sweeps[x + 1][y - 1] == 1) { numSweep++; } if (sweeps[x + 1][y] == 1) { numSweep++; } if (sweeps[x + 1][y + 1] == 1) { numSweep++; } return numSweep; } if ((x < sweeps.length - 1) && (y == sweeps[x].length - 1)) { //Down if (sweeps[x - 1][y - 1] == 1) { numSweep++; } if (sweeps[x - 1][y] == 1) { numSweep++; } if (sweeps[x][y - 1] == 1) { numSweep++; } if (sweeps[x + 1][y - 1] == 1) { numSweep++; } if (sweeps[x + 1][y] == 1) { numSweep++; } return numSweep; } if ((x == sweeps.length - 1) && (y < sweeps[x].length - 1)) { //Right if (sweeps[x - 1][y - 1] == 1) { numSweep++; } if (sweeps[x - 1][y] == 1) { numSweep++; } if (sweeps[x - 1][y + 1] == 1) { numSweep++; } if (sweeps[x][y - 1] == 1) { numSweep++; } if (sweeps[x][y + 1] == 1) { numSweep++; } return numSweep; } if (x == sweeps.length - 1 && y == sweeps[x].length - 1) { //RightDown if (sweeps[x - 1][y - 1] == 1) { numSweep++; } if (sweeps[x - 1][y] == 1) { numSweep++; } if (sweeps[x][y - 1] == 1) { numSweep++; } return numSweep; } else { //others position if (sweeps[x - 1][y - 1] == 1) { numSweep++; } if (sweeps[x - 1][y] == 1) { numSweep++; } if (sweeps[x - 1][y + 1] == 1) { numSweep++; } if (sweeps[x][y - 1] == 1) { numSweep++; } if (sweeps[x][y + 1] == 1) { numSweep++; } if (sweeps[x + 1][y - 1] == 1) { numSweep++; } if (sweeps[x + 1][y] == 1) { numSweep++; } if (sweeps[x + 1][y + 1] == 1) { numSweep++; } return numSweep; } } }); </script> </head> <body> <input id ='easy' type='button' value='easy'><input id ='normal' type='button' value='Normal'><input id ='hard' type='button' value='Hard'> <input id="clean" type='button' value='Make Flag'> <input id="remove" type="button" value="Remove Flag"> <input id='restart'type='button' value='Restart'> <div id="content"></div> <div id="main"> <table> </table> </div> </body> </html>
下面贴出来，我没有改全的代码（用面向对象的想法改写的，如果建议，意见请指正。虚心等待）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> -->
<title>五子棋 面向对象</title>
<style type="text/css">
table {
border-collapse: collapse;
margin: auto;
}
table tr td {
border: 1px solid black;
width: 30px;
height: 30px;
background-color: #999999;
}
</style>
<script type="text/javascript" src="http://www.cnblogs.com/lib/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
/**
* 定义类：Game 属性 level piece map 方法：初始化棋盘，同时布雷 init()，
* 判断获胜的方法getVictory(), 游戏失败的方法getOver(),
*/
function Game(){
/**
* 棋子
* @param {Object} x
* @param {Object} y
*/
this.sweeps = new Array();
this.position = new Array();
this.numFlag = 0;
this.Mine = function(x, y){
this.x = x;
this.y = y;
}
/**
* 初始化游戏
*/
this.init = function(level){
var x = parseInt(level.split("X")[0]);
var y = parseInt(level.split("X")[1]);
var mineNum = parseInt(level.split('X')[2]);
this.numFlag = mineNum;
this.makeMap(x, y, mineNum);
this.makeRandomMine(x, y, mineNum);
this.TdEvent(this.numFlag);
}
/**
*
* @param {Object} x
* @param {Object} y
* @param {Object} mineNum
*/
this.makeMap = function(x, y, mineNum){
var t = '';
$('#content').html("本局可以用的旗子数目：" + mineNum);
for (var i = 0; i < x; i++) {
t += '<tr>';
for (var j = 0; j < y; j++) {
t += '<td id="' + j + '_' + i + '"></td>';
}
t += '</tr>';
$('table').html(t);
}
for (var i = 0; i < x; i++) {
this.sweeps[i] = new Array();
for (var j = 0; j < y; j++) {
this.sweeps[i][j] = 0;
}
}
}
/**
*
*/
this.makeRandomMine = function(x, y, mineNum){
var randNum1 = parseInt(Math.random() * x);
var randNum2 = parseInt(Math.random() * y);
var mine = new this.Mine(randNum1, randNum2);
this.position.push(mine);
mineNum--;
while (mineNum > 0) {
randNum1 = parseInt(Math.random() * x);
randNum2 = parseInt(Math.random() * y);
for (var i = 0; i < this.position.length; i++) {
var num1 = this.position[i].x;
var num2 = this.position[i].y;
if (num1 == randNum1 && num2 == randNum2) {
continue;
}
}
var mine = new this.Mine(randNum1, randNum2);
this.position.push(mine);
mineNum--;
}
}
/**
* mine 的位置
*/
this.minePositon = function(){
for (var i = 0; i < this.position.length; i++) {
alert(this.position[i].x + ':' + this.position[i].y);
}
}
this.TdEvent = function(numFlag){
$('td').live('click', function(){
var t_x = parseInt($(this)[0].id.split("_")[0]);
var t_y = parseInt($(this)[0].id.split("_")[1]);
if ($('#remove').data('flag')) {
$(this).find('img').remove();
$(this).data('qi', false);
$('#remove').data('flag', false);
numFlag++;
$('#content').html("本局剩余可用的旗子数目：" + (numFlag));
}
else {
if ($('#clean').data('flag')) {
var t = '<img src="flag.gif">'
$(this).html(t);
numFlag--;
$('#content').html("本局剩余可用的旗子数目：" + (numFlag));
$(this).data('qi', true);
$('#clean').data('flag', false);
if (numFlag == 0) {
alert("You hava no Flag");
}
this.showVictory(t_x, t_y);
}
else {
$(this).data('flag', true);
$(this).css({
"backgroundColor": "red"
});
this.die(t_x, t_y);
this.getlive(t_x, t_y);
}
}
});
$('td').live('mouseover', function(){
if (!$(this).data('flag')) {
$(this).css({
"backgroundColor": "#99CCFF"
})
}
});
$('td').live('mouseout', function(){
if (!$(this).data('flag')) {
$(this).css({
"backgroundColor": "#999999"
});
}
});
}
this.getVictory = function(x,y){
}
this.getlive = function(x,y){
}
this.die = function(x,y){
}
}
Game.prototype.levelInfo = {
easy: '9X9X10',
normal: '16X16X40',
hard: '22X22X99'
};
$(document).ready(function(){
$('input').live('click', function(){
var level = $(this).get(0).id;
var game = new Game();
level = game.levelInfo[level];
game.init(level);
});
});
</script>
</head>
<body>
<input id ='easy' type='button' value='easy'><input id ='normal' type='button' value='Normal'><input id ='hard' type='button' value='Hard'><input id="clean" type='button' value='Make Flag'><input id="remove" type="button" value="Remove Flag"><input id='restart'type='button' value='Restart'>
<div id="content">
</div>
<div id="main">
<table>
</table>
</div>
</body>
</html>
走在路上的感觉
