五子棋游戏 canvas 事件 边界检测
//有一定基础的人才能看得懂
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>改进五子棋</title>
<style type="text/css">
body{
background:#6b6b6b;
}
#canvas{
display:block;
margin:20px auto;
background:white;
}
#box{
position:absolute;
left:100px;
top:200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="450px" height="450px"></canvas>
<script type="text/javascript">
//定义属性
var map=[];
var step=0;
var canvas=document.querySelector("#canvas");
var context=canvas.getContext("2d");
var color=["black","white"];
//map初始化
function init(){
context.strokeStyle="black";
step=0;
context.strokeStyle="black";
for(var i=0;i<14;i++){
map[i]=[];
for(var j=0;j<14;j++){
map[i][j]=0;
}
}
}
//划线
function drawLine()
{
for(var i=1;i<15;i++){
context.moveTo(30*i,30);
context.lineTo(30*i,420);
context.moveTo(30,30*i);
context.lineTo(420,30*i);
}
context.stroke();
}
drawLine();
//画棋子
function drawChess(x,y,color){
context.beginPath();
context.fillStyle=color;
context.arc(x,y,15,0,Math.PI*2);
context.fill();
context.stroke();
}
//判断胜负
/*先判断一条线上的连续颜色>=5 包括左边和右边
1.当x+i<0 跳出循环 从当前位置向左判断
2.从当前位置向左判断
3.右边颜色一样才num++
4.颜色一样才num++
5.当 x-i<0 跳出循环
6.返回num
7.从当前位置向右判断
8.直线判断结束
9 其他同理 不过是 边界问题
*/
function vectory(x,y,color)
{
var num=0;
var result=0;//记录满足条件的棋子数
//左右判断
var lightRight=right(x,y,color,num);//返回右边同色的个数
lightRight+=left(x,y,color,num);//加上左边同色的个数
//上下判断
var upDown=up(x,y,color,num);
upDown+=down(x,y,color,num);
//左下右上
var leftDownToRightUp=leftDown(x,y,color,num);
leftDownToRightUp+=rightUp(x,y,color,num);
//左上右下
var leftUpToRightDwon=leftUp(x,y,color,num);
leftUpToRightDwon+=rightDown(x,y,color,num);
if(lightRight>=4 || upDown>=4 ||leftDownToRightUp>=4|| leftUpToRightDwon>=4)
{
alert(color+"方胜利");
location.reload(true);//刷新页面
}
}
//向右边判断
function right(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x+i>13){ //判断边界问题 不到边界就可以一直判断
break;
}
else{
if(map[x+i][y]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右边同色的个数
}
//向左边判断
function left(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x-i<0){ //判断边界问题 不到边界就可以一直判断
break;
}
else{
if(map[x-i][y]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行左边同色的个数
}
//向上判断
function up(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(y-i<0){ //判断边界问题 不到边界就可以一直判断
break;
}
else{
if(map[x][y-i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右边同色的个数
}
//向下判断
function down(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(y+i>13){ //判断边界问题 不到边界就可以一直判断
break;
}
else{
if(map[x][y+i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右边同色的个数
}
//左下判断
function leftDown(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x-i<0){ //判断边界问题 不到边界就可以一直判断
break;
}
else if(y+i>13){
break;
}
else{
if(map[x-i][y+i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右边同色的个数
}
//右上判断
function rightUp(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(y-i<0){ //判断边界问题 不到边界就可以一直判断
break;
}
else if(x+i>13){
break;
}
else{
if(map[x+i][y-i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右边同色的个数
}
//左上判断
function leftUp(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x-i<0){ //判断边界问题 不到边界就可以一直判断
break;
}
else if(y-i<0){
break;
}
else{
if(map[x-i][y-i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右边同色的个数
}
//右下判断
function rightDown(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x+i>13){ //判断边界问题 不到边界就可以一直判断
break;
}
else if(y+i>13){
break;
}
else{
if(map[x+i][y+i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右边同色的个数
}
//canvas下棋监听器
canvas.addEventListener("click",function(e){
var dx=Math.round(e.offsetX/30)*30;//瞄准位置 只能在(30*x,30*y)位置上
var dy=Math.round(e.offsetY/30)*30;//瞄准位置
var reX=(dx/30)-1;//通过坐标位置映射棋盘数组中的位置
var reY=(dy/30)-1;
console.log(reX+','+reY);
if(dx==0||dx==450||dy==0||dy==450){
return;
}
if(map[reX][reY]==0){
drawChess(dx,dy,color[step%2]);
map[reX][reY]=color[step%2];
vectory(reX,reY,color[step%2]);
step++;
console.log(map);
}
});
init();
</script>
</body>
</html>
五子棋游戏 canvas 事件 边界检测的更多相关文章
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 原生JS+Canvas实现五子棋游戏
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代 ...
- 自定义View实现五子棋游戏
成功的路上一点也不拥挤,因为坚持的人太少了. ---简书上看到的一句话 未来请假三天顺带加上十一回家结婚,不得不说真是太坑了,去年婚假还有10天,今年一下子缩水到了3天,只能赶着十一办事了. 最近还在 ...
- Android实训案例（八）——单机五子棋游戏，自定义棋盘，线条，棋子，游戏逻辑，游戏状态存储，再来一局
Android实训案例(八)--单机五子棋游戏,自定义棋盘,线条,棋子,游戏逻辑,游戏状态存储,再来一局 阿法狗让围棋突然就被热议了,鸿洋大神也顺势出了篇五子棋单机游戏的视频,我看到了就像膜拜膜拜,就 ...
- 关于五子棋游戏java版
一 题目简介:关于五子棋游戏 二 源码的github链接 https://github.com/marry1234/test/blob/master/五子棋游戏 三.所设计的模块测试用例.测试结果 ...
- java 五子棋游戏
五子棋游戏 一,1.五子棋的基本常识 与任何一种竞技棋一样,五子棋的每一局棋也分为三个阶段:开局,中局和残局. 五子棋的开始阶段称为开局,或称布局.其开局阶段是十分短暂的,大约在七着与十几着之间.在这 ...
- Canvas事件绑定
canvas事件绑定 众所周知canvas是位图,在位图里我们可以在里面画各种东西,可以是图片,可以是线条等等.那我们想给canvas里的某一张图片添加一个点击事件该怎么做到.而js只能监听到canv ...
- 笔记：C语言图形基本函数及实例五子棋游戏
初始化图形界面 int gdriver; int gmode; gdriver = DETECT; initgraph(&gdriver,&gmode,"" ); ...
- canvas 事件绑定
Canvas事件绑定 canvas事件绑定 众所周知canvas是位图,在位图里我们可以在里面画各种东西,可以是图片,可以是线条等等.那我们想给canvas里的某一张图片添加一个点击事件该怎么做到 ...
随机推荐
- 二、springcloud之熔断器hystrix
一.背景 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服 ...
- Python基础（1）：dir()，help()
Python:3.6.4 开始编写Python程序了...可是,某个模块怎么用呢?模块里的函数怎么用呢?...使用本文介绍的dir().help()两个帮助函数可以 获得绝大部分开发所需要的信息! d ...
- DDD领域模型企业级系统（二）
用户层: 1.请求应用层获取用户显示的信息 2.发送命令给应用层要求执行某个命令 应用层: 对用户界面提供各种应用功能(包括信息获取与命令执行),应用层不包含业务逻辑,业务层是由应用层调用领域层(领域 ...
- 一步一步学习IdentityServer3 (6)
上一个章节提到了数据持久化 下面说一说自定义登录界面,Idr3提供了很多服务接口,其中一个就是 ViewService,我们只需要去注册 IViewService 这个接口的实现 提供了一个泛型视图服 ...
- MVC图片上传并显示缩略图
前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...
- Linux 的软件安装目录
Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /usr:系统级的目录,可以理解为C:/Windows/,/usr/lib理解为C:/Windows/System32. / ...
- bzoj 1237 [SCOI2008]配对 贪心+dp
思路:dp[ i ] 表示 排序后前 i 个元素匹配的最小值, 我们可以发现每个点和它匹配的点的距离不会超过2,这样就能转移啦. #include<bits/stdc++.h> #defi ...
- 【Java】 String类型的==使用
public class StringDemo { public static void main(String[] args) { String s1 = "abc"; Stri ...
- think组合查询AND和OR一起用
如下示例: $_where 和 $where组合查询 $_where之间用OR $where之间用AND 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
- MySQL 字段类型占用空间
MySQL支持多种列类型:数值类型.日期/时间类型和字符串(字符)类型. 首先来看下各类型的存储需求(即占用空间大小): 数值类型存储需求 列类型 存储需求 TINYINT 1个字节 SMALLINT ...