//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. webservice的model层命名空间不同的问题

        [XmlType(Namespace = "http://tempuri.org/MyClass4")]     [XmlRoot(Namespace = "ht ...

  2. js中input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  3. axios 上传图片

    let data = new FormData(); for (var i = 0; i < files.length; i++) { let file = files.item(i); dat ...

  4. spring 整合Junit学习

    测试一般是测试的局部功能,使用时需要自己写个测试相关的spring配置文件,比较费劲,所以常用的是纯配置的方式来实现测试. @RunWith(SpringJUnit4ClassRunner.class ...

  5. mongoDB oplog的说明及应用

    mongoDB oplog 说明 ts:8字节的时间戳,由4字节unix timestamp + 4字节自增计数表示.这个值很重要,在选举(如master宕机时)新primary时,会选择ts最大的那 ...

  6. IP地址与无符号整数值相互转换

    方法1:IP地址转换为整数:比如"192.168.1.254",以点为分割,将192 168 1 254保存在一个int a[4]数组里,然后通过unsigned int nRes ...

  7. Espresso小试

    Espresso开源了,那就试着用一下, 1. 下载Espresso Espresso没有提供单独的jar包下载,建议clone整个项目或者下载zip包 git clone https://code. ...

  8. DP Big Event in HDU

    Big Event in HDU Time Limit : 10000/5000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) T ...

  9. a标签中可以加button,但是不提倡；button中不能加a标签，否则不能跳转

    a标签中可以加button,但是不提倡:button中不能加a标签,否则不能跳转

  10. HTML5绘制饼图示例（一）

    原文地址:http://www.2cto.com/kf/201108/100251.html HTML5引入Canvas元素,用于图形的绘制,我们可以仅仅基于HTML和JavaScript就能绘制出原 ...