画布之五子棋小游戏

来源：互联网发布：网络拓扑实时性分析编辑：程序博客网时间：2024/06/06 14:27

用画布加js实现了一个五子棋的小游戏，喜欢的朋友可以看看呦~

HTML部分

<body><canvas id="play" width="640px" height="640px"></canvas>        <button id="bBt">开始</button>        <span id="span">请先按开始</span>        </body>

css部分

<style>body{margin: 0px;padding: 0px;background: black;position: relative;}        #play{        margin-left: 200px;        background: #c0c0c0;        }        #bBt{        position: absolute;        width: 50px;        height: 30px;        }        span{        position: absolute;        top: 40px;        left: 850px;        width: 100px;        height: 30px;            color: #fff;        }</style>

js部分~

<script>window.onload=function(){var bBtu=document.getElementById('bBt');var oSpan=document.getElementById('span');var can=document.getElementById('play');var ctx=can.getContext('2d');var arr11=[];var arr12=[];var arr21=[];var arr22=[];        var arr31=[];        var arr32=[];        var BTu=true;ctx.moveTo(20,20);ctx.lineTo(20,620);ctx.lineTo(620,620);ctx.lineTo(620,20);ctx.lineTo(20,20);ctx.stroke();for(var i=20;i<620;i=i+40){          ctx.moveTo(20,i);          ctx.lineTo(620,i);          ctx.stroke();          ctx.moveTo(i,20);          ctx.lineTo(i,620);          ctx.stroke();}for(var j=20;j<640;j=j+40){           for(var k=20;k<640;k=k+40){             ctx.beginPath();             ctx.arc(j,k,3,0,2*Math.PI,false);             ctx.closePath();             ctx.fill();            }}var a=Math.random();var b=Math.random();        bBtu.onmousedown=function(){            if(BTu){                if (a>b) {            oSpan.innerHTML="此局黑子先落";        }else{            oSpan.innerHTML="此局白子先落";        }        BTu=false;             }    can.onmousedown=function(ev){            var e=ev||window.event;            var X=e.clientX;            var Y=e.clientY;            var x=Math.floor((X-220)/40)*40+40;            var y=Math.floor((Y-20)/40)*40+40;            var Btu=true;            for(var n=0;n<arr31.length;n++){                                        if(x==arr31[n]&&y==arr32[n]){                        Btu=false;                    }                }            if(Btu){            if(a>b){                b=2;                a=1;                ctx.fillStyle='#000';                ctx.beginPath();                ctx.arc(x,y,16,0,2*Math.PI,false);                ctx.closePath();                ctx.fill();                arr11.push(x);                arr12.push(y);                arr31.push(x);                arr32.push(y);                win(1);            }else{                a=2;                b=1;                ctx.fillStyle='#fff';                ctx.beginPath();                ctx.arc(x,y,16,0,2*Math.PI,false);                ctx.closePath();                ctx.fill();                              arr21.push(x);                arr22.push(y);                arr31.push(x);                arr32.push(y);                win(2);                   }    }}}function win(a){if(a==1){              for(var i=0;i<arr11.length;i++){              var arr111=[1,1,1,1];                     for(var j=0;j<arr11.length;j++){                     if(arr11[i]==arr11[j]&&((arr12[i]-arr12[j])==40||(arr12[i]-arr12[j])==80||(arr12[i]-arr12[j])==120||(arr12[i]-arr12[j])==160)){                        arr111[0]++;                        if(arr111[0]==5){                        alert("此局黑子胜");                        }                     }else if(arr12[i]==arr12[j]&&((arr11[i]-arr11[j])==40||(arr11[i]-arr11[j])==80||(arr11[i]-arr11[j])==120||(arr11[i]-arr11[j])==160)){                         arr111[1]++;                         if(arr111[1]==5){                         alert("此局黑子胜");                         }                     }                     for(var c=1;c<5;c++){                     if (arr11[i]-arr11[j]==c*40&&arr12[i]-arr12[j]==c*40) {                     arr111[2]++;                                if(arr111[2]==5){                             alert("此局黑子胜");                                }                     }                     if (arr11[i]-arr11[j]==c*40&&arr12[i]-arr12[j]==c*(-40)) {                         arr111[3]++;                                        if(arr111[3]==5){                                     alert("此局黑子胜");                                        }                                    }                         }                                           }                 }              }              if(a==2){  for(var n=0;n<arr21.length;n++){  var arr222=[1,1,1,1];                for(var m=0;m<arr21.length;m++){                                       if(arr21[n]==arr21[m]&&((arr22[n]-arr22[m])==40||(arr22[n]-arr22[m])==80||(arr22[n]-arr22[m])==120||(arr22[n]-arr22[m])==160)){                        arr222[0]++;                        if(arr222[0]==5){                        alert("此局白子胜");                        }                     }else if(arr22[n]==arr22[m]&&((arr21[n]-arr21[m])==40||(arr21[n]-arr21[m])==80||(arr21[n]-arr21[m])==120||(arr21[n]-arr21[m])==160)){                         arr222[1]++;                         if(arr222[1]==5){                         alert("此局白子胜");                         }                     }                     for(var d=1;d<5;d++){                     if (arr21[n]-arr21[m]==d*40&&arr22[n]-arr22[m]==d*40) {                     arr222[2]++;                                if(arr222[2]==5){                             alert("此局白子胜");                                }                     }                     if (arr21[n]-arr21[m]==d*40&&arr22[n]-arr22[m]==d*(-40)) {                         arr222[3]++;                                        if(arr222[3]==5){                                     alert("此局白子胜");                                        }                                    }                         }                              }  }}            }}</script>

0 0