Html+Vue实现五子棋游戏（单机版）

效果图：

源码如下：

感谢"追光者♂"的代码借鉴

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>开始游戏</title><link rel="stylesheet" href="../css/game.css"><script src="../js/jquery-3.4.1.js"></script><script src="../js/vue.js"></script><style>*{margin:0;padding:0;font-size:14px;font-family: '微软雅黑';}body{background: rgb(244, 245, 247);/* background:rgb(78, 70, 46); */}#app{display: flex;height: 100vh;width: 100%;}.main{margin: auto;}.tips{font-weight: bold;}#side2{display: none;}#mycanvas{display: block;box-shadow: -2px -2px 2px #F3F2F2,5px 5px 5px #6F6767;background: rgb(253, 222, 154);/* background: rgb(163, 143, 86); *//* width:450px;height: 450px; */}.hint,.btn{height: 10vh;line-height: 10vh;}.btn{text-align: right;}.btn input{padding:3px 10px;border-radius: 5px;background: rgb(113, 181, 245);color:white;border:none;cursor: pointer;}</style>
</head>
<body><div id="app"><div class="main"><p class="hint"><span class="tips">落子方：</span> <canvas id="side" width="30px" height="30px">你的浏览器不支持 canvas，请升级你的浏览器。</canvas><canvas id="side2" width="30px" height="30px">你的浏览器不支持 canvas，请升级你的浏览器。</canvas></p><p><canvas @click="fill"  id="mycanvas" width="450px" height="450px">你的浏览器不支持 canvas，请升级你的浏览器。</canvas></p><p class="btn"><input type="button" @click="repentance" value="悔棋"></p></div></div><script>new Vue({el:'#app',data(){return{me:true,   //true 为黑棋，false为白棋chessBox:[],   //棋局情况chess:"",       //div对象context:"",     //棋局画布x:-1,   //悔棋清理x坐标y:-1,   //悔棋清理y坐标i:-1,   //预选落子位置x坐标j:-1,   //预选落子位置y坐标}},mounted(){// var chess = document.getElementById("mycanvas");// var context = chess.getContext('2d');this.chess = document.getElementById("mycanvas");this.context = this.chess.getContext('2d');//描绘落子方棋  黑棋  白棋var side = document.getElementById("side");var cont = side.getContext('2d');var bg = cont.createRadialGradient(15,15,13,15,15,0);bg.addColorStop(0,'#0a0a0a');bg.addColorStop(1,'#636766');cont.fillStyle = bg;cont.arc(15,15,13,0,2*Math.PI);cont.fill();var side2 = document.getElementById("side2");var cont2 = side2.getContext('2d');var bg2 = cont2.createRadialGradient(15,15,13,15,15,0);bg2.addColorStop(0,'#D1D1D1');bg2.addColorStop(1,'#F9F9F9');cont2.fillStyle = bg2;cont2.arc(15,15,13,0,2*Math.PI);cont2.fill();//初始化棋盘for(var i = 0;i< 15;i++){this.chessBox[i] = [];for(var j = 0;j< 15;j++){this.chessBox[i][j] = -1;}}console.log(this.chessBox);//规划棋盘网格线for(var i = 0;i< 15;i++){// context.strokeStyle="#D6D1D1";this.context.strokeStyle="rgb(163, 143, 86)";this.context.moveTo(15+i*30,15);this.context.lineTo(15+i*30,435);this.context.stroke();this.context.moveTo(15,15+i*30);this.context.lineTo(435,15+i*30);this.context.stroke();}//绘制棋盘中的五个点var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+3*30,15+3*30,5,0,2*Math.PI);this.context.arc(15+3*30,15+11*30,5,0,2*Math.PI);this.context.fill();this.context.beginPath();this.context.arc(15+7*30,15+7*30,5,0,2*Math.PI);this.context.fill();this.context.beginPath();this.context.arc(15+11*30,15+3*30,5,0,2*Math.PI);this.context.arc(15+11*30,15+11*30,5,0,2*Math.PI);this.context.fill();},methods:{//落子操作，画棋子oneStep(i,j,k){this.chess = document.getElementById("mycanvas");this.context = this.chess.getContext('2d');this.context.beginPath();this.context.arc(15+i*30,15+j*30,13,0,2*Math.PI);var g = this.context.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);if(k){g.addColorStop(0,'#0a0a0a');g.addColorStop(1,'#636766');}else{g.addColorStop(0,'#D1D1D1');g.addColorStop(1,'#F9F9F9');}this.context.fillStyle = g;this.context.fill();this.context.closePath();},//获取落子，加入到数组fill:function(event){var x = event.offsetX;var y = event.offsetY;var i = Math.floor(x/30);var j = Math.floor(y/30);//预选落子位置if(this.chessBox[i][j] == -1){//清理之前的预选落子位置if((this.i != i || this.j != j) && this.i != -1 || this.j != -1){this.chessBox[this.i][this.j] = -1;//擦拭预选框this.context.clearRect((this.i) * 30, (this.j) * 30, 30, 30);//重绘网格线this.context.beginPath();// this.context.strokeStyle="rgb(163, 143, 86)";this.context.strokeStyle="rgb(78, 70, 46)";this.context.moveTo(15+this.i*30 , this.j*30);this.context.lineTo(15+this.i*30 , this.j*30 + 30);this.context.moveTo(this.i*30, this.j*30+15);this.context.lineTo((this.i+1)*30 , this.j*30+15);this.context.stroke();//如果是在五个棋盘点的位置，重绘棋盘点if(this.i == 3 && this.j == 3){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+3*30,15+3*30,5,0,2*Math.PI);this.context.fill();}else if(this.i == 3 && this.j == 11){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+3*30,15+11*30,5,0,2*Math.PI);this.context.fill();}else if(this.i == 7 && this.j == 7){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+7*30,15+7*30,5,0,2*Math.PI);this.context.fill();}else if(this.i == 11 && this.j == 3){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+11*30,15+3*30,5,0,2*Math.PI);this.context.fill();}else if(this.i == 11 && this.j == 11){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+11*30,15+11*30,5,0,2*Math.PI);this.context.fill();}}//赋值宇轩落子位置  this.i = i;this.j = j;this.chessBox[i][j] = 0;//画预选框var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"red");round.addColorStop(1,"red");this.context.fillStyle = round;//描绘预选样式this.context.strokeStyle="red";this.context.beginPath();this.context.arc(15+i*30,15+j*30,4,0 ,2*Math.PI);this.context.stroke();this.context.fill();this.context.beginPath();this.context.arc(15+i*30,15+j*30,10,0.8*Math.PI ,1.2*Math.PI);this.context.stroke();this.context.beginPath();this.context.arc(15+i*30,15+j*30,10,1.3*Math.PI ,1.7*Math.PI);this.context.stroke();this.context.beginPath();this.context.arc(15+i*30,15+j*30,10,1.8*Math.PI ,2.2*Math.PI);this.context.stroke();this.context.beginPath();this.context.arc(15+i*30,15+j*30,10,2.3*Math.PI ,2.7*Math.PI);this.context.stroke();return;}//再次点击预选位置，正式落子if(this.chessBox[i][j] == 0){this.$options.methods.oneStep(i,j,this.me);if(this.me){this.chessBox[i][j] = 1;}else{this.chessBox[i][j] = 2;}//赋值最近的落子坐标this.x = i;this.y = j;//正式落子，清理预选落子坐标this.i = -1;this.j = -1;//判断是否胜利if(this.$options.methods.transverseWin(i,j,this.chessBox) || this.$options.methods.longitudinalWin(i,j,this.chessBox) || this.$options.methods.southeastWin(i,j,this.chessBox) ||this.$options.methods.southwestWin(i,j,this.chessBox)){// console.log(this.me);if(this.me){alert('黑棋获胜！');}else{alert('白棋获胜！');}}// this.$options.methods.transverseWin(i,j,this.chessBox);// this.$options.methods.longitudinalWin(i,j,this.chessBox);// this.$options.methods.southeastWin(i,j,this.chessBox);// this.$options.methods.southwestWin(i,j,this.chessBox);//切换落子方this.me=!this.me;//切换落子方提示if(this.me){$('#side2').css('display','none');$('#side').css('display','inline');}else{$('#side').css('display','none');$('#side2').css('display','inline');}}},//横向胜利transverseWin(i,j,chessBox){var min = i - 4 < 0 ? 0 : i - 4;var max = i + 4 > 14 ? 14 : i + 4;var count = 1;for(var index = min;index < max;index++){if(chessBox[index][j] <= -1){continue;}if(chessBox[index][j]==chessBox[index+1][j]){count++;}else{count = 1;}if(count == 5){return true;}}},//纵向胜利longitudinalWin(i,j,chessBox){var min = j - 4 < 0 ? 0 : j - 4;var max = j + 4 > 14 ? 14 : j + 4;var count = 1;for(var index = min;index < max;index++){if(chessBox[i][index] <= -1){continue;}if(chessBox[i][index]==chessBox[i][index+1]){count++;}else{count = 1;}if(count == 5){return true;}}},//东南获胜southeastWin(i,j,chessBox){var count = 1;for(var index = 0; index < 14 ;index++){for(var jndex = 0;jndex < 14;jndex++){if(chessBox[index][jndex] == -1){continue;}if(chessBox[index][jndex] == chessBox[index+1][jndex+1] && (j - i)==(jndex - index)){count++;// console.log(index + ' ' + jndex + ' ' + count);}if(count==5){return true;}}}},//西南获胜southwestWin(i,j,chessBox){var count = 1;for(var index = 14; index > 0 ;index--){for(var jndex = 0;jndex < 14;jndex++){if(chessBox[index][jndex] == -1){continue;}if(chessBox[index][jndex] == chessBox[index-1][jndex+1] && (j + i)==(jndex + index)){count++;// console.log(index + ' ' + jndex + ' ' + count);}if(count==5){return true;}}}},//悔棋repentance(){// console.log(this.x + ' ' + this.y);if(this.x == -1 || this.y == -1){return;}//擦拭棋子this.context.clearRect((this.x) * 30, (this.y) * 30, 30, 30);//重绘网格线this.context.beginPath();// this.context.strokeStyle="rgb(163, 143, 86)";this.context.strokeStyle="rgb(78, 70, 46)";this.context.moveTo(15+this.x*30 , this.y*30);this.context.lineTo(15+this.x*30 , this.y*30 + 30);this.context.moveTo(this.x*30, this.y*30+15);this.context.lineTo((this.x+1)*30 , this.y*30+15);this.context.stroke();//如果是在五个棋盘点的位置，重绘棋盘点if(this.x == 3 && this.y == 3){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+3*30,15+3*30,5,0,2*Math.PI);this.context.fill();}else if(this.x == 3 && this.y == 11){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+3*30,15+11*30,5,0,2*Math.PI);this.context.fill();}else if(this.x == 7 && this.y == 7){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+7*30,15+7*30,5,0,2*Math.PI);this.context.fill();}else if(this.x == 11 && this.y == 3){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+11*30,15+3*30,5,0,2*Math.PI);this.context.fill();}else if(this.x == 11 && this.y == 11){var round = this.context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"rgb(163, 143, 86)");this.context.fillStyle = round;this.context.beginPath();this.context.arc(15+11*30,15+11*30,5,0,2*Math.PI);this.context.fill();}//将棋盘棋子数据去除this.chessBox[this.x][this.y] = 0;//切换落子this.me = !this.me;//切换落子方提示if(this.me){$('#side2').css('display','none');$('#side').css('display','inline');}else{$('#side').css('display','none');$('#side2').css('display','inline');}//清理悔棋坐标this.x = -1;this.y = -1;},}})</script>
</body>
</html>

点赞过100，我就把五子棋网页联机版做出来。

Html+Vue实现五子棋游戏（单机版）相关推荐

做一个简单的java小游戏--单机版五子棋
做一个简单的java小游戏–单机版五子棋学了java有一段时间了,今天就来搞一个简单的单机版五子棋游戏. 实现功能:那必须能进行基础的输赢判断.还有重新开始的功能,悔棋的功能,先手设置的功能和退出的 ...
课程设计-单机版五子棋游戏-Java
一. 项目简介: 五子棋是全国智力运动会竞技项目之一,是一种两人对弈的纯策略型棋类游戏.五子棋的玩法是:双方分别使用黑白两色的棋子,下在棋盘直线与横线的交叉点上,先形成五子连线者获胜.五子棋的棋具与围 ...
简单五子棋（单机版-C）
简单五子棋(单机版-C) 一个简单的五子棋过程. 之实现了开局和判断胜负.缺少载入棋谱,保存棋谱. #include <stdio.h> //图形输出棋盘 printGraphicBoar ...
基于android的五子棋游戏app
该设计为一个单机版的五子棋游戏,人机对战,对难易程度的设置,来改变机器下棋的攻守程度,从而实现胜负的难易.要求实现难,中,易三种游戏难度,游戏界面美观大方,学生具备一定的数据结构,算法分析能力,具有A ...
基于android的五子棋游戏
该设计为一个单机版的五子棋游戏,人机对战,对难易程度的设置,来改变机器下棋的攻守程度,从而实现胜负的难易.要求实现难,中,易三种游戏难度,游戏界面美观大方,学生具备一定的数据结构,算法分析能力,具有A ...
[内附完整源码和文档] 基于Android的移动手机端五子棋游戏APP的设计与实现
一.项目概述近年来,随着安卓手机的普及,安卓游戏成为广大用户关注的方向.五子棋作为一个棋类竞技运动,在民间十分流行,为了熟悉五子棋规则及技巧,以及研究简单的人工智能,决定用Java开发五子棋游戏,主 ...
编写五子棋的完整python代码_python制作简单五子棋游戏
本文实例为大家分享了python五子棋游戏的具体代码,供大家参考,具体内容如下 #五子棋 '" 矩阵做棋盘 16*16 "+" 打印棋盘 for for 游戏是否结束开 ...
基于python的游戏设计与实现-python五子棋游戏的设计与实现
这个python的小案例是五子棋游戏的实现,在这个案例中,我们可以实现五子棋游戏的两个玩家在指定的位置落子,画出落子后的棋盘,并且根据函数判断出输赢的功能. 这个案例的思路如下所示: 首先,根据棋盘的 ...
c语言五子棋开题报告,基于VC的五子棋游戏的设计与实现(附答辩记录)
基于VC的五子棋游戏的设计与实现(附答辩记录)(包含选题审批表,任务书,开题报告,中期检查报告,毕业论文12300字,程序) 摘要:以计算机技术和网络技术为核心的现代网络技术已在现实生活和生产中得以 ...

Html+Vue实现五子棋游戏（单机版）

点赞过100，我就把五子棋网页联机版做出来。

Html+Vue实现五子棋游戏（单机版）相关推荐

最新文章

热门文章