js+canvas 一只一担小游戏
2024-09-06 14:52:02
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
vertical-align: middle;
}
</style>
</head> <body>
<canvas id="one-two">此浏览器可能不支持canvas</canvas>
</body>
<script type="text/javascript" charset="utf-8">
class OneTwo {
constructor(canvasId) {
this.rowCount = 3;
this.colCount = this.rowCount;
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext("2d");
this.cellWidth = 100; // 单位px this.offsetX = this.cellWidth / 2;
this.offsetY = this.offsetX;
this.width = this.cellWidth * this.rowCount + this.offsetX * 2;
this.height = this.width;
this.canvasId = canvasId; this.pieces = [];
this.active = 2; //
this.status = 1; // 1添加子 2移动子
this.R = this.cellWidth * 0.3;
this.hint = []; // 提示位置
this.toMove = {}; // 即将移动的棋子 this.init();
} // 渲染页面
renderUi() {
//清除之前的画布
this.ctx.clearRect(0, 0, this.width, this.height); // 重绘画布
this.drawMap();
this.drawPieces();
console.log(this.toMove, "渲染前选择的棋子")
this.highLight();
} //初始化
init() {
this.initCanvas();
this.drawMap();
this.initPieces();
} //
initCanvas() {
this.canvas.width = this.width;
this.canvas.height = this.height;
} // initPieces(){}
initPieces() {
for(let i = 0; i <= this.rowCount; i++) {
this.pieces[i] = [];
for(let j = 0; j <= this.colCount; j++) {
this.pieces[i][j] = 0;
}
}
console.log(this.pieces);
} // 画地图
drawMap() {
// 背景
this.ctx.beginPath();
this.ctx.rect(0, 0, this.width, this.height);
this.ctx.closePath();
this.ctx.fillStyle = "#0099CC";
this.ctx.fill(); // 画横线
this.ctx.strokeStyle = "black";
this.ctx.beginPath();
for(let i = 0; i <= this.rowCount; i++) {
this.ctx.moveTo(0 + this.offsetX, this.cellWidth * i + this.offsetY);
this.ctx.lineTo(this.cellWidth * this.rowCount + this.offsetX, this.cellWidth * i + this.offsetY);
}
this.ctx.stroke(); // 画纵线
this.ctx.beginPath();
for(let i = 0; i <= this.colCount; i++) {
this.ctx.moveTo(this.cellWidth * i + this.offsetX, 0 + this.offsetY);
this.ctx.lineTo(this.cellWidth * i + this.offsetX, this.cellWidth * this.colCount + this.offsetY);
}
this.ctx.stroke();
} //画一个棋子或一个提示圆点
drawDot(x, y, r, color) {
this.ctx.beginPath();
this.ctx.arc(x, y, r, 0, 2 * Math.PI);
this.ctx.closePath(); this.ctx.fillStyle = color;
this.ctx.fill();
} // 画所有的棋子
drawPieces() {
//console.log(this.pieces)
for(var i = 0; i < this.pieces.length; i++) {
for(let j = 0; j < this.pieces[i].length; j++) {
if(this.pieces[i][j] !== 0) {
this.drawOnePiece(i, j, this.R, this.getColor(this.pieces[i][j]));
}
}
}
} //
drawOnePiece(i, j, r, color) {
var x = i * this.cellWidth + this.offsetX;
var y = j * this.cellWidth + this.offsetY;
this.drawDot(x, y, r, color);
} // 获取某个棋子的颜色 0——空 1——白 2——黑
getColor(num) {
var res = "";
switch(num) {
case 0:
res = "";
break;
case 2:
res = "black";
break;
case 1:
res = "white";
break;
case -1:
res = "yellow";
break;
default:
res = "red"; // 错误了
}
return res;
} // cango
canGo(x, y) {
if(this.pieces[x][y] == 0) {
return true;
} else {
return false;
}
} // 添加棋
add(x, y) {
if(this.canGo(x, y)) {
this.pieces[x][y] = this.active;
// this.drawOnePiece(x,y);
this.weed(x, y);
this.renderUi();
this.exchange();
console.log(this.pieces, "当前棋局")
} else {
console.warn("这里貌似不能添加棋子");
}
} // 是否可以移动
oneCanMove(x, y, oneSide) {
var moveRange = this.getMoveRange(x, y, oneSide);
if(moveRange.length) {
return true;
} else {
return false;
}
}
// 所有的棋子是否可以移动
hasCanMovePiece(oneSide) {
var oneSideCanMove = false;
for(let i = 0, len = this.pieces.length; i < len; i++) {
for(let j = 0, len1 = this.pieces[i].length; j < len1; j++) {
if(this.pieces[i][j] === oneSide) {
if(this.oneCanMove(i, j, oneSide)) {
oneSideCanMove = true;
break;
}
}
}
}
return oneSideCanMove;
} // 获取某一方的棋子数量
getCount(oneSide) {
var count = 0;
for(let i = 0, len = this.pieces.length; i < len; i++) {
for(let j = 0, len1 = this.pieces[i].length; j < len1; j++) {
if(this.pieces[i][j] === oneSide) {
count++;
}
}
}
return count;
} // 没有棋走，自己拔出自己的一颗子
weedOne(x, y) {
this.pieces[x][y] = 0;
} // 转换状态从添加棋子到移动棋子
changeStatus() {
console.log("状态转换了");
this.status = 2;
}
// 当棋盘下满的时候转换状态。下满的时候黑方+白方的总数等于16
wetherChangeStatus() {
console.log("判断是否要转换状态", this.getCount(1) + this.getCount(2))
if(this.getCount(1) + this.getCount(2) == 16) {
return true;
} else {
return false;
}
} // 切换角色（换着走棋）
exchange() {
this.active = this.active == 1 ? 2 : 1;
} // 获取敌方数字
getEnemy(oneSide) {
return oneSide == 1 ? 2 : 1;
} // 选择移动的棋子
chooseToMove(x, y, oneSide) {
if(this.oneCanMove(x, y, oneSide)) {
this.toMove.x = x;
this.toMove.y = y;
//this.highLight();
} else {
delete this.toMove.x;
delete this.toMove.y;
console.warn("这个棋子不可以移动");
}
console.log(this.toMove, "选择后的要移动的棋子")
} // 判断移动的最终位置是否在移动范围内
inRange(x, y, oneSide) {
var moveRange = this.getMoveRange(this.toMove.x, this.toMove.y, oneSide);
console.log(moveRange, "移动范围");
var flag = false;
for(let i = 0, len = moveRange.length; i < len; i++) {
if(x == moveRange[i].x && y == moveRange[i].y) {
flag = true;
break;
}
}
return flag;
} // 移动 1.选择需要移动的棋子 2.点击推荐的可以移动的位置 3.之前的位置赋值为空，结束的位置赋值为当前棋子
move(x, y) {
if(Object.keys(this.toMove).length) { // 已经选了将要移动的棋子 移动
if(this.pieces[x][y] == this.active) { // 这时候想移动别的棋子
console.log("重新选择要移动的棋子x:" + x + ";y:" + y);
this.chooseToMove(x, y, this.active);
//this.renderUi();
} else {
if(this.inRange(x, y, this.active)) { // 移动当前棋子 删除己选择的移动棋子 去除已选择状态
console.log("移动棋子");
this.pieces[x][y] = this.active;
this.pieces[this.toMove.x][this.toMove.y] = 0;
this.weed(x, y); this.exchange();
delete this.toMove.x;
delete this.toMove.y;
//this.renderUi(); } else {
console.log("移动范围超标了，每次只可以横向或纵向移动一格");
}
}
} else { // 选择要移动的棋子
console.log("选择要移动的棋子x:" + x + ";y:" + y);
this.chooseToMove(x, y, this.active);
//this.renderUi();
} this.renderUi();
} // goStep
goStep(x, y) {
if(this.status == 1) { // 添加
this.add(x, y);
if(this.wetherChangeStatus()) {
this.changeStatus();
}
} else { // 拔子 移动
if(this.hasCanMovePiece(this.active)) { // 移动
console.log("移动主流程");
this.move(x, y);
this.getVictor();
} else { //拔子
console.log("拔子主流程");
if(this.pieces[x][y] == this.active) {
this.weedOne(x, y);
this.exchange();
this.renderUi();
this.getVictor();
} else {
console.log("子不是你的，拔个锤子");
}
}
}
} // 给选择的棋子加上高亮标记
highLight() {
console.log(this.toMove);
if(!Object.keys(this.toMove).length) {
return;
}
console.log("要开始画了")
var x = this.toMove.x;
var y = this.toMove.y;
var pArr = ["lt", "ld", "rd", "rt"];
for(let i = 0, len = pArr.length; i < len; i++) {
var xx = x * this.cellWidth + this.offsetX;
var yy = y * this.cellWidth + this.offsetY;
this.drawRightAngle(xx, yy, this.R, 10, pArr[i]);
}
} // 画直角 以圆心为起点，2r为边的正方形的角,length为画的线的长度，p为需要画的角（如：左上角lt）
drawRightAngle(x, y, r, length, p, color) {
color = color || "yellow";
var nd = this.nd(p);
var h = nd.h;
var v = nd.v;
this.ctx.beginPath();
this.ctx.strokeStyle = color;
this.ctx.moveTo(x + h * r, y + v * r);
this.ctx.lineTo(x + h * r - h * length, y + v * r);
this.ctx.moveTo(x + h * r, y + v * r);
this.ctx.lineTo(x + h * r, y + v * r - v * length);
this.ctx.closePath();
this.ctx.stroke();
} // 显示提示位置 // 显示移动范围
getMoveRange(x, y, oneSide) {
var moveRange = [];
if(this.pieces[x][y] === oneSide) {
var dArr = ["r", "d", "l", "t"];
var direction, h, v;
for(let i = 0, len = dArr.length; i < len; i++) {
direction = this.nd(dArr[i]);
h = direction.h;
v = direction.v;
if(this.pieces[x + h] && this.pieces[x + h][y + v] === 0) {
moveRange.push({
x: x + h,
y: y + v
});
}
}
} else {
console.log("空位置和敌方的棋子不可以移动，请移动自己的棋子到空位置");
}
return moveRange;
} // 获取赢家
getVictor() {
var white = this.getCount(1);
var black = this.getCount(2);
if(white == 0) {
setTimeout(() => {
alert("黑棋赢咧");
}, 50);
} else if(black == 0) {
setTimeout(() => {
alert("白棋赢咧");
}, 50);
}
} // 拔子
weed(x, y) {
var dArr = ["r", "d", "l", "t"];
var direction, h, v, np;
for(let i = 0, len = dArr.length; i < len; i++) {
direction = this.nd(dArr[i]);
h = direction.h;
v = direction.v;
np = this.np(x, y, dArr[i]);
// 先看自己有没有凑够两个子，凑够了才可以吃子
if(np === 0) {
if(this.pieces[x + h] && this.pieces[x + h][y + v] === this.active) { //AA??
if(this.pieces[x + 2 * h] && this.pieces[x + 2 * h][y + 2 * v] === this.getEnemy(this.active)) { //AAB?
if(this.pieces[x + 3 * h] && this.pieces[x + 3 * h][y + 3 * v] === this.getEnemy(this.active)) { //AABB
this.pieces[x + 2 * h][y + 2 * v] = 0;
this.pieces[x + 3 * h][y + 3 * v] = 0;
} else if(this.pieces[x + 3 * h] && this.pieces[x + 3 * h][y + 3 * v] === this.active) { //AABA
continue;
} else { // AABO
this.pieces[x + 2 * h][y + 2 * v] = 0;
}
} else { // AAA? 或AAO?
continue;
}
} else { //AB??或AO??
continue;
}
} else if(np === 1) {
if(this.pieces[x + h] && this.pieces[x + h][y + v] === this.active) { //?AA?
if(this.pieces[x - h] && this.pieces[x - h][y - v] === this.getEnemy(this.active)) { //BAA?
if(this.pieces[x + 2 * h] && this.pieces[x + 2 * h][y + 2 * v] === this.getEnemy(this.active)) { //BAAB
continue;
} else if(this.pieces[x + 2 * h] && this.pieces[x + 2 * h][y + 2 * v] === this.active) { //BAAA
continue;
} else { //BAAO
this.pieces[x - h][y - v] = 0;
}
} else if(this.pieces[x - h] && this.pieces[x - h][y - v] === this.active) { // AAA?
continue;
} else { //OAA?
if(this.pieces[x + 2 * h] && this.pieces[x + 2 * h][y + 2 * v] === this.getEnemy(this.active)) {
this.pieces[x + 2 * h][y + 2 * v] = 0;
} else {
continue;
}
}
} else if(this.pieces[x + h] && this.pieces[x + h][y + v] === this.getEnemy(this.active)) { //?AB?
if(this.pieces[x - h] && this.pieces[x - h][y - v] === this.active) { //AAB?
if(this.pieces[x + 2 * h] && this.pieces[x + 2 * h][y + 2 * v] === this.getEnemy(this.active)) { //AABB
this.pieces[x + h][y + v] = 0;
this.pieces[x + 2 * h][y + 2 * v] = 0;
} else if(this.pieces[x + 2 * h] && this.pieces[x + 2 * h][y + 2 * v] === this.active) { //AABA
continue;
} else { //AABO
this.pieces[x + h][y + v] = 0;
}
} else { //OAB? BAB?
continue;
}
} else { //?AO?
continue;
}
} else if(np === 2) {
if(this.pieces[x + h] && this.pieces[x + h][y + v] === this.active) { //??AA
if(this.pieces[x - h] && this.pieces[x - h][y - v] === this.getEnemy(this.active)) { //?BAA
if(this.pieces[x - 2 * h] && this.pieces[x - 2 * h][y - 2 * v] === this.getEnemy(this.active)) { //BBAA
this.pieces[x - 2 * h][y - 2 * v] = 0;
this.pieces[x - h][y - v] = 0;
} else if(this.pieces[x - 2 * h] && this.pieces[x - 2 * h][y - 2 * v] === this.active) { //ABAA
continue;
} else { //OBAA
this.pieces[x - h][y - v] = 0;
}
} else { // ?OAA 或?AAA
continue;
}
} else if(this.pieces[x + h] && this.pieces[x + h][y + v] === this.getEnemy(this.active)) { //??AB
if(this.pieces[x - h] && this.pieces[x - h][y - v] === this.active) { //?AAB
if(this.pieces[x - 2 * h] && this.pieces[x - 2 * h][y - 2 * v] === this.getEnemy(this.active)) { //BAAB
// this.pieces[x-h][y-v] = 0;
// this.pieces[x-2*h][y-2*v] = 0;
continue;
} else if(this.pieces[x - 2 * h] && this.pieces[x - 2 * h][y - 2 * v] === this.active) { //AAAB
continue;
} else { //OAAB
this.pieces[x + h][y + v] = 0;
}
} else { //?BAB或?OAB
continue;
}
} else { //??AO
if(this.pieces[x - h] && this.pieces[x - h][y - v] === this.active) { //?AAO
if(this.pieces[x - 2 * h] && this.pieces[x - 2 * h][y - 2 * v] === this.getEnemy(this.active)) { //BAAO
this.pieces[x - 2 * h][y - 2 * v] = 0;
} else { //AAAO或OAAO
continue;
}
} else { //?BAO 或?OAO
continue;
}
}
} else if(np === 3) {
if(this.pieces[x - h] && this.pieces[x - h][y - v] === this.active) { //??AA
if(this.pieces[x - 2 * h] && this.pieces[x - 2 * h][y - 2 * v] === this.getEnemy(this.active)) { //?BAA
if(this.pieces[x - 3 * h] && this.pieces[x - 3 * h][y - 3 * v] === this.getEnemy(this.active)) { //BBAA
this.pieces[x - 2 * h][y - 2 * v] = 0;
this.pieces[x - 3 * h][y - 3 * v] = 0;
} else if(this.pieces[x - 3 * h] && this.pieces[x - 3 * h][y - 3 * v] === this.active) { //ABAA
continue;
} else { // OBAA
this.pieces[x - 2 * h][y - 2 * v] = 0;
}
} else { // ?AAA 或?OAA
continue;
}
} else { //??BA或??OA
continue;
}
}
}
} // 方向数字化numberDirection r(1,0) rd(1,1) ld(-1,1)
nd(direction) {
var res = {
h: 0,
v: 0
}; // h horizontal v vertical
switch(direction) {
case "r":
res.h = 1;
res.v = 0;
break;
case "rd":
res.h = 1;
res.v = 1;
break;
case "d":
res.h = 0;
res.v = 1;
break;
case "ld":
res.h = -1;
res.v = 1;
break;
case "l":
res.h = -1;
res.v = 0;
break;
case "lt":
res.h = -1;
res.v = -1;
break;
case "t":
res.h = 0;
res.v = -1;
break;
case "rt":
res.h = 1;
res.v = -1;
break;
default:
console.error("方向输入有误");
}
return res;
} // 某个方向上当前（x,y）是第几个位置
np(x, y, direction) {
var d = this.nd(direction);
if(d.h !== 0) {
if(d.h === 1) {
return x;
} else { // -1
return 3 - x;
}
} else {
if(d.v === 1) {
return y;
} else { //-1
return 3 - y;
}
}
console.error("np出错了");
return 0;
} // 深拷贝
deepClone(values) {
var copy; // Handle the 3 simple types, and null or undefined
if(null == values || "object" != typeof values) return values; // Handle Date
if(values instanceof Date) {
copy = new Date();
copy.setTime(values.getTime());
return copy;
} // Handle Array
if(values instanceof Array) {
copy = [];
for(var i = 0, len = values.length; i < len; i++) {
copy[i] = this.deepClone(values[i]);
}
return copy;
} // Handle Object
if(values instanceof Object) {
copy = {};
for(var attr in values) {
if(values.hasOwnProperty(attr)) copy[attr] = this.deepClone(values[attr]);
}
return copy;
} throw new Error("Unable to copy values! Its type isn't supported.");
}
}
</script>
<script type="text/javascript">
var oneTwo = new OneTwo("one-two");
var canvas = document.getElementById("one-two");
console.log(canvas.getBoundingClientRect());
var offset;
canvas.addEventListener("click", function(e) {
offset = canvas.getBoundingClientRect();
var x = Math.floor((e.clientX - offset.left) / oneTwo.cellWidth);
var y = Math.floor((e.clientY - offset.top) / oneTwo.cellWidth);
console.log(x, y, "点击位置"); // 走棋
oneTwo.goStep(x, y);
}, false);
</script> </html>
玩法简介：
1. 一只一担是流传在中国米黄玉之乡的谭山镇的一种双人、益智、棋牌类游戏。棋盘是4*4的方格线，棋子放在线与线的交界处。棋子可以用任意两种可以区分的道具，如纸团、石子、木棍等。因此随时随地，只要在地上画个4*4的方格，弄几个石子什么的就可以玩了，非常的方便。
这个游戏分为两个阶段——谋篇布阵和征战。
刚开始，双方在棋盘上抢占有利位置，并互相征战。棋盘上位置占满后，一方弃掉自己的一个子，棋盘上就有空位置了，双方就开始交替移动棋子，进行征战，没有可以移动的棋子时，弃掉自己的一个棋子，轮到对方走棋。直到最后一方没有棋子了结束战斗。
吃子规则
两个（一担）可以吃掉对方的一个或者两个（一担）。具体图形如下（A——甲方，B——乙方，O——空位置）：
1. AABO——甲由?ABO，在第一个位置走一个棋后变成AABO；或者由A?BO，在第二个位置走一个棋后变成AABO。则第三个位置的乙方棋子被剔除棋盘，变成空位置，再由双方来争夺这个位置。
2.OAAB——甲由OA?B，在第三个位置走一个棋后变成OAAB；或者由O?AB，在第二个位置有一个棋后变成功能OAAB。则第四个位置的乙方棋子被剔除棋盘，变成空位置，再由双方来争夺这个位置。
3. AABB——甲由?ABB，在第一个位置走一个棋后变成AABB；或者由A?BB，在第二个位置有一个棋后变成功能AABB。则第三和第四个位置的乙方棋子都被剔除棋盘，变成空位置，再由双方来争夺这个位置。
其他的情况不可以吃棋。如以下两个图形。
1. AABA
2.AAAB
通常用这两种棋来防守，防止对方吃掉自己的棋子。
赶紧复制以下去玩玩吧~
最新文章
- android IOC框架学习记录
- C#——Marshal.StructureToPtr方法简介
- 可编译为 UNICODE 和 ANSI 版本的遍历目录树程序_0.1
- 【leetcode❤python】 38. Count and Say
- RedHat7搭建MongoDB集群
- Content Providers的步骤，来自官网文档
- JS通用方法扩展
- setsockopt、getsockopt详细介绍（转）
- Python基础篇-day2
- window对象screen、history
- PyTorch教程之Neural Networks
- JSP标签和JSTL
- Step by Step Guide on Yanhua ACDP Clear BMW EGS ISN
- server2003远程桌面设置一个用户
- Linux主机名域名修改问题
- Git 学习笔记--Git下的冲突解决
- nginx信号量
- linux并发concurrency控制
- Burpsuite的简单应用-y-Proxy
- java代码---------再练习ChatAt()的用法