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获取变量
Aug 24 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
js实现倒计时关键代码
May 05 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
需要注意的几个PHP漏洞小结
2012/02/05 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
python3.0 字典key排序
2008/12/24 Python
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
群众路线剖析材料
2014/02/02 职场文书
手机银行营销方案
2014/03/14 职场文书
实习单位鉴定评语
2014/04/26 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
关于开学的感想
2015/08/10 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
初一数学教学反思
2016/02/17 职场文书