用javascript实现五子棋(一)

最新推荐文章于 2025-07-12 16:27:32 发布

show_me_the_world

最新推荐文章于 2025-07-12 16:27:32 发布

阅读量2.6w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js 五子棋游戏 html5 canvas cookie

本文链接：https://blog.youkuaiyun.com/show_me_the_world/article/details/48884841

本文介绍如何利用JavaScript实现五子棋游戏。通过监听点击事件获取棋盘坐标，然后根据规则判断放置黑棋或白棋，并使用canvas绘制棋子。同时，文中还涉及到cookie的设置、获取和删除，以实现游戏状态的保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</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 onload="startLoad()" style="padding:0px;margin:0px">
    <canvas width="1024" id="canvas" onmousedown="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);
  context.strokeText('后手，任何一方形成五子连', 750