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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
非常好的js代码
2006/06/27 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python在线运行代码助手
2016/07/15 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
对Python _取log的几种方式小结
2019/07/25 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python入门之基础语法学习笔记
2020/02/08 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
主持人演讲稿范文
2013/12/28 职场文书
淘宝活动策划方案
2014/02/06 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
小学教师见习总结
2015/06/23 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python