黑马程序员——自己写的一个网页版的简单五子棋
2013-01-25 15:01
375 查看
-------android培训、java培训、期待与您交流! ----------
根据毕老师的HTML+CSS+JavaScript教程和下载的一些文档介绍自己在手机上写出来的一个简单五子棋,很简单的功能,许多功能都没有实现,写的过程中也遇到很多问题,现在的代码中也存在一些问题,比如电脑下棋时没有下到最右边和最下边,改来改去也还没试出电脑下最右边和最下边一排的情况,但每一个字符都是自己敲出来的,清楚他们的功能,还是很有成就感的!先看下概貌吧!
上代码
根据毕老师的HTML+CSS+JavaScript教程和下载的一些文档介绍自己在手机上写出来的一个简单五子棋,很简单的功能,许多功能都没有实现,写的过程中也遇到很多问题,现在的代码中也存在一些问题,比如电脑下棋时没有下到最右边和最下边,改来改去也还没试出电脑下最右边和最下边一排的情况,但每一个字符都是自己敲出来的,清楚他们的功能,还是很有成就感的!先看下概貌吧!
上代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><!--头部标签开始--> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> /*CSS区域*/ table{ border: red 2px solid; border-collapse: collapse; text-align: center; } td,th{ border: red 1px solid; padding: 5, 10, 5, 10; } </style> <script type="text/javascript"> /*javascript区域*/ var BOARD_SIZE = 9; var board = new Array(); var s = ""; function play() { if (board.length != 0) { alert("游戏已经开始了,点击“重新开始”开始新游戏"); return; } init(); show(); } function init() { // s = ""; board = new Array() for (var i=0; i<BOARD_SIZE; i++) { // s += ((i+1)+' '); board[i] = new Array(); for (var j=0; j<BOARD_SIZE; j++) { board[i][j] = "┼"; // s += board[i][j]; } // s += "<br />"; } // s += " "; // for (var k=1; k<10; k++) { // s += " "+k; } //alert(s); } function getBoard() { return board; } //var flag = false; //电脑没下呢 电脑调用setChess又执行了computerDo function setChess(pos, chessMan) { if (!pos) { return; } board[pos[0]][pos[1]] = chessMan; show(); if (chessMan=='●') { computerDo(); } /* if (flag) { return; } flag = false; if (!flag) { computerDo(); } else flag = false; */ } function computerDo() { var x = parseInt(Math.random()*(BOARD_SIZE)); var y = parseInt(Math.random()*(BOARD_SIZE)); alert("Computer:"+x+"---"+y); while (!checkPos(x+"", y+"") || hasChess(x-1,y-1)) { x = parseInt(Math.random()*(BOARD_SIZE)); y = parseInt(Math.random()*(BOARD_SIZE)); alert("Computer:"+x+"---"+y); } var pos = [x-1, y-1]; setChess(pos, "○"); } function show() { s = ""; var node = document.getElementById("boardspan"); for (var i=0; i<BOARD_SIZE; i++) { s += ((i+1)+' '); for (var j=0; j<BOARD_SIZE; j++) { s += board[i][j]; } s += "<br />"; } s += " "; for (var k=1; k<10; k++) { s += " "+k; } node.innerHTML = s; } function rePlay() { init(); show(); } function getPos() { var pos = new Array(); var x = document.getElementById("posx").value; var y = document.getElementById("posy").value; if (!checkPos(x, y)) { alert("输入位置有误,请重新输入!"); return; } pos[0] = x - 1; pos[1] = y - 1; if (hasChess(pos[0], pos[1])) { alert("该位置已有棋子,请重新输入!"); return; } /*/防止电脑调用setChess时自动调用 document.getElementById("posx").value = ""; document.getElementById("posy").value = ""; */ //alert(pos[0] + "::" + pos[1]); return pos; } function hasChess(x, y) { return (board[x][y]!='┼')?true:false; } function checkPos(x, y) { var reg = "^[1-9]{1}$"; return (x.match(reg)&&y.match(reg))?true:false; } </script> </head><!--头部标签结束--> <body><!--主体标签开始--> <!--注释区域--> <table> <th colspan=3 style="font-size:24; color:green">五子棋</th> <tr> <td colspan=3> <span id="boardspan"> 棋盘显示区 </span> </td> </tr> <tr> <td rowspan=2>落子位置</td> <td>横向:<input type="text" id="posx" size=4 /></td> <td rowspan=2><input type="button" value="确定" onclick="setChess(getPos(), '●')"</td> <tr> <td>竖向:<input type="text" id="posy" size=4 /></td> </tr> </tr> <tr> <th><input type="button" value="开始游戏" onclick="play()" /></th> <th colspan=2><input type="button" value="重新开始" onclick="rePlay()" /></th> </tr> </table> </body><!--主体标签结束--> </html>
相关文章推荐
- 在自己的电脑上通过IIS发布一个网页
- 用程序来控制一个网页,实现自己主动输入等操作
- webView 无限进入,点击返回,返回到网页的上一个页面,当无返回时,返回到自己的页面
- 怎样把自己培养成为一个优秀的程序员
- 博客的开始,介绍一些自己,我是这样的一个程序员
- 一个跨界程序员:不务正业的这几年,我如何让自己的收入翻了十倍(转)
- 一个独立程序员对自己近九个月工作生活的回顾
- 在自己的电脑上通过IIS发布一个网页
- 一个喜欢网页设计的程序员
- 今天在CSDN发表了一水贴."自己离一个称职的程序员差得太远了"
- 弄到现在才知道网页没有combobox,弄网上的服务器控件不方便,自己用textbox+dropdownlist用CSS组合起一个简单的combobox效果。
- 程序员优秀不在于他知道多少种语言,在于他做出来的东西的价值以及对他自己、同事、团队、公司以及社会的贡献,顶尖的人应能带领一个团队完成一件或多件对社会有促进意义的事情。
- 作为一个菜鸟程序员给自己的十八条忠告-----与君共勉
- 搭建一个自己的导航网页
- 怎样把自己培养成为一个优秀的程序员
- 一个老程序员PHP程序员说的话(谨以此片时刻提醒自己)
- java 程序员的几个级别,仅用于学习过程中的对自己的一个定位
- 程序员跳槽应给自己一个缓冲期
- 【转】作为一个程序员,进步完全取决自己
- 我想我现在应该做的不是瞻前顾后,而是活在当下,看清自己,做好自己现在的工作,踏踏实实的做一个程序员。