//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. Building the Unstructured Data Warehouse: Architecture, Analysis, and Design

    Building the Unstructured Data Warehouse: Architecture, Analysis, and Design earn essential techniqu ...

  2. pytest.3.Assert

    From: http://www.testclass.net/pytest/assert/ Assert就是断言,每个测试用例都需要断言. 与unittest不同,pytest使用的是python自带 ...

  3. Lucene suggest [转]

      The Big Data Zone is presented by Splunk, the maker of data analysis solutions such as Hunk, an an ...

  4. centos7系列-给普通用户sudo权限

    对于linux用户来讲,普通用户的权限是有一定限制的,所以在有些操作的时候,是需要sudo权限的,那么如何在linux下赋予普通用户sudo权限呢?此处将讲解一下方法. 在login我们的系统后,如果 ...

  5. C/C++程序CPU问题分析

    转载地址:http://www.10tiao.com/html/473/201606/2651473094/1.html   程序的CPU问题是另外一类典型的程序性能问题,很多开发人员都受到过程序CP ...

  6. vue-router总结2

    在上一篇总结了vue-router中的路由切换.重定向和路由传参等知识,因为篇幅的原因,便将剩下的路由模块化.路由嵌套.history模式.路由守卫等放在这里来写了.因为是继续前面的写.所以代码也还是 ...

  7. [转][C#]Combobox 行高

    namespace System.Windows.Forms { class ComboBoxEx : ComboBox { public ComboBoxEx() { DrawMode = Syst ...

  8. python图片和字符串的转换

    有个业务,需要将图片压缩转化为64位编码上传到服务端. import json,requests,base64 #网上下载图片素材 r = requests.get("https://tim ...

  9. 用JavaScript来生成HTML

    用JavaScript来生成HTML <style> table{ border-top: 1px #ff0000 solid; border-left: 1px #ff0000 soli ...

  10. axublogcms1.0.6|代码审计

    这周的审计任务,两天前的任务呀~拖延症呀~ 这次审计一个博客----auxblogcms1.0.6,网上也有所记载,我下面会做个总结. axublog是一款php个人博客系统,小巧强大的PHP+MyS ...