JS实现双人五子棋简易游戏(上)

简介

本篇实现效果只包括双人的游戏方式

若想实现单人也就是人机的游戏方式可以看下一篇

链接：JS实现五子棋单人双人简易游戏(下)

先看实现效果如下

以下为全部源码

1.HTML

代码如下：

<!DOCTYPE HTML>
<html>
<head><title> 五子棋 </title><link rel="stylesheet" type="text/css" href="css/style.css">
</head><body><button id='btn'>新游戏</button><canvas id='canvas' width='450' height='450'></canvas>
</body>
<script src="js/tool.js"></script>
</html>

2.CSS

代码如下：

body{margin: 0;background-color: #ccc;
}
#canvas{display: block; /* 块元素 */margin: 20px auto;background-color: #946136;
}
#btn{display: block; /* 块元素 */margin: 25px auto;width: 100px;font-size: 18px;color: #fff;background-color: #000;border-radius:10px; /* 按钮圆角 */border: 2px solid #eee; /* 按钮边框 */}
#btn:hover {/* 按钮鼠标悬停 */color: #000;background-color: #fff;cursor: pointer; /* 显示的光标的类型 */box-shadow: 0 5px 15px #999; /* 按钮添加阴影 */
}
#btn:active {/* 按钮鼠标点击 */color: #fff;background-color: #666;box-shadow: 0 5px 5px #666;transform: translateY(4px);/*对按钮进行移动*/
}

3.JS

代码如下：

var canvas = document.querySelector('#canvas');//获取画布元素
var btn = document.querySelector('#btn');//获取按钮元素
var ctx = canvas.getContext('2d');//获取绘制环境
var chesscolor = ['BLACK','WHITE'];//落子颜色
var step = 0;//记录当前步数
var flag = true;//记录游戏状态
var maparr = [];//记录棋盘状态
//检测棋子方向
var mode = [[1,0],//水平[0,1],//垂直 [1,1],//左上右下[1,-1]//右上左下
];//绘制文字
ctx.font="70px Arial";
ctx.fillText('Start Game!',40,235);
//点击按钮事件
btn.onclick = function(){startGame();cleanChessBoard();drawChessBoard();
};checkchess(canvas);//开始游戏
function startGame(){//记录棋盘状态for(var i=0;i<14;i++){maparr[i] = [];for(var j=0;j<14;j++){maparr[i][j] = 0;             }   }flag = true;step = 0;
}//绘制棋盘
function drawChessBoard(){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();/* 绘制(轮廓) */ctx.beginPath();/* 提笔 */
}//清除棋盘
function cleanChessBoard(){ctx.fillStyle = '#946136';ctx.fillRect(0, 0, canvas.width, canvas.height);
}//落子机制
function checkchess(canvas){canvas.addEventListener('click',function(e){//棋子坐标var px = Math.floor((e.offsetX+15)/30)-1;var py = Math.floor((e.offsetY+15)/30)-1;//判断游戏是否结束if(!flag){alert('Game Over!');return;}//检测是否在棋盘上落子if((px+1)*30==0 || (py+1)*30==0 || (px+1)*30==450 || (py+1)*30==450){return;}if(maparr[px][py] == 0){//落子drawchess((px+1)*30,(py+1)*30,chesscolor[step%2]);//记录落子颜色maparr[px][py] = chesscolor[step%2];//检测哪方胜负for(var i=0;i<mode.length;i++){checkwin(px,py,chesscolor[step%2],mode[i]);}step++;}});
}//绘制棋子
function drawchess(x,y,color){//传入颜色,位置,绘制棋子ctx.fillStyle = color;//填充颜色ctx.arc(x,y,15,0,Math.PI*2,false);//画圆: 圆心 半径 弧度 逆时针ctx.fill();//填充//ctx.stroke();ctx.beginPath();//提笔
}//输赢机制
function checkwin(x,y,color,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! ");ctx.font="70px Arial";ctx.fillText("Game Over!",40,235);flag = false;//游戏结束}}

参考链接：js实现简易五子棋游戏

JS实现双人五子棋简易游戏(上)相关推荐

用js实现双人五子棋小游戏
这是自己自学js的时候,在网上找的js源码,由于是自学,花了数小时才把这个源码大致弄明白. 大致算法自定义棋盘规格,直接在棋盘建新div就可以,长度宽度用计算就可以了.下棋,在div里再建class ...
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
js+html5双人五子棋(源码下载)
代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type ...
JS实现五子棋单人双人简易游戏(下)
目录一.简介二.游戏实现效果如下三.以下为源码 1.HTML 2.CSS 3.JS 一.简介此版包括了单人模式(人机模式)和双人模式只需要双人模式的可以看这篇:JS实现双人五子棋简易游戏(上 ...
C语言实践——双人五子棋（进阶版）
双人五子棋前言一.棋盘的美化二.棋子的美化三.棋盘的打印四.控制台修改颜色五.五子棋源代码前言上一篇文章讲了如何用C语言写一个简易的双人五子棋小游戏,但是存在一些缺陷,比如棋盘太&q ...
c++ 双人五子棋（可直接复制）
今天,我给大家带来一个五子棋的代码,希望大家喜欢. 下面是代码: #include <iostream> #include <conio.h> using namespace ...
C++实现五子棋小游戏（源代码）
>求关注,求点赞,求评论< Thanks♪(･ω･)ﾉ这次发个简单的废话不多说下为代码☟☟☟ #include <iostream> #include <conio ...
Java实现五子棋小游戏(附思路讲解,全部代码,游戏截图)
本文章是如何实现一个单机版双人五子棋小游戏,通过Swing技术进行可视操作. 个人简介:
五子棋小游戏（JS+Node+Websocket）可分房间对战
主要通过js.canvas.node.websocket来实现五子棋游戏. tip:如果你想清楚的了解怎么实现,请一步步看思路流程,文章最后有项目的gitee地址.对应B站视频,可直接食用. 首先搭建 ...
基于控制台的五子棋小游戏（简易）
基于控制台的五子棋小游戏(简易) 展示源码: 使用: GoBang类: 展示话不多说上代码 Don't talk much, say the code! 源码: 使用: new完直接运行 publ ...

JS实现双人五子棋简易游戏(上)

简介

先看实现效果如下

以下为全部源码

1.HTML

2.CSS

3.JS

JS实现双人五子棋简易游戏(上)相关推荐

最新文章

热门文章