10分钟学习简略五子棋 源码+注释教学
JS 实现的一个很简单的 五子棋
大概流程思路：
1.HTML5绘制棋盘
2.初始化二维数组
3.绘制棋子并且对应上二维数组
4.根据数组，计算方向，判别输赢
有bug或者可以改进的地方，亦或者有疑问我能帮上忙，可以加我q565378270，qq群55858402
<body>
<canvas id="mf" width="800" height="800" style="border:1px solid #c3c3c3;"></canvas>
</body>
<script>
WIN=0;
LOSE=0;
NOWPLAYER=1;//1代表白色，0代表黑色；
COUNTER=0;
var canvas=document.getElementById("mf");
var main=canvas.getContext("2d");
for(var sq=0;sq<19;sq++){
var grid=sq*50;
main.moveTo(0,0+grid);
main.lineTo(800,0+grid);
main.moveTo(0+grid,0);
main.lineTo(0+grid,800);
main.stroke();
}
var chessBoard=[];
for(var bx=0;bx<19;bx++){
chessBoard[bx]=[];
for(by=0;by<19;by++){
chessBoard[bx][by]=by;
}
}
console.log(chessBoard);
function drawChess(x,y,playNow,con){
if(con%2==0) {
main.beginPath();
main.arc(x*50+25,y*50+25,20,0,2*Math.PI);
main.stroke();
}else{
main.beginPath();
main.fillStyle="#000000";
main.arc(x*50+25,y*50+25,20,0,2*Math.PI);
main.fill();
}
}
canvas.οnclick=function (e) {
var x=Math.floor(e.offsetX/50);//坐标
var y=Math.floor(e.offsetY/50);
// alert(COUNTER%2);
if(chessBoard[x][y]=="white"||chessBoard[x][y]=="black"){
alert("这里已经有人落子了")
}else{ COUNTER++;
drawChess(x,y,0,COUNTER);//坐标，颜色(多余)，计数器
}
if(NOWPLAYER==0){
chessBoard[x][y]='white';
}else{
chessBoard[x][y]='black';
}
if(COUNTER%2==0){
NOWPLAYER=1
}else{
NOWPLAYER=0
}
judge(x,y,chessBoard,chessBoard[x][y]);
};
function judge(x,y,arr,color){
if(Hjudge(x,y,arr,color)>5||Vjudge(x,y,arr,color)>5||LSjudge(x,y,arr,color)>5||RSjudge(x,y,arr,color)>5){
alert(color+"获胜");
}
}
//水平方向
function Hjudge(x,y,arr,color) {
var count=0;
for(var a=0;a<19;a++){
if(x-a>=0){
if(arr[x-a][y]==color){ //bug 小于0 报错；
count++
}else{
break;
}}
}
for(var b=0;b<19;b++){
if(arr[x+b][y]==color){
count++
}else{
break;
}
}
return count;
}
//垂直方向
function Vjudge(x,y,arr,color) {
var count=0;
for(var a=0;a<19;a++){
if(y-a>=0){
if(arr[x][y-a]==color){
count++
}else{
break;
}}
}
for(var b=0;b<19;b++){
if(arr[x][y+b]==color){
count++
}else{
break;
}
}
return count;
}
//左斜方向
function LSjudge(x,y,arr,color) {
var count=0;
for(var a=0;a<19;a++){
if(x-a>=0&&y-a>=0){
if(arr[x-a][y-a]==color){
count++
}else{
break;
}}
}
for(var b=0;b<19;b++){
if(arr[x+b][y+b]==color){
count++
}else{
break;
}
}
return count;
}
//右斜方向
function RSjudge(x,y,arr,color) {
var count=0;
for(var a=0;a<19;a++){
if(y-a>=0){
if(arr[x+a][y-a]==color){
count++
}else{
break;
}}
}
for(var b=0;b<19;b++){
if(x-b>=0){
if(arr[x-b][y+b]==color){
count++
}else{
break;
}
}}
return count;
}
</script>
-----------------------------
总体思路就是绘制棋盘，二维数组对应棋盘，落子坐标四舍五入，绘制在格子中央，判断各个方向输赢，结束reload。代码也许看上去繁琐。其实作为简单地练手入门并不复杂，有许多可以更进或者bug，大家可以一一指教，本人一定及时更新，若有误人子弟希望见谅并且向我提出，也可以直接联系本人。。愉快分享
转载于:https://www.cnblogs.com/aixu/p/6548124.html
10分钟学习简略五子棋 源码+注释教学相关推荐
- 10分钟搞定kettle源码部署
2019独角兽企业重金招聘Python工程师标准>>> 准备工作,检查编译依赖程序版本,具体版本信息如下 Maven, version 3+ Java JDK 1.8 下载 sett ...
- 用Python几行代码实现简单的人脸识别，10分钟完成（附源码）
前言 今天,我们用Python实现简单的人脸识别技术! Python里,简单的人脸识别有很多种方法可以实现,依赖于python胶水语言的特性,我们通过调用包可以快速准确的达成这一目的.这里介绍的是准确 ...
- 【机器学习】word2vec学习笔记（三）：word2vec源码注释
1. word2vec地址 官网地址:https://code.google.com/archive/p/word2vec/ GitHub地址:https://github.com/tmikolov/ ...
- win10,vs2015深度学习目标检测YOLOV5+deepsort C++多目标跟踪代码实现，源码注释，拿来即用。
打死不用CSDN,整改的太恶心了,发什么都审核不过,各种图片和链接不让发.人如果没有立场那还是人吗?不用CSDN并且博客园就很好! DeepSort纯C++ Yolov5[s,l,m系列],详细讲解- ...
- [C#|Unity3D学习笔记]简易五子棋源码
Unity3d简易五子棋源码 Unity3d部分 对C#源码进行了改写简化: using UnityEngine; using System.Collections;public class ches ...
- java-List集合的源码分析（数据结构方面，源码注释方面），迭代器快速失败机制
List实现了Collection接口,产生三个子类:ArrayList,LinkedList,Vector 文章包含解释方面: 数据结构方面, 源码注释方面&迭代器快速失败机制 方面1-基于 ...
- 点云配准2：icp算法在PCL1.10.0上的实现+源码解析
目录 本文最后实现的配准实例 点云配准系列 准备 程序结构 主程序 1.为什么要降采样 2.体素降采样原理 3.点云更新 icp 配准前的参数设置 icp配准算法内部 对应点对确定(determine ...
- Qt数据库练习之QSqlTableModel的使用（MySql数据库示例，含源码+注释）
文章目录 一.操作示例 1.1 修改记录(数据) 1.2 添加记录(数据) 1.3 删除记录(数据) 1.4 取消操作 1.5 排序操作 1.6 查询操作 二.了解QSqlTableModel 三.源 ...
- 深度学习03-sklearn.LinearRegression 源码学习
在上次的代码重写中使用了sklearn.LinearRegression 类进行了线性回归之后猜测其使用的是常用的梯度下降+反向传播算法实现,所以今天来学习它的源码实现.但是在看到源码的一瞬间突然有种 ...
最新文章
- TCP的协议特点(对于《Linux高性能服务器编程》的部分摘录以及自己的部分见解)
- AndroidStudio中如何打开hierarchyviewer.bat
- leetcode 398. Random Pick Index | 398. 随机数索引（Java）
- 【原】继承AbstractRoutingDataSource再通过AOP实现动态数据源切换
- a label can only be part of a statement and a declaration is not a statement
- 你还不知道怎么退出 Vim？
- 从零开始学PowerShell(2)管道的作用
- jQuery remove()与jQuery empty()的区别
- python简单命令语句_Python语言----linux常用命令（13）
- 学JAVA的为什么_为什么学习Java的人越来越多
- Django 数据库常见 Field Types
- python 浅copy与深copy_python深copy与浅copy的区别
- HCK哈士奇x可口可乐联名潮酷冰吧，你还没入手吗？
- RK987按键失灵问题
- 小米、搜狗、TW等机器学习算法工程师面试总结
- 两个字说清楚编程语言实质－Python基础前传（3）
- 微型计算机补码运算电路特点,二进制数的运算及其加法电路
- 使用CPN Tools工具做简单的登录模型（初学者）
- Pod2g全面回归越狱界 iOS 6越狱曙光来临
- 第一篇博客——自我介绍篇