用javascript实现五子棋(一)

最新推荐文章于 2024-06-27 10:26:13 发布

show_me_the_world

最新推荐文章于 2024-06-27 10:26:13 发布

阅读量2.5w

点赞数 11

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

本文链接：https://blog.csdn.net/show_me_the_world/article/details/48884841

版权

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

摘要由CSDN通过智能技术生成

</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

最低0.47元/天解锁文章

show_me_the_world

关注

11
点赞
踩
51

收藏

觉得还不错? 一键收藏
0
评论
用javascript实现五子棋(一)

大学毕业进了公司学了几个月的web开发,只会用jquery做事,但是又不甘心,又想要深入的学习一下js,但是无论怎么学都感觉自己抓不到要领。于是决定通过写js游戏来锻炼一下自己。一、游戏背景画面既然是锻炼js能力，用图片当背景怎么行，这里我选择了html5的canvas标签来绘制五子的整个背景，html代码如下五子棋游戏后台的绘制背
复制链接

扫一扫

专栏目录