</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">
<head>
<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>
</head>
<body οnlοad="startLoad()" style="padding:0px;margin:0px">
<canvas width="1024" id="canvas" οnmοusedοwn="play(event)" height="768">
</canvas>
</body>
</html>
后台的绘制背景的js代码,不得不说canvas真是一个好东西
function drawRect() {
//创建棋盘背景
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.fillStyle = '#FFA500';
context.fillRect(0, 0, 1024, 768);
//标题
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);
contex