javascipt开发的五子棋小游戏（纯js代码）

canvas:画布可以被js操作，画板=>图片(尺寸数据，我们需要修改它的尺寸，不是修改样式)
绘制环境
如何绘制：
提笔到某个位置
描述绘制环境
开始绘制
提笔
querySelector:document对象上具有的一个办法，id和class都可以获取
选择满足条件的第一个元素。
getElementsByClassName效率高
制作流程：
1.绘制棋盘
（1）.绘制直线的操作
2.绘制旗子
（1）如何绘制
（2）如何点击下棋
（3）交换手
（4）落子点的问题(必须下到交叉点),自瞄系统
（5）友军判断，下过棋的地方不下,记录棋盘的状态
3.游戏胜负判断
棋盘状态
五子棋胜负判断的核心原理：
当前下下去的棋子参与到胜负判断中，此时下棋的人要么赢要么不赢
一条线上分为左右颜色连续累加超过5，那么这个颜色就获胜了。
4.人工智能机器下棋

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>五子棋</title>
	<style type="text/css">
		body{
			margin: 0;
			background-color: #ccc;
		}
		#canvas{
			display: block;
			margin:20px auto;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="450" height="450"></canvas>
</body>
	<script type="text/javascript">
		var canvas = document.querySelector('#canvas');//获取元素的操作
		var ctx = canvas.getContext('2d');//获取绘制环境
		var chesscolor = ['black','white'];
		var step = 0;
		var maparr = [];
		var mode = [//判断模式
			[1,0],//水平
			[0,1],//竖直
			[1,1],//右下
			[1,-1],//左下
		];
		for(var i=0;i<14;i++){
			maparr[i]=[];
			for(var j=0;j<14;j++){
				maparr[i][j]=0;
			}
		}
		for(var i=1;i<15;i++){
			ctx.moveTo(30*i,30);
			ctx.lineTo(30*i,420);//绘制表格操作
			ctx.moveTo(30,30*i);
			ctx.lineTo(420,30*i);
		}
		ctx.stroke();//将之前的所有的路径全部绘制一次,描轮廓画法

		function drawchess(color,x,y){//传入一个颜色代码，绘制一个棋子
			//开始绘制
			ctx.fillStyle=color;//填充颜色的修改
			ctx.beginPath();//提笔操作
			ctx.arc(x,y,15,0,Math.PI*2,false);//描述画圆坐标,圆心坐标轴半径,起始点，度数
			ctx.fill();//填充
			ctx.stroke();
	    }
	    //点击有棋子 
		canvas.addEventListener('click',function(e){
			var px = Math.floor((e.offsetX+15)/30)-1;//自瞄系统
			var py = Math.floor((e.offsetY+15)/30)-1;
			//靠近边缘的不能下棋
			if((px+1)*30==0 || (py+1)*30==0 || (px+1)*30==450 || (py+1)*30==450){
				return;
			}
			//判断是否下过棋
			if(maparr[px][py]==0){
				drawchess(chesscolor[step%2],(px+1)*30,(py+1)*30);
				maparr[px][py]=chesscolor[step%2];
				//下完了算胜负
			    checkWin(chesscolor[step%2],px,py,mode[0]);
			    checkWin(chesscolor[step%2],px,py,mode[1]);
			    checkWin(chesscolor[step%2],px,py,mode[2]);
			    checkWin(chesscolor[step%2],px,py,mode[3]);
				step = step+1;
			}
		});
		
		function checkWin(color,x,y,mode){//要么黑，要么白，要么没赢
			var count = 0;
			for(var i=1;i<5;i++){
				if(maparr[x+i*mode[0]]){
					if(maparr[x+i*mode[0]][y+i*mode[1]]==color){
					count++;
					}else{
						break;
					}
				}
			}
			for( var i=1;i<5;i++){
				if(maparr[x-i*mode[0]]){
					if(maparr[x-i*mode[0]][y-i*mode[1]]==color){
						count++;
						}else{
							break;
						}
				}
			}
			if(count>=4){
				alert(color,'win');
			}
		}

	</script>

</html>

球球的学习笔记

发布了32 篇原创文章 · 获赞 28 · 访问量 1373

私信关注

javascipt开发的五子棋小游戏（纯js代码）

猜你喜欢