汇智学堂-JS菜鸟版手机小游戏（五子棋游戏之一---准确落下棋子）

<!--菜鸟H5游戏入门-五子棋游戏-->
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>雷雷的五子棋游戏</title> 
</head>
	
   <body>

   <!--画板-->   
   <!--<h4 style="position: relative;left:100px">雷雷的五子棋游戏</h4>-->
  
   <canvas id="canvas" style="background-color: black;" onclick="cnvs_getClickme(event)">您当前的浏览器版本不支持  </canvas>
   <script type="text/javascript">
   	
   	//颜色变换
   	var color=0;
   	
   	//初始化棋子各位置
    var position = new Array();  
     for(var i=0;i<16;i++){   
      position[i]=new Array(); 
        for(var j=0;j<12;j++){   
        position[i][j]="0";   
      }
    }
     
    init();    
   	
   	//点击鼠标的事件
   	function cnvs_getClickme(e){
   	 x=e.clientX;  
     y=e.clientY;     
     //alert(x); 
     
     x1=parseInt((x-30)/30);
     y1=parseInt((y-30)/30);
     
     x11=30+x1*30;
     y11=30+y1*30; 
     
     if(x<30 || x>360 ||y<30 || y>490){
     	return;
     }
     
     //如果没有棋子，落下棋子   
     
     if(position[y1][x1]==0){     	
     	if(color==0){     	
     	createArc(x11,y11,color);
     	color=1;
     	position[y1][x1]=1; 	
       }
     else if(color==1){     	
     	createArc(x11,y11,color);
     	color=0;
     	position[y1][x1]=1;
      }       
       
     }    
   	}
   
   //初始化棋盘
   function init(){
   	var canvas = document.getElementById('canvas');
    canvas.width = 360;
    canvas.height = 580;
    
   	for(var i=0;i<16;i++){
     	createLine(30,30+i*30); 
     } 
     
     for(var i=0;i<12;i++){
     	createLine(30+i*30,30+15*30); 
     } 
   }
   
   //定义绘制棋子的函数
   
   function createArc(x,y,z){
   	var context = canvas.getContext('2d');    	
   	//context.fillStyle="#00FFFF";
   	if(z==1){
   	  context.fillStyle="#FF0000";
   	}
   	if(z==0){
   	  context.fillStyle="#FFFFFF";
   	}
   	
	context.beginPath();
	context.arc(x,y,15,Math.PI*2,0,true);
	context.closePath();
	context.fill();
    context.stroke(); 
   }   
   
   //定义绘制棋盘直线的函数
   function createLine(x,y){
       
       // 拿到上下文       
       var context = canvas.getContext('2d');       
       context.strokeStyle = 'white'; 
       context.beginPath();     
      
      if(x==30){
       context.moveTo(x, y);      
       context.lineTo(330, y);
      }      
      if(y==480){
       context.moveTo(x, 30);      
       context.lineTo(x, y);
      }    
            
      context.closePath();
      context.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
   } 
  
   </script>

</body>
</html>
汇智学堂-JS菜鸟版手机小游戏（五子棋游戏之一---准确落下棋子）

猜你喜欢
