&/pre&大学毕业进了公司学了几个月的web开发,只会用jquery做事,但是又不甘心,又想要深入的学习一下js,但是无论怎么学都感觉自己抓不到要领。于是决定通过写js游戏来锻炼一下自己。&p&&/p&&p&一、游戏背景画面&/p&&p&&span style="white-space:pre"&&/span&既然是锻炼js能力，用图片当背景怎么行，这里我选择了html5的canvas标签来绘制五子的整个背景，html代码如下&/p&&p&&/p&&pre name="code" class="html"&&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&script type="text/javascript" src="Gomoku-1.2.js"&&/script&
&script type="text/javascript" src="AI-1.2.js"&&/script&
&title&五子棋游戏&/title&
&body onload="startLoad()" style="padding:0margin:0px"&
&canvas width="1024" id="canvas" onmousedown="play(event)" height="768"&
后台的绘制背景的js代码,不得不说canvas真是一个好东西
function drawRect() {
//创建棋盘背景
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.fillStyle = '#FFA500';
context.fillRect(0, 0, );
context.fillStyle = '#00f';
context.font = '40px Arial';
context.strokeText('我的JS五子棋', 330, 50);
context.strokeRect(790, 140, 120, 30);
context.fillStyle = '#00f';
context.font = '25px Arial';
context.strokeText('再来一局', 800, 165);
//游戏说明
context.fillStyle = '#00f';
context.font = '15px Arial';
context.strokeText('游戏规则：玩家执黑色', 780, 200);
context.strokeText('棋子先手，电脑执白色棋子', 750, 220);
context.strokeText('后手，任何一方形成五子连', 750, 240);
context.strokeText('珠，游戏终止。', 750, 260);
//棋盘纵横线
for (var i = 1; i & 16; i++) {
context.beginPath();
context.moveTo(40 * i+140, 80);
context.lineTo(40 * i+140, 640);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(180, 40 * i+40);
context.lineTo(740, 40 * i+40);
context.closePath();
context.stroke();
有了游戏背景了,现在应该想怎么实现它了吧，首先应该是有一个点击事件，当我们点击棋盘某个位置的时候，能够在这个位置画出一个棋子
思路是通过点击获取坐标，在根据这个坐标画出棋子就可以了
/**鼠标点击事件
{[type]} e [description]
* @return {[type]}
[description]
function play(e) { //鼠标点击时发生
var px = e.clientX -160;//减去160是因为canvas画布中棋盘第一根线距离左边是180的距离,再以每个横纵交点为圆心20px的范围内点击视为有效点击
var py = e.clientY - 60;//同上
var x = parseInt(px / 40);
var y = parseInt(py / 40);
isNewGame(e.clientX, e.clientY); //是否点击了newgame
if (px & 0 || py & 0 || x & 14 || y & 14 || chessData[x][y] != 0) { //鼠标点击棋盘外的区域不响应
doCheck(x, y);
} isNewGame(e.clientX, e.clientY);可以看到上面isNewGame()就是判断一下点击区域，如果在这个范围内，就触发location.reload()事件,说简单点就是刷新一下浏览器
doCheck是判断在该处到底应该下什么棋子，黑的还是白的，画棋子的就是用canvas画个圆再填充黑色或者白色的过程
/**根据颜色和传入的坐标,绘制棋子
function chess(color, x, y) {
context.fillStyle = //绘制黑棋
context.beginPath();
context.arc(x * 40 + 180, y * 40 + 80, 15, 0, Math.PI * 2, true);
context.closePath();
context.fill();
if (color == "white") {
console.log("电脑在" + x + "," + y + "画了个白棋");//console.log仅仅是为了调试方便
chessData[x][y] = 1;//chessDate存储棋盘棋子的信息
console.log("电脑在" + x + "," + y + "画了个黑棋");
chessData[x][y] = 2;
}下棋的功能解决了,怎么判断输赢呢,非常简单,每次画完棋子之后,设置一个变量count,从该位置出发向八个方向搜索，遇到空格或不同色棋子返回，遇到同色棋子count+1，当一个方向上的count==5时游戏结束
/**判断此局游戏是否已有结果
* 每次落子判断游戏是否胜利
function isWin(color, x, y) {
console.log("判断" + color + "(" + x + "," + y + ")是否胜利");
var temp = 2; //默认为黑色
if (color == "white") {
console.log("temp=" + temp);
lrCount(temp, x, y);
tbCount(temp, x, y);
rtCount(temp, x, y);
rbCount(temp, x, y);
function lrCount(temp, x, y) {
var line = new Array(4);
var count = 0;
for (var i = i &= 0; i--) {
if (chessData[i][y] == temp) {
for (var i = i &= 14; i++) {
if (chessData[i][y] == temp) {
success(line[0], line[1], line[2], line[3], temp, --count);
function tbCount(temp, x, y) {
var line = new Array(4);
var count = 0;
for (var i = i &= 0; i--) {
if (chessData[x][i] == temp) {
for (var i = i &= 14; i++) {
if (chessData[x][i] == temp) {
success(line[0], line[1], line[2], line[3], temp, --count);
function rtCount(temp, x, y) {
var line = new Array(4);
var count = 0;
for (var i = x, j = i &= 14 && j &= 0;) {
if (chessData[i][j] == temp) {
for (var i = x, j = i &= 0 && j &= 14;) {
if (chessData[i][j] == temp) {
success(line[0], line[1], line[2], line[3], temp, --count);
function rbCount(temp, x, y) {
//右下斜判断
var line = new Array(4);
var count = 0;
for (var i = x, j = i &= 0 && j &= 0;) {
if (chessData[i][j] == temp) {
for (var i = x, j = i &= 14 && j &= 14;) {
if (chessData[i][j] == temp) {
success(line[0], line[1], line[2], line[3], temp, --count);
/**判断是否胜利及胜利之后的操作
{[type]} turn
[description]
{[type]} count [description]
* @return {[type]}
[description]
function success(a, b, c, d, temp, count) {
if (count == 5) { //因为落子点重复计算了一次
console.log("此局游戏结束啦");
console.log("(" + a + "," + b + ")" + "到" + "(" + c + "," + d + ")");
context.beginPath();
context.lineWidth = 5;
context.strokeStyle = 'purple';
context.moveTo(40 * a + 180, 40 * b + 80);
context.lineTo(40 * c + 180, 40 * d + 80);
context.closePath();
context.stroke();
winner = "黑棋胜利!";
if (temp == 1) {
winner = "白棋胜利!";
alert(winner);
}到这里，一个js写的五子棋完成了，但是为了充分锻炼js的能力，我在js里加入了对cookie的使用，实现了静态html对游戏进度的保存，切记chrome里这是不实用的，一般来说一个cookie能够保存4kb的内容，同域名能够保存50个cookie；所以cookie还是挺有用的，美中不足的是这个游戏好像只能自己跟自己玩，下一章说说怎么写五子棋AI.
给出cookie的设置。获取。删除
/**使用cookie保存棋盘信息，防止不小心关闭网页
* @param {[type]} name
[description]
* @param {[type]} value [description]
* @param {[type]} time
[description]
function setCookie(name, value, time) {
var exp = new Date();
exp.setTime(exp.getTime() + time * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
/**获取cookie，初始化棋盘
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
/**删除cookie
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
详细见源码，下载地址http://pan.baidu.com/s/1sjONm01
js实现的简单五子棋游戏
HTML5小游戏之五子棋
javascript绘制五子棋棋子
关于AS3.0 五子棋悔棋功能和五子棋复盘功能的实现
javascript实现五子棋代码
javascript五子棋
没有更多推荐了，其他回答(2)
这个最好分开放，如果函数名不同可以放在一个JS文件中，但像这种页面加载处理函数（三个形式相同）可能会出问题（如果有多个页面加载函数，Jquery好像是都执行，这样就会出错）
收获园豆：4
园豆：16521
园豆：16521
三个页面不同的加载函数怎么能放到一起呢，就算语法不会出错，放到一起逻辑也错了。
收获园豆：4
园豆：40785
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。怎样让js只在第一次加载界面的时候执行
<a data-traceid="question_detail_above_text_l&&
就是在每一个人第一次打开页面的时候才执行，以后就不在执行了
以下是问题补充：
：开发phonegap的android应用，希望大家不吝赐教！呵呵
--- 共有 1 条评论 ---
是来开发phonegap的android应用的，cookie可以吗？另外，能否再详细的说一下呢？呵呵 如果有时间的话，给个具体的例子就更感谢了嘿嘿
用一个hidden来保存是否是第一次加载的值,如果是第一次加载，则操作
--- 共有 2 条评论 ---
两位确定吗?
是隐藏表单域,对吗？
onload事件
那就给每个用户一个标示，根据表示判断是否加载。
cookie啊，onload刷新就执行
--- 共有 1 条评论 ---
在数据库里面做个访问标记，
用户请求这个页面时候，后台查看这个标记，如果是1，就是第一次访问，就把这段js输出，然后设置成2。
最简单的想法。
if (document.cookie == &&){
这种处理方式和防止表单重复提交的做法类似。我想在一个表格里面特定的tr后面增加一行，用javascript应该如何做_百度知道
该问题可能描述不清，建议你
我想在一个表格里面特定的tr后面增加一行，用javascript应该如何做
&#xe6b9;答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
yanzilisan183
来自电脑网络类芝麻团
yanzilisan183
采纳数：3941
获赞数：9939
参与团队：
给你个简单的示例吧&body&&table id=&tab&&
&tr&&td&0&/td&&/tr&
&tr id=&x&&&td&1 在此行下插入新行&/td&&/tr&
&tr&&td&2&/td&&/tr&&/table&&br&&input type=&button& onclick=&javascript:instTR()& value=&插入行&&&script type=&text/javascript&&function instTR(){
var tab=document.getElementById(&#39;tab&#39;);
var n=document.getElementById(&#39;x&#39;).rowIndex+1;
var tr=tab.insertRow(n);
var td=tr.insertCell(0);
td.innerHTML=&#39;new &#39;+Math.random();}&/script&&/body&
来自电脑网络类芝麻团
采纳数：86
获赞数：318
参与团队：
用JQuery吧&table id=&tid&&
&td&test&/td&
&/tr&&/table& js: var trHtml = &&tr&&td&test1&/td&&/tr&&;$(&#tbOption&).append(trHtml );
采纳数：19
获赞数：163
擅长：暂未定制
jQuery(&特定的tr
id&).append(&tr的内容&)
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
小白求问，jquery平时应用多吗，比如在一个项目中，一般选择原生js还是jq？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
简单的来说，应用的很多。jquery可以说是浏览器端开发最出名的JS库，任何一个前端开发都要面对多个浏览器，以及多个版本之间的兼容问题，比如Ajax请求在不同浏览器内的实现是不同的，而jquery实现了统一的代码，给开发者带来极大的方便。类似的还有很多，比如jquery给前端开发者带来了再不同平台上（桌面，触屏等）统一的事件处理机制，这样能把前端工程师从繁重的兼容性劳动中解脱出来，有更多的时间关注在业务上。当然了，还有jquery对于DOM的修改和对于动画的支持是非常强大得了。
最后，juqery已经发展成了一套完备的社区生态系统，它提供了强大的插件功能，任何开发团队和个人都可以开发基于jquery的插件。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Chrome 有一个插件 wappalyzer
安装好之后，访问任何一个网站，可以看见该网站的所使用的前后端技术，目前插件收集的数据很多，当然有的网站的分析有遗漏。
自己安装好后，访问一些网站，就能大概知道有多少网站用jquery或者其他东西
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
jq用的比较多
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
jquery用的很多……把最基本最常用的东西都整合好了，简化开发。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有些地方还是要用js的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
jq多，但是懂原生也是很必要的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
应用是比较广泛的，无论易用性，兼容性都是比较有优秀的！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我感觉比ng还有用，特别是做界面特效的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
企业级项目的貌似大部分是用原生js，如果快速开发的优先级比较高的话，一般都会用到jquery。
我认为jquery的最大优势在于它封装了大部分函数，方便快速实现想要的功能。而企业级项目用到原生js也是因为jquery的封装，对js需求不高的时候（比如百度这些项目算大了吧），那么jquery相对来说就太大了。当然可能还有其它的优缺点，楼主可以自行Google。
重点： jquery还有一个优点，使用jquery基本不用担心浏览器兼容的问题，加上学习周期比较短吧，适合大众，因此，其实我们浏览的大部分网站都用到了jquery。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不重复造轮子。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。