//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. PHP 函数获取文件名

    <?php // php 获取  文件名 function getExt($url){ $arr = parse_url($url); // URL 字符串予以解析,并将结果返回数组中 //pr ...

  2. 《剑指offer(第二版)》——面试题36：二叉搜索树与双向链表

    具体的题目大意和参考思路在此处不详述(见<剑指offer>),实质就是在中序遍历的过程中调整指针的指向,关于中序遍历有递归和非递归两种操作,所以此处也用了两种方法. 方法1(递归法): 代 ...

  3. 【ThreadLocal】使用ThreadLocal实现线程安全

    非线程安全 public class UnSafeThreadLocalDemo { private int count = 0; public static void main(String[] a ...

  4. 无法将当前工程转化成model 2.5/3.1:Cannot change version of project facet Dynamic Web Module to 2.5.

    Description    Resource    Path    Location    TypeCannot change version of project facet Dynamic We ...

  5. dubbo项目部署遇到的问题

    部署的项目结构如下: [图片] 1 Socket >>>相关的报错 检查下zookeeper的服务端cmd和客户端cmd是否起来了 2 jdbc.DataSourceProperti ...

  6. vue todolist 封装localstorage

    //封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key ...

  7. pandas中一列含有多种数据类型的转换：科学计算法转浮点数、字符映射

    import pandas as pd import re def getNum(x): """ 科学计数法和字符转浮点数 """ if r ...

  8. 15 Linux系统的终端

    在上一节的内容中,我们提到了设备文件,包括块设备文件(b)以及字符设备文件(c),这一节里面我们主要为大家说明Linux系统如何通过终端进行控制管理的,在这个过程中就用到相应的设备文件: Linux系 ...

  9. Install and Configure Apache Kafka

    I. Installation The installation environment must have JDK, verify that you enter: java -version 1. ...

  10. CS229 5.用正则化(Regularization)来解决过拟合

    1 过拟合 过拟合就是训练模型的过程中,模型过度拟合训练数据,而不能很好的泛化到测试数据集上.出现over-fitting的原因是多方面的: 1) 训练数据过少,数据量与数据噪声是成反比的,少量数据导 ...