h5五子棋游戏开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style type="text/css">
    canvas{
        display: block;/*此元素将显示为块级元素，此元素前后会带有换行符。*/
        margin: 100px auto;/*上间距 左间距*/
        box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;/*上下左右阴影部分*/
    }
    </style>
</head>
<body>
    <canvas id="chess" width="450px" height="450px"></canvas>
    <script language="javascript">
        var chess=document.getElementById('chess');
        var context=chess.getContext('2d');
        
        var me=true;
        var chessBoard = [];
        
        for (var i = 0; i < 15; i++) {
            chessBoard[i] = [];
            for (var j = 0; j < 15; j++) {
                chessBoard[i][j] = 0;
            }
        }
        
        var wins = [];
        var count = 0;

        for(var i = 0; i < 15; i++) {
            wins[i] = [];
            for (var j = 0; j < 15; j++) {
                wins[i][j] = [];
            }
        }

        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++;
            }
        }
        
        var myWin=[];
        var computerWin=[];
        var over=false;
        
        for(var i=0;i<count;i++){
            myWin[i]=0;
            computerWin[i]=0;
        }
                

        console.log(count);
        
        context.strokeStyle="#BFBFBF";
        
        var logo=new Image();
        logo.src="./king.jpg";
        logo.onload=function(){
            context.drawImage(logo,0,0,450,450);
            drawChessBoard();
            oneStep(7,7,false);
        }
        
        var drawChessBoard=function(){
            for(var i=0; i<15; i++){
                context.moveTo(15+i*30,15);
                context.lineTo(15+i*30,430);
                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();
        }
        
        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(chessBoard[i][j]==0){
                oneStep(i,j,me);    
                chessBoard[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(chessBoard[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);
            chessBoard[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;
            }
        }
    </script>
</body>
</html>

最后编辑于：2017.12.06 00:08:47

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,839评论 6赞 482
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,543评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 153,116评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,371评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,384评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,111评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,416评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,053评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,558评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,007评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,117评论 1赞 334
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,756评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,324评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,315评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,539评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,578评论 2赞 355
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,877评论 2赞 345

h5五子棋游戏开发

推荐阅读更多精彩内容