//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. 隐藏网页中DIV和DOM的各种方法

    记录一下各种隐藏html元素的方法 <!DOCTYPE html> <html> <head> <title></title> <me ...

  2. uoj #14.【UER #1】DZY Loves Graph

    http://uoj.ac/problem/14 由于加入的边权递增,可以直接运行kruskal并支持撤销,但这样如果反复批量删边和撤销,时间复杂度会退化,因此需要对删边操作加上延时处理,只有在删边后 ...

  3. PAT 乙级 1063 计算谱半径(20) C++版

    1063. 计算谱半径(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 在数学中,矩阵的“谱半径”是指其特 ...

  4. Flume的Source

    source学习网址: http://flume.apache.org/FlumeUserGuide.html 一.Avro 类型的Source 监听Avro 端口来接收外部avro客户端的事件流.和 ...

  5. 学习笔记之Microsoft Office 365

    云办公确实很方便. Office 365 登录 | Microsoft Office https://www.office.com/ Office 365 - Wikipedia https://en ...

  6. [UE4]删除动画：Remove from frame 5 to frame 18

    从当前帧开始删除到结尾的动画帧

  7. 知识点：Mysql 基本用法之触发器

    触发器 使用触发器可以定制用户对表进行[增.删.改]操作时前后的行为 注意:没有查询 一 .创建触发器 触发器基础语法: # 插入前 CREATE TRIGGER tri_before_insert_ ...

  8. 【Redis】编译错误zmalloc.h:50:31: fatal error: jemalloc/jemalloc.h: No such file or directory

    [Redis]编译错误zmalloc.h:50:31: fatal error: jemalloc/jemalloc.h: No such file or directory 在安装redis进行编译 ...

  9. 【TensorFlow学习笔记 】name_socpe variable_scope

    [引言]TensorFlow中的命名域是非常重要的概念,涉及到参数共享,方便命名参数管理,定义图结构 本文主要介绍name_scope 和 variable_scope,slim包中的arg_scop ...

  10. VS远程调试与附加调试

    使用场景 假如你要开发的程序需要运行在独特的硬件上,比如:服务器,然而这个"独特的硬件"却不能给你装VS,这时候远程调试就登场了. 测试工具/环境一览 Key Value VS版本 ...