js实现简单五子棋游戏


Posted in Javascript onMay 28, 2020

本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下

html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>五子棋</title>
 <link rel="stylesheet" href="css/style.css" />
 </head>
 <body>
 <canvas id="chess" width="450px" height="450px"></canvas>
 <script type="text/javascript" src="js/script.js" ></script>
 </body>
</html>

css

canvas{
 display: block;
 margin: 50px auto;
 box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
}

js

var me = true;
var over = false;
var chessBox = [];
var wins = [];  //定义三维数组
//赢法统计数组
var myWin = [];
var computerWin = [];
for(i=0;i<15;i++){
 chessBox[i]=[];
 for(j=0;j<15;j++){
 chessBox[i][j]=0;
 } 
}
for(var i=0;i<15;i++){
 wins[i]=[];
 for(var j=0;j<15;j++){
 wins[i][j]=[];
 }
}
var count =0;
//所有横线
for(var i=0;i<15;i++){
 for(var j=0;j<11;j++){
 //执行1次
 // wins[0][0][0]=true;
 // wins[0][1][0]=true;
 // wins[0][2][0]=true;
 // wins[0][3][0]=true;
 // wins[0][4][0]=true;
 //执行2次
 // wins[0][1][1]=true;
 // wins[0][2][1]=true;
 // wins[0][3][1]=true;
 // wins[0][4][1]=true;
 // wins[0][5][1]=true;
 for(var k=0; k<5;k++){
 wins[i][j+k][count] = true;
 }
 count++;
 }
}
//所有竖线
for(var i=0;i<15;i++){
 for(var j=0;j<11;j++){
 for(var k=0; k<5;k++){
 wins[j+k][i][count] = true;
 }
 count++;
 }
}
//所有斜线
for(var i=0;i<11;i++){
 for(var j=0;j<11;j++){
 for(var k=0; k<5;k++){
 wins[i+k][j+k][count] = true;
 }
 count++;
 }
}
//所有反斜线
for(var i=0;i<11;i++){
 for(var j=14;j>3;j--){
 for(var k=0; k<5;k++){
 wins[i+k][j-k][count] = true;
 }
 count++;
 }
}
 
console.log(count);
for (var i=0;i<count;i++) {
 myWin[i] = 0;
 computerWin[i] = 0;
}
 
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
context.strokeStyle = "#BFBFBF";
var logo= new Image();
logo.src = "img/木头.jpg";
logo.onload = function(){
 context.drawImage(logo,0,0,450,450);
 drawChessBoard();
// oneStep(0,0,true);
// oneStep(1,1,false);
}
function drawChessBoard(){
 for(var i=0;i<15;i++){
 context.moveTo(15+i*30,15);
 context.lineTo(15+i*30,435);
 context.moveTo(15,15+i*30);
 context.lineTo(435,15+i*30);
 context.stroke();
 }
 
}
var oneStep = function(i,j,me){
 context.beginPath();
 context.arc(15+i*30,15+j*30,13,0,2*Math.PI);
 context.closePath();
 var gradient = context.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);
 if(me){
 gradient.addColorStop(0,"#0A0A0A");
 gradient.addColorStop(1,"#636766");
 }else{
 gradient.addColorStop(0,"#D1D1D1");
 gradient.addColorStop(1,"#F9F9F9");
 }
 
 context.fillStyle = gradient;
 context.fill();
}
 
chess.onclick = function(e){
 if(over){
 return;
 }
 if(!me){
 return;
 }
 var x = e.offsetX;
 var y = e.offsetY;
 var i = Math.floor(x/30); //i,j为索引序列号
 var j = Math.floor(y/30);
 if(chessBox[i][j]==0){
 oneStep(i,j,me);
 
 chessBox[i][j]=1;
 
 
 for(var k=0;k < count; k++){
 if(wins[i][j][k]) {
 myWin[k]++;
 computerWin[k] = 6; //设置异常值
 if(myWin[k] == 5) {
 window.alert("你赢了");
 over = true;
 }
 }
 }
 if(!over){
 me=!me;
 computerAI();
 }
 } 
 
}
var computerAI = function(){
 var myScore = [];
 var computerScore = [];
 var max = 0; //保存最高分数;
 var u = 0, v =0; //保存坐标
 for(var i=0;i<15;i++){
 myScore[i] = [];
 computerScore [i] = [];
 for(var j=0;j<15;j++){
 myScore[i][j] = 0;
 computerScore[i][j] = 0;
 }
 }
 for (var i=0; i<15;i++) {
 for (var j=0;j<15;j++) {
 if(chessBox[i][j] == 0){
 for(var k =0 ;k<count;k++){
 if(wins[i][j][k]){
 if(myWin[k]==1){
 myScore[i][j]+= 200;
 }else if(myWin[k]==2){
 myScore[i][j]+= 400;
 }else if(myWin[k]==3){
 myScore[i][j]+= 2000;
 }else if(myWin[k]==4){
 myScore[i][j]+= 10000;
 }
 if(computerWin[k]==1){
 computerScore[i][j]+= 220;
 }else if(computerWin[k]==2){
 computerScore[i][j]+= 420;
 }else if(computerWin[k]==3){
 computerScore[i][j]+= 2020;
 }else if(computerWin[k]==4){
 computerScore[i][j]+= 10020;
 }
 }
 }
 if(myScore[i][j]>max){
 max = myScore[i][j];
 u = i;
 v = j;
 }else if(myScore[i][j] == max){
 if(computerScore[i][j] > computerScore[u][v]){
 u = i;
 v = j;
 }
 }
 if(computerScore[i][j]>max){
 max = computerScore[i][j];
 u = i;
 v = j;
 }else if(computerScore[i][j] == max){
 if(myScore[i][j] > myScore[u][v]){
 u = i;
 v = j;
 }
 }
 }
 }
 }
 oneStep(u,v,false);
 chessBox[u][v] = 2;
 for(var k=0;k < count; k++){
 if(wins[u][v][k]) {
 computerWin[k]++;
 myWin[k] = 6; //设置异常值
 if(computerWin[k] == 5) {
 window.alert("计算机赢了");
 over = true;
 }
 }
 }
 if(!over){
 me=!me; 
 }
}

js实现简单五子棋游戏

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
javascript工具库代码
Mar 29 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
js实现双人五子棋小游戏
May 28 #Javascript
vue实现五子棋游戏
May 28 #Javascript
用vue 实现手机触屏滑动功能
May 28 #Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
JS替换字符串中指定位置的字符(多种方法)
May 28 #Javascript
js实现九宫格布局效果
May 28 #Javascript
You might like
笑谈配置,使用Smarty技术
2007/01/04 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue内置指令详解
2018/04/03 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python实现图像拼接功能
2020/03/23 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
商务英语专业应届毕业生求职信
2013/10/28 职场文书
网络编辑求职信
2014/04/30 职场文书
工地安全质量标语
2014/06/07 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL