<!--菜鸟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]=2;
}
//判断上下输赢
upanddown(y1,x1,color);
//判断左右输赢
leftandright(y1,x1,color);
//判断右下和左上输赢
Obliquedirection(y1,x1,color);
//判断左下和右上输赢
Obliquedirection2(y1,x1,color);
}
}
//初始化棋盘
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() 方法定义的路径。默认颜色是黑色。
}
//上下判断输赢
function upanddown(x1,y1,color){
var sum=1;
//向上判断
for(var i=1;i<5;i++){
if(position[x1][y1]==position[x1-i][y1]){
sum+=1;
}
else{
break;
}
}
//向下判断
for(var i=1;i<5;i++){
if(position[x1][y1]==position[x1+i][y1]){
sum+=1;
}
else{
break;
}
}
console.log(sum);
if(sum>=5){
if(color==1){
alert("白棋获胜，游戏结束！");
}
else{
alert("红棋获胜，游戏结束！");
}
}
}
//左右判断输赢
function leftandright(x1,y1,color){
var sum=1;
//向左判断
for(var i=1;i<5;i++){
if(position[x1][y1]==position[x1][y1-i]){
sum+=1;
}
else{
break;
}
}
//向右判断
for(var i=1;i<5;i++){
if(position[x1][y1]==position[x1][y1+i]){
sum+=1;
}
else{
break;
}
}
console.log(sum);
if(sum>=5){
if(color==1){
alert("白棋获胜，游戏结束！");
}
else{
alert("红棋获胜，游戏结束！");
}
}
}
//左上右下判断输赢
function Obliquedirection(x1,y1,color){
var sum=1;
//右下判断
for(var i=1;i<5;i++){
if(position[x1][y1]==position[x1+i][y1+i]){
sum+=1;
}
else{
break;
}
}
//左上判断
for(var i=1;i<5;i++){
if(position[x1][y1]==position[x1-i][y1-i]){
sum+=1;
}
else{
break;
}
}
console.log(sum);
if(sum>=5){
if(color==1){
alert("白棋获胜，游戏结束！");
}
else{
alert("红棋获胜，游戏结束！");
}
}
}
//右上左下判断输赢
function Obliquedirection2(x1,y1,color){
var sum=1;
//左下判断
for(var i=1;i<5;i++){
if(position[x1][y1]==position[x1-i][y1+i]){
sum+=1;
}
else{
break;
}
}
//右上判断
for(var i=1;i<5;i++){
if(position[x1][y1]==position[x1+i][y1-i]){
sum+=1;
}
else{
break;
}
}
console.log(sum);
if(sum>=5){
if(color==1){
alert("白棋获胜，游戏结束！");
}
else{
alert("红棋获胜，游戏结束！");
}
}
}
</script>
</body>
</html>
汇智学堂-JS菜鸟版手机小游戏（五子棋之三---完成各个方向的判断）
猜你喜欢
转载自blog.csdn.net/weixin_39593940/article/details/88663404
今日推荐
周排行