JS+canvas实现人机大战之五子棋

效果图:

html代码如下:

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

css代码如下:

canvas{
    display: block;
    margin: 50px auto;
    box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
}
.restart{
    text-align: center;
}
.restart>span{
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background-color: #45c01a;
    border-radius: 5px;
}
js代码如下:

var over = false;
var me = true; //我

var chressBord = [];//棋盘
for(var i = 0; i < 15; i++){
    chressBord[i] = [];
    for(var j = 0; j < 15; j++){
        chressBord[i][j] = 0;
    }
}

//赢法的统计数组
var myWin = [];
var computerWin = [];

//赢法数组
var wins = [];
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++){
        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++;
    }
}

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/logo.png‘;
logo.onload  = function(){
    context.drawImage(logo,0,0,450,450);
    drawChessBoard();
}

document.getElementById("restart").onclick = function(){
    window.location.reload();
}
chess.onclick = function(e){
    if(over){
        return;
    }
    if(!me){
        return;
    }
    var x = e.offsetX;
    var y = e.offsetY;
    var i = Math.floor(x / 30);
    var j = Math.floor(y / 30);
    if(chressBord[i][j] == 0){
        oneStep(i,j,me);
        chressBord[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(chressBord[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] += 2100;
                        }else if(computerWin[k] == 4){
                            computerScore[i][j] += 20000;
                        }                        
                    }
                }
                
                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);
    chressBord[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;
    }
}

//绘画棋盘
var drawChessBoard = function(){
    for(var i = 0; i < 15; i++){
        context.moveTo(15 + i * 30 , 15);
        context.lineTo(15 + i * 30 , 435);
        context.stroke();
        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 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 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();
}

时间: 2024-10-30 11:45:28

JS+canvas实现人机大战之五子棋的相关文章

人机大战输赢不重要!重要的是说人话

一场人机大战,很体育,更娱乐,还营销,以前估计十个里,5个不知道AI,现在大约只有3个了,其中一个还是说人工智能. 文/张书乐 刊载于<株洲日报>3月14日天台时评版 3月9日,曾经击败过欧洲围棋冠军的人工智能程序"阿尔法围棋",挑战韩国围棋冠军李世石.比赛结果如何?翻翻报纸吧.至少对于这场比赛的输赢,我不关心. 赢了也好输了也罢,就那么回事.关心的话,你就中了折腾出这个下棋程序的谷歌的套了. 为什么这么说呢?因为依据我从小到大玩游戏的经验,无论是围棋.象棋.跳棋还是五子棋

人机大战一直有,玩游戏就是最近体验

也不能小瞧了上个世纪在游戏程序里看起来比较弱智的人工智能程序,许多人至今也未必打得赢麻将游戏里的"程序". 文/张书乐 原载于<人民邮电报>2016年4月15日<乐游记>专栏 和"阿尔法狗"下棋是什么感觉?或许对于作为普通群众的我们来说,这种体验还很难成真.但对于游戏玩家来说,这样的人机大战,其实每天都在上演.别的不说,和电脑对战过麻将.五子棋的人总不算少.至少对我而言,从小到大,无论是在街机.家用游戏机还是个人电脑.手机上,和电脑对战这些棋

java智能四子棋人机大战游戏设计(附项目,以及原创PSD,设计文档)

本项目是使用java技术+自创"假设下子"算法开发的人机大战四子棋游戏客户端. 具体项目,以及原创PSD,设计文档,在文件末尾的百度云连接. 一. 小组说明: 组名:CST 组长:陈飞良(C): 组员: 沈珂 (S): 谭明航 (T): 二.分工说明: ①算法思想上: 本程序的代码实现思想由三人共同讨论得出,其中组员沈珂的"假设下子"思想尤为精妙,让代码实现更为简单,在这基础上,组员谭明航 ,心思缜密,考虑到各种特殊情况,让整个更加智能.组长陈飞良则负责在他们的基础

围棋人机大战:为什么AlphaGo不首先挑战中国棋手?(无责任猜测,不幸猜中不胜荣幸)

人机围棋大战 最近李世石出名了,阿尔法狗出名了,谷歌上头条了! 李世石虽然连输三盘,但第四盘扳回一局,第五局明天开战.期间国内各大棋手纷纷表示"不服",要求挑战谷歌的这只狗狗,那么问题来了: 谷歌为什么 要选择挑战韩国棋手李世石,而不挑战中国棋手呢?要知道如果挑战中国围棋高手,如果此战在中国发生的话,那么这个话题的热度绝对不是现在的10倍! 为什么人工智能应用在围棋上是很牛B的? 这个问题的答案相信很多朋友已经知道了.很多年前的深蓝大战人类已经让世界为之瞩目,而围棋因为下子的可能性太多

人机大战结束:AlphaGo 4:1 击败李世石

腾讯科技 雷建平 3月15日报道 人机大战第五场今日中午12时继续在韩国首尔进行,经过长达5个小时搏杀,李世石认输,最终李世石与AlphaGo总比分定格在1比4.李世石仅在3月13日结束的第四场对战中取得了唯一的一场胜利. 在第五场比赛前,李世石显得轻松很多,入场时是带着女儿一起,还面带微笑. 这也很正常,此前,当人类认为谷歌AlphaGo不可能这么快就战胜人类顶尖棋手时,结局是3:0:当人类认为AlphaGo高维打低维,轻松碾压人类时,李世石扳回一局1:3. 这场比赛无法再制造足够的意外,也无

介绍一款Android小游戏--交互式人机对战五子棋

文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6589025 学习Android系统开发之余,编写了一个小游戏--交互式人机对战五子棋,自娱自乐.之所以称之为交互式人机对战五子棋,一是因为在进入人机对战模式这前,你可以任意设置好开局,同时,在对战过程中,你可以看到机器的思考过程,还可以标识出每一个落子点的优劣势:二是因为可以为机器增加游戏经验,使得机器越来越聪明.希望喜欢五子棋的同学能够喜欢,

我与小娜(36):人机大战第五局,AlphaGo必胜!

我与小娜(36):人机大战第五局,AlphaGo必胜!       小娜知道,细致阅读论文"Mastering the game of Go with deep neural networksand tree search".信心倍增.深信人机大战第五局,AlphaGo必胜!       这篇论文发表在英国<自然>杂志(2016.01.27)上.深入阐述了AlphaGo的工作原理. 3月13日.李世石声称发现了AlphaGo的弱点.这纯粹是胡说八道!       我觉得,A

用原生js+canvas实现五子棋

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>五子棋</title> 6 <link rel="stylesheet" href="css/style.css" /> 7 </head> 8 <body> 9 <h3 id="r

原生js canvas 碰撞游戏的开发笔记2

随着碰撞游戏一的开发成功! 我们的ae小伙子也大胆尝试很多新方案h5.. 所以就诞生了下面个比较变态的游戏. 先体验下吧 类似坦克大战 开发的过程异常的艰辛 不过也很好玩 修正了很多一的错误 和改良了一些思路 1. 原先的canvas的_this存在的全局污染 改良后避免了99% 为了获取windowtouch属性 还是有1%的 希望在三修正 2. 所有的递归函数变缓动函数requestAnimationFrame 增强性能 使动画更流畅 3. 数据和图像分离的更彻底 结构更清晰 对象的创建 对