用javascript实现五子棋(一)

本文介绍如何利用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
  • 11
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用JavaScript实现五子棋游戏的示例代码: ```javascript // 定义棋盘大小 var ROWS = 15; var COLS = 15; // 定义棋盘数组 var chessBoard = []; // 定义当前玩家 var curPlayer = 1; // 初始化棋盘数组 for (var i = 0; i < ROWS; i++) { chessBoard[i] = []; for (var j = 0; j < COLS; j++) { chessBoard[i][j] = 0; } } // 获取棋盘元素 var chess = document.getElementById('chess'); var context = chess.getContext('2d'); // 绘制棋盘 function drawChessBoard() { for (var i = 0; i < ROWS; i++) { context.moveTo(15, 15 + i * 30); context.lineTo(435, 15 + i * 30); context.stroke(); context.moveTo(15 + i * 30, 15); context.lineTo(15 + i * 30, 435); context.stroke(); } } // 绘制棋子 function drawChessPiece(i, j, player) { context.beginPath(); context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI); context.closePath(); var gradient = context.createRadialGradient( 15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0 ); if (player === 1) { gradient.addColorStop(0, '#0a0a0a'); gradient.addColorStop(1, '#636766'); } else { gradient.addColorStop(0, '#d1d1d1'); gradient.addColorStop(1, '#f9f9f9'); } context.fillStyle = gradient; context.fill(); } // 下棋 chess.onclick = function (e) { var x = e.offsetX; var y = e.offsetY; var i = Math.floor(x / 30); var j = Math.floor(y / 30); if (chessBoard[i][j] === 0) { drawChessPiece(i, j, curPlayer); chessBoard[i][j] = curPlayer; if (checkWin(i, j, curPlayer)) { alert('恭喜玩家' + curPlayer + '获胜!'); window.location.reload(); } curPlayer = curPlayer === 1 ? 2 : 1; } }; // 判断胜负 function checkWin(i, j, player) { var count = 0; // 判断横向 for (var k = i; k >= 0; k--) { if (chessBoard[k][j] === player) { count++; } else { break; } } for (var k = i + 1; k < ROWS; k++) { if (chessBoard[k][j] === player) { count++; } else { break; } } if (count >= 5) { return true; } // 判断纵向 count = 0; for (var k = j; k >= 0; k--) { if (chessBoard[i][k] === player) { count++; } else { break; } } for (var k = j + 1; k < COLS; k++) { if (chessBoard[i][k] === player) { count++; } else { break; } } if (count >= 5) { return true; } // 判断左斜向 count = 0; for (var k = i, l = j; k >= 0 && l >= 0; k--, l--) { if (chessBoard[k][l] === player) { count++; } else { break; } } for (var k = i + 1, l = j + 1; k < ROWS && l < COLS; k++, l++) { if (chessBoard[k][l] === player) { count++; } else { break; } } if (count >= 5) { return true; } // 判断右斜向 count = 0; for (var k = i, l = j; k >= 0 && l < COLS; k--, l++) { if (chessBoard[k][l] === player) { count++; } else { break; } } for (var k = i + 1, l = j - 1; k < ROWS && l >= 0; k++, l--) { if (chessBoard[k][l] === player) { count++; } else { break; } } if (count >= 5) { return true; } return false; } // 绘制棋盘 drawChessBoard(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值