Welcome to use MarkDown

	<style type="text/css">
.box{
width: 600px;
height: 600px;
background: url(img/bak.jpg) no-repeat;
background-size: cover;
margin: 30px auto;
border: 1px solid #000000;
}
</style>
		<div class="box">
<canvas id="can" width="600" height="600px"></canvas>
</div>
		<script type="text/javascript">
var maps = [];
for(var i=0;i<15;i++){
maps[i] = [];
for(var j=0;j<15;j++){
maps[i][j] = 0;
}
}
//制作棋盘
var can = document.getElementById("can"); var ctx = can.getContext('2d'); var isblack = true; ctx.strokeStyle ="#000"; for(var i=0;i<15;i++){
for(var j=0;j<15;j++){
ctx.strokeRect(j*40,i*40,40,40)
}
} //制作棋子
var black = new Image();
var white = new Image();
black.src = "img/black.png"
white.src = "img/white.png" can.addEventListener('click',function(ev){
var dx = ev.clientX - can.offsetLeft;
var dy = ev.clientY - can.offsetTop; // console.log(dx,dy) var row =0;
var col =0; if(dx%40<20){
row = Math.floor(dx/40) }else{
row = Math.ceil(dx/40)
} if(dy%40<20){
col = Math.floor(dy/40) }else{
col = Math.ceil(dy/40)
} // console.log(row,col) if(isblack){ ctx.drawImage(black,row*40-20,col*40-20)
isblack = false; maps[row][col] = 2 //黑 iswin(2,row,col)
}else{
ctx.drawImage(white,row*40-20,col*40-20)
isblack = true; maps[row][col] = 1 //白 iswin(1,row,col)
} //判断输赢
function iswin(t,row,col){
var orgrow = row ; //将目标点存起来
var orgcol = col ;
var total =1; //垂直方向
while(col-1>0&&maps[row][col-1] == t){
total++;
col--;
} row = orgrow ;
col = orgcol; while(col+1<15&&maps[row][col+1] == t){ col++;
total++;
}
console.log(total)
if(total>=5){
if(t==1){
setTimeout(function(){alert('白子赢了')},500)
}else{ setTimeout(function(){alert('黑子赢了')},500);
}
} //水平方向
row=orgrow;
col=orgcol;
total=1;
while(row-1>0&&maps[row-1][col]==t)
{
row--;
total++;
}
row=orgrow;
col=orgcol;
while(row+1<15&&maps[row+1][col]==t)
{
row++;
total++;
}
if(total>=5)
{
if(t==1)
alert("白子赢");
else
alert("黑子赢");
} //左下和右上
row = orgrow ;
col = orgcol;
total =1;
while(row+1<15&&col-1>0&&maps[row+1][col-1]==t){
row++;
col--;
total++;
}
row = orgrow ;
col = orgcol;
while(row-1>0&&col+1<15&&maps[row-1][col+1] == t){
row--;
col++;
total++;
}
if(total>=5){
if(t==1){
setTimeout(function(){alert('白子赢了')},500)
}else{ setTimeout(function(){alert('黑子赢了')},500);
}
} //右下和左上
row = orgrow ;
col = orgcol;
total=1;
while(row+1<15&&col+1<15&&maps[row+1][col+1]==t){
row++;
col++;
total++;
}
row = orgrow ;
col = orgcol; while(row-1>0&&col-1>0&&maps[row-1][col-1] == t){
row--;
col--;
total++;
}
if(total>=5){
if(t==1){
setTimeout(function(){alert('白子赢了')},500)
}else{ setTimeout(function(){alert('黑子赢了')},500);
}
}
//至此所有方向游戏都结束呢 } }) </script>

原声js 五子棋 源码的更多相关文章

  1. 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...

  2. [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  3. (原、整)Unreal源码 CoreUbject- Uobject

    (原.整) Unreal源码 CoreUbject- Uobject 类别                    [随笔分类]Unreal源码搬山 @author:白袍小道 随缘那啥 这里还是属于UE ...

  4. 深入Vue.js从源码开始(二)

    从入口开始 我们之前提到过 Vue.js 构建过程,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/en ...

  5. 百度地图整合功能分享修正版[ZMap.js] 实例源码!

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

  6. 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

  7. 深入理解 path-to-regexp.js 及源码分析

    阅读目录 一:path-to-regexp.js 源码分析如下: 二:pathToRegexp 的方法使用 回到顶部 一:path-to-regexp.js 源码分析如下: 我们在vue-router ...

  8. JS StartMove源码-简单运动框架

    这几天学习js运动应用课程时,开始接触一个小例子:“仿Flash的图片轮换播放器”,其中使用的StartMove简单运动框架我觉得挺好用的.这个源码也简单,理解其原理,自己敲即便也就熟悉了. 用的时候 ...

  9. 在centos7上安装gcc、node.js(源码下载)

    一.在centos7中安装node.js https://www.cnblogs.com/lpbottle/p/7733397.html 1.从源码下载Nodejs cd /usr/local/src ...

随机推荐

  1. c# 对加密的MP4文件进行解密

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. Lists, Maps and Sets in Java

    ArrayList vs LinkedList vs Vector From the hierarchy diagram, they all implement List interface. The ...

  3. 局域网内部署 Docker Registry

    在局域网内部署 Docker Registry 可以极大的提升平时 pull.push 镜像的速度,从而缩短自动化操作的过程.同时也可以缓解带宽不足的问题,真是一举多得.本文将从创建单机的 Docke ...

  4. 利用shell脚本监控目录内文件改动

    #! /bin/bash webroot="/home/www/" cp /dev/null rsync_file if [ ! -f   file.md5 ];then      ...

  5. netsh & winsock & 对前端的影响

    netsh 与 winsock 一个是window的脚本工具,另一个则是window是网络编程中要用到的网络接口,而非要说跟我小小的前端有什么影响,那还真有...,当然这个影响是很不好的,比如node ...

  6. 【Netty】Netty之Bootstrapping

    一.前言 前面已经学习了Netty的EventLoop以及线程模型,接着学习Netty的Bootstrapping. 二.Bootstrapping 在学习了Netty中的很多组件后,如何将这些组件有 ...

  7. 【Netty】codec框架

    一.前言 前面已经学习完了Netty框架中的主要组件,接着学习codec框架. 二.codec框架 每个网络应用程序必须定义如何将在对等体之间传输的原始字节解析并转换为目标程序的数据格式,这种转换逻辑 ...

  8. 写给Android App开发人员看的Android底层知识(6)

    (十一)BroadcastReceiver BroadcastReceiver,也就是广播,简称Receiver. 很多App开发人员表示,从来没用过Receiver.其实吧,对于音乐播放类App,用 ...

  9. win2012中添加架构FTP服务器

    打开IIS管理器(win+R输入inetmgr后回车或通过 添加FTP站点

  10. 【Netty】UDP广播事件

    一.前言 前面学习了WebSocket协议,并且通过示例讲解了WebSocket的具体使用,接着学习如何使用无连接的UDP来广播事件. 二.UDP广播事件 2.1 UDP基础 面向连接的TCP协议管理 ...