//code

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

#mycanvas{

position: absolute;

left: 0;

top: 0;

bottom:0;

right: 0;

background: #eee;

margin: auto;

border:1px solid #333;

box-shadow: 0 0 20px black;

}

</style>

</head>

<body>

<canvas width="600" id='mycanvas' height="600"></canvas>

<script>

(function(){

var arr=[];

var mycanvas=document.getElementById('mycanvas');

var context=mycanvas.getContext('2d');

var witch=true

var win=false

for(var i=0;i<15;i++){

arr[i]=[];

context.moveTo(i*40,0);

context.lineTo(i*40,600);

context.stroke()

context.moveTo(0,i*40);

context.lineTo(600,i*40);

context.stroke()

for(var j=0;j<15;j++){

arr[i][j]={

haschress:false,

who:""

};

}

// console.log(arr)

}

function drawarc(i,j,r){

if(arr[i][j].haschress||i==0||j==0||win){

return

}

context.beginPath();

context.arc(i*40,j*40 ,10,0,Math.PI*2);

context.fillStyle=(witch?'#fff':'#333');

context.fill();

context.stroke();

context.closePath();

arr[i][j].haschress=true;

arr[i][j].who=witch;

witch=!witch;

whowin(i,j)

}

function whowin(i,j,){

//水平

var count =0;

var current=arr[i][j].who;

for(var n=0;n<15;n++){

// console.log(arr[n][j].who)

if(arr[n][j].who===!witch){

count++;

if(count==5){

win=true;

!witch?alert('白棋赢了'):alert('黑棋赢了')

retutn

}

}else{

count=0

}

}

//垂直

count=0;

for(var n=0;n<15;n++){

console.log(arr[i][n].who)

if(arr[i][n].who===!witch){

count++;

if(count==5){

win=true;

!witch?alert('白棋赢了'):alert('黑棋赢了')

return

}

}else{

count=0

}

}

//左上

count=0;

// alert(i)

// alert(j)

//alert(1-(-1))

var num=Math.abs(j-i)

for(var n=0;n<15-num;n++){

if(arr[num-(-n)][n].who===!witch){

// alert(423432)

count++;

// alert(count)

if(count==5){

win=true;

!witch?alert('白棋赢了'):alert('黑棋赢了')

return

}

}else{

count=0

}

}

//左下

// debugger

count = 0

num=j-(-i);

for(var n=0;n<num;n++){

if(arr[n][num-n].who===!witch){

// alert(423432)

count++;

// alert(count)

if(count==5){

win=true;

!witch?alert('白棋赢了'):alert('黑棋赢了')

return

}

}else{

count=0

}

}

}

mycanvas.addEventListener('click',function(e){

var ev=e||window.event;

// var target=e.target||e.srcElement;

console.log(ev)

var i=(ev.offsetX/40).toFixed(0);

var j=(ev.offsetY/40).toFixed(0);;

drawarc(i,j);

})

})()

</script>

</body>

</html>

js五子棋游戏的更多相关文章

  1. js五子棋游戏代码分享

    HTML代码 <canvas id="game"></canvas> CSS代码 * { margin: 0; padding: 0; } #game { ...

  2. 原生JS+Canvas实现五子棋游戏

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代 ...

  3. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  4. 基于Blazor写一个简单的五子棋游戏

    写这个五子棋游戏,其实主要目的是想尝试一下微软新作Blazor.Blazor对于那些搞.NET的程序员,又想做一些前端工作,真的挺友好,不用一句JS就可搞定前端交互,美哉.现在已经有很流行的前端框架, ...

  5. Pomelo：网易开源基于 Node.js 的游戏服务端框架

    Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese

  6. 自定义View实现五子棋游戏

    成功的路上一点也不拥挤,因为坚持的人太少了. ---简书上看到的一句话 未来请假三天顺带加上十一回家结婚,不得不说真是太坑了,去年婚假还有10天,今年一下子缩水到了3天,只能赶着十一办事了. 最近还在 ...

  7. Android实训案例（八）——单机五子棋游戏，自定义棋盘，线条，棋子，游戏逻辑，游戏状态存储，再来一局

    Android实训案例(八)--单机五子棋游戏,自定义棋盘,线条,棋子,游戏逻辑,游戏状态存储,再来一局 阿法狗让围棋突然就被热议了,鸿洋大神也顺势出了篇五子棋单机游戏的视频,我看到了就像膜拜膜拜,就 ...

  8. 一个js小游戏----总结

    花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...

  9. js canvas游戏初级demo-躲避障碍物

    在线演示地址 http://200ok.fun:3100/html/game_demo.html 继上次js canvas游戏初级demo-上下左右移动(https://www.cnblogs.com ...

随机推荐

  1. Set ARITHABORT Option设置为ON

    MSDN注释中提到,应该总是将Set ARITHABORT Option设置为ON,原因有四: 1,如果SSMS和application client的设置不同,那么会导致application cl ...

  2. ADO.NET目录汇总1

    1.引用命名空间: using System.Data; using System.Data.SqlClient;[访问SQL Server定义的类] 2.连接字符串 string connectio ...

  3. ALGO-126_蓝桥杯_算法训练_水仙花

    问题描述 判断给定的三位数是否 水仙花 数.所谓 水仙花 数是指其值等于它本身 每位数字立方和的数.例 就是一个 水仙花 数. =++ 输入格式 一个整数. 输出格式 是水仙花数,输出"YE ...

  4. C++进阶--编译器自动生成的类函数

    //############################################################################ /* 在C++ 03标准下 在没有显式定义 ...

  5. go get golang.org/x 包失败解决方法

    由于墙的原因,国内使用 go get安装golang 官方包可能会失败 解决方法 方法1 [不需要FQ] Win10下相关配置: GOPATH : E:\go 安装记录: E:\>go get ...

  6. “国家重点实验室”完全名单_洹水泛舟_新浪博客 - Google Chrome

    “国家重点实验室”完全名单 单位名称(序号)   国家重点实验室名称  建设单位 中国科学院(73) 1   半导体超晶格国家重点实验室  中国科学院半导体研究所 2   应用光学国家重点实验室  中 ...

  7. 《Java并发编程实战》笔记-取消与关闭

    1,中断是实现取消的最合理方式.2,对中断操作的正确理解是:它并不会真正地中断一个正在运行的线程,而只是发出中断请求,然后由线程在下一个合适的时刻中断自己.3,区分任务和线程对中断的反应是很重要的4, ...

  8. 【ZZ】终于有人把云计算、大数据和人工智能讲明白了！

    终于有人把云计算.大数据和人工智能讲明白了! https://mp.weixin.qq.com/s/MqBP0xziJO-lPm23Bjjh9w 很不错的文章把几个概念讲明白了...图片拷不过来... ...

  9. rsync数据备份

    scp远程复制 scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令. 命令格式: scp local_file remote_username@ ...

  10. Spring MVC 处理异常

    SpringMVC处理异常: 1 使用@ExceptionHandler注解 只有ModelAndView可以携带错误信息 @ExceptionHandler public ModelAndView ...