HTML部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五子棋小游戏</title><link rel="stylesheet" type="text/css" href="./css/css.css">
</head><body><canvas id="chess" width="450px" height="450px"></canvas><script type="text/javascript" src="./js/script.js"></script>
</body></html>

JS 部分

// 轮流下棋
var me = true;
// 二维数组存储落子情况，不可重复落子
var chessBoard = [];
for (var i = 0; i < 15; i++) {chessBoard[i] = [];for (j = 0; j < 15; j++) {// 0为没有落子chessBoard[i][j] = 0;}
}
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
// 变颜色
context.strokeStyle = "#BFBFBF";
// 画背景图
var logo = new Image();
logo.src = "./img/logo.jpg";
// 图片加载完之后调用方法才能显示
logo.onload = function () {context.drawImage(logo, 0, 0, 450, 450);drawChessBoard();
}var drawChessBoard = function () {//画布是450*450  15个交叉点，14个间隔 每个间隔30像素两边留白15像素for (var i = 0; i < 15; i++) {// 竖线context.moveTo(15 + i * 30, 15);context.lineTo(15 + i * 30, 435);context.stroke();// 横线context.moveTo(15, 15 + i * 30);context.lineTo(435, 15 + i * 30);context.stroke();}
}
// ij是棋盘索引 me是白棋黑棋
var oneStep = function (i, j, me) {// 画棋子、画圆context.beginPath() context.closePath();context.beginPath();// arc画扇形 参数，起始位置 半径13 扇形弧度 0 2πcontext.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// stroke描边context.stroke();context.closePath();// 设置黑子渐变 createRadialGradient参数 第一个圆原线性坐标 半径13 和第二个圆  黑旗颜色0A0A0A黑色var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);if (me) {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) {oneStep(i, j, me);// 黑棋为1，白棋为2if (me) {chessBoard[i][j] = 1;} else {chessBoard[i][j] = 2;}// 交替颜色me = !me;}}// 对角线
// context.moveTo(0, 0);
// context.lineTo(450, 450);
// context.stroke();

CSS 部分

canvas{display: block;margin:50px auto;box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #bb99bb;
}

实现效果

前端实现五子棋小游戏1（本地双人对战）相关推荐

前端实现五子棋小游戏2（AI实现人机对战）
通过一个简单的算法,来实现AI智能对弈的五子棋小游戏 AI难点解析赢法数组赢法的统计数组判断胜负计算机的落子规则代码实现赢法数组赢法种类的索引横线赢法竖线赢法横线赢法斜线赢法反 ...
用javascript+jquery编写的小游戏-贪吃蛇(双人对战版)
前言这是我在多年前初学jquery, 并结合javascript, 编写的一个小游戏.那洋洋洒洒几千行的js代码时刻提醒着我"不忘初心!". 效果演示代码引入文件由于用到了 ...
【Verilog】基于FPGA的五子棋小游戏（VGA显示、双人对战、胜负判别、附完整代码）
基于FPGA的五子棋小游戏有一些说明: 1.本文是基于VGA的显示小游戏,主要为VGA显示的拓展应用: 2.为适应不同显示屏的分辨率,棋盘确定为10X10的黑线白底的方格: 3.下棋主要用棋格颜色变 ...
C语言---简单五子棋小游戏
效果图如下: 设计思路: 棋盘设计为15×15格,初始状态光标在棋盘的中央,白棋先走,轮流落子,当一方连成五子或下满棋盘时,游戏结束(连成五子的一方获胜,下满棋盘为和棋).当游戏一方胜利后显示胜利信息 ...
C++实现五子棋小游戏（源代码）
>求关注,求点赞,求评论< Thanks♪(･ω･)ﾉ这次发个简单的废话不多说下为代码☟☟☟ #include <iostream> #include <conio ...
AI版的五子棋小游戏
AI版的五子棋小游戏内容简介本项目实现的五子棋博弈游戏是基于AI的五子棋游戏.游戏模式可以分为人机对弈和双人对弈两种模式.本程序采用基于启发式max/min算法的alpha-beta剪枝技术来选择 ...
基于flask的五子棋小游戏
基于flask的五子棋小游戏前言首先说明一下,本人方向是java后端,只因老师布置了一个作业,要用flask来做一个五子棋,没办法被逼上梁山,程序不太美观,但是应付作业还是够了的. 废话不 ...
Python：五子棋小游戏
临近期末考试,班主任把所有的不参与考试的副科课程全都停了,天天语数外历史物理,实在是无聊,同学们便在课间互相约战五子棋,棋盘便是平时写作业用的玛丽大号写字本,棋子就是xo,不到两个星期,我就成功地用完 ...
面向对象程序设计（Java）课程设计——五子棋小游戏
目录一.团队成员及任务二.项目简介三.功能设计图四.运行结果截图五.核心源码六.课程设计感想与展望一.团队成员及任务队长:管俊杰计科(智能)22-1 202203200037 负责 ...

前端实现五子棋小游戏1（本地双人对战）

运用canvas写一个本地五子棋小游戏

HTML部分

JS 部分

CSS 部分

实现效果

前端实现五子棋小游戏1（本地双人对战）相关推荐

最新文章

热门文章