首页 > 网站开发 > JavaScript >
-
JavaScript教程之五子棋游戏 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>
