使用纯js的小游戏，五子棋
?1 <!DOCTYPE html> ?2 <html> ?3 ????<head> ?4 ????????<meta charset="UTF-8"> ?5 ????????<title>五子棋</title> ?6 ????????<style type="text/css"> ?7 ????????????*{ ?8 ????????????????padding:0; ?9 ????????????????margin:0; 10 ????????????} 11 ????????????canvas{ 12 ????????????????margin:10px; 13 ????????????????border:2px solid #CCCCCC; 14 ?????????????????15 ????????????} 16 ????????????#box{ 17 ????????????????display:inline-block; 18 ????????????????position:absolute; 19 ????????????????margin-top: 200px; 20 ????????????????margin-left: 100px; 21 ????????????} 22 ????????????span{ 23 ????????????????font :24px "微软雅黑"; 24 ????????????????display: inline-block; 25 ????????????????height:50px; 26 ????????????} 27 ????????????input{ 28 ????????????????margin-top:30px; 29 ????????????????display:block; 30 ????????????????width:100px; 31 ????????????????height: 50px; 32 ????????????????font:16px "微软雅黑"; 33 ????????????????color:#fff; 34 ????????????????background-color: #0099cc; 35 ????????????} 36 ?????????????37 ????????</style> 38 ?????39 ????</head> 40 ????<body> 41 ????????<canvas width="640" height="640" id="cas"></canvas> 42 ????????<div id = "box"> 43 ????????????<span id= "txt"></span> 44 ????????????<input type = "button" id = "btn" value="重新开始" /> 45 ????????</div> 46 ?????????47 ?????????48 ????????????<script type="text/javascript"> 49 ?????????????50 ????????????var flag = true;//true代表白棋下的棋子，false 代表黑棋子 51 ????????????var isWin = false; 52 ????????????var step = 40; //设置每个棋子的高度是40 53 ????????????var txt = document.getElementById("txt"); 54 ?????????????55 ????????????var btn = document.getElementById("btn"); 56 ?????????????57 ????????????var cas = document.getElementById("cas");//画布 58 ?????????????59 ????????????var ctx = cas.getContext("2d"); 60 ????????????cas.style.backgroundImage = "url(img/an.jpg)"; 61 ????????????var img_b = new Image(); 62 ????????????img_b.src = "img/red.png"; 63 ????????????var img_w = new Image(); 64 ????????????img_w.src = "img/bg.png"; 65 ????????????//用二维数组来保存棋盘，0代表没有走过，1代表白棋走过。2代表黑气走过 66 ????????????var arr = ?new Array(16);//声明一个一维数组； 67 ????????????for(var i= 0;i<=15;i++){ 68 ????????????????arr[i] = new Array(16); 69 ????????????????for(var j= 0;j<=15;j++){ 70 ????????????????????arr[i][j] = 0; 71 ?????????????????????72 ????????????????} 73 ????????????} 74 ?????????????75 ?????????????76 ????????????//绘制棋盘 77 ????????????function drawLine(){ 78 ?????????????????79 ????????????????for(var i= 0;i<cas.width/step;i++){ 80 ????????????????????//画竖线 81 ????????????????????ctx.moveTo((i+1)*step,0); 82 ????????????????????ctx.lineTo((i+1)*step,cas.height); 83 ????????????????????//画横线 84 ????????????????????ctx.moveTo(0,(i+1)*step); 85 ????????????????????ctx.lineTo(cas.width,(i+1)*step); 86 ????????????????????ctx.stroke(); 87 ?????????????????????88 ????????????????} 89 ????????????} 90 ????????????//获取鼠标点击的位置。 91 ????????????cas.onclick = function(e){ 92 ????????????????//先判断游戏是否结束 93 ????????????????if(isWin){ 94 ????????????????????alert("游戏已经结束，请重新开始"); 95 ????????????????????return 0; 96 ????????????????} 97 ????????????????//判断棋子显示的地方，四条边上不显示棋子。 98 ????????????????//鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20） 99 // ???????????????var x = (e.clientX-10-20)/40 +1;100 // ???????????????var y = (e.clientY-10-20)/40 +1;101 ????????????????var x = (e.pageX-10-20)/40 +1;102 ????????????????var y = (e.pageY-10-20)/40 +1;103 ????????????????104 ????????????????//进行取整来确定棋子最终显示的位置。105 ????????????????x = parseInt(x);106 ????????????????107 ????????????????y = parseInt(y);108 ????????????????//如果超出棋盘或者在棋盘的边界直接返回，边界上不能画棋子。109 ????????????????if(x<=0||x>15||y<=0||y>15){110 ????????????????????alert("不可以在边界下棋子！");111 ????????????????????return;112 ????????????????}113 ????????????????114 ????????????????//判断这个位置是否已经显示过棋子115 ????????????????if(arr[x][y]!=0){116 ????????????????????alert("这个地方已经有棋子了，不可以重复棋子");117 ????????????????????return;118 ????????????????}119 ????????????????//判断显示黑棋还是白棋120 ????????????????if(flag){121 ????????????????????flag= false;//将标志设置为false,表示下次为黑子。122 ????????????????????drawChess(1,x,y);//调用函数画棋子123 ????????????????}else{124 ????????????????????flag = true;//将标志改为true,表示下次为白棋。125 ????????????????????drawChess(2,x,y);126 ????????????????}127 ????????????}128 ????????????129 ????????????//画棋子130 ????????????function drawChess(num,x,y){131 ????????????????//根据x和y确定图片显示的位置，让图片显示在十字线的中间。132 ????????????????//一个格子为40，图片大小为30，所以40-30/2等于25，所以加上25133 ????????????????var x0 = x*step ;134 ????????????????var y0 = y*step ;135 ????????????????if(num ==1 ){136 ????????????????????137 ????????????????????ctx.beginPath();138 ????????????????????ctx.arc(x0,y0,15,0,2*Math.PI);139 ????????????????????ctx.fillStyle ="#ff2233";140 ????????????????????//ctx.fillStyle.backgroundImage = "url(img/red.png)";141 ????????????????????ctx.fill();142 ????????????????????ctx.closePath();143 ????????????????????ctx.stroke();144 ????????????????????145 ????????????????????//ctx.drawImage(img_w,x0,y0);146 ????????????????????arr[x][y] = 1;//白子147 ????????????????}else if(num==2){148 ????????????????????ctx.beginPath();149 ????????????????????ctx.arc(x0,y0,15,0,2*Math.PI);150 ????????????????????ctx.fillStyle ="#008000";151 ????????????????????//ctx.fillStyle.backgroundImage ="url(img/f.png)";152 ????????????????????ctx.fill();153 ????????????????????ctx.closePath();154 ????????????????????ctx.stroke();155 ????????????????????//ctx.drawImage(img_b,x0,y0);156 ????????????????????arr[x][y] = 2;//黑子157 ????????????????}158 ????????????????159 ????????????????//调用函数判断输赢160 ????????????????judge(num,x,y);161 ????????????}162 ????????????163 ????????????function judge(num,x,y){164 ????????????????//左右方向，上下方向，左上右下，左下右上165 ????????????????var n1=0 , n2 = 0, n3= 0, n4 = 0;166 ????????????????//左右方向167 ????????????????for(var i=x ;i>0;i--){168 ????????????????????if(arr[i][y]!=num){169 ????????????????????????break;170 ????????????????????} 171 ????????????????????n1++; ???172 ????????????????}173 ????????????????for(var i= x+1;i<=15;i++){174 ????????????????????if(arr[i][y]!=num){175 ????????????????????????break;176 ????????????????????} 177 ????????????????????n1++;178 ????????????????}179 ????????????????//上下方向。180 ????????????????for(var j=y ;j>0;j--){181 ????????????????????if(arr[x][j]==num){182 ????????????????????????n2++;183 ????????????????????}else{184 ????????????????????????break;185 ????????????????????}186 ????????????????}187 ????????????????for(var j= y+1;j<=15;j++){188 ????????????????????189 ????????????????????if(arr[x][j]==num){190 ????????????????????????n2++;191 ????????????????????}else{192 ????????????????????????break;193 ????????????????????}194 ????????????????}195 ????????????????//左上到右下196 ????????????????for(var i= x,j= y;i>=0,j>=0;i--,j--){197 ????????????????????if(i<0||j<0||arr[i][j]!=num){198 ????????????????????????break;199 ????????????????????}200 ????????????????????n3++;201 ????????????????}202 ????????????????for(var i= x+1,j=y+1;i<=15,j<=15;i++,j++){203 ????????????????????if(i>15||j>15||arr[i][j]!=num){204 ????????????????????????break;205 ????????????????????}206 ????????????????????n3++;207 ????????????????}208 ????????????????//左下到右上209 ????????????????for(var i= x,j= y;i>0,j<=15;i--,j++){210 ????????????????????if(i<0||j>=15||arr[i][j]!=num){211 ????????????????????????break;212 ????????????????????}213 ????????????????????n4++;214 ????????????????}215 ????????????????for(var i= x+1,j=y-1;i<=15,j>=0;i++,j--){216 ????????????????????if(i>=15||j<0||arr[i][j]!=num){217 ????????????????????????break;218 ????????????????????}219 ????????????????????n4++;220 ????????????????}221 ????????????????//用一个定时器来延时，否则会显示对话框，然后才显示棋子。222 ????????????????//alert(n1+"--"+n2+"--"+n3+"--"+n4);223 ????????????????var str ;224 ????????????????if(n1>=5||n2>=5||n3>=5||n4>=5){225 ????????????????????if(num==1){226 ????????????????????????alert("恭喜白棋夺冠！");227 ????????????????????????str = "白棋赢了，游戏结束";228 ????????????????????}else if(num ==2){229 ????????????????????????alert("恭喜黑棋夺冠！");230 ????????????????????????str = "黑棋赢了，游戏结束";231 ????????????????????}232 ????????????????????txt.innerHTML = str;233 ????????????????????isWin ?= true;234 ????????????????}235 ????????????}236 ????????????237 ????????????//重新开始238 ????????????btn.onclick = function(){239 ????????????????falg = true;240 ????????????????isWin = false;241 ????????????????242 ????????????????for(var i= 0 ;i<=15;i++){243 ????????????????????for(var j= 0;j<=15;j++){244 ????????????????????????arr[i][j] =0;245 ????????????????????}246 ????????????????}247 ????????????????ctx.clearRect(0,0,640,640);248 ????????????????txt.innerHTML = "";249 ????????????????drawLine();250 ????????????}251 ????????????drawLine();252 ????????</script>253 ????</body>254 </html>现在可以开始玩喽！
js小游戏：五子棋
原文地址：http://www.cnblogs.com/tashaxing/p/7507072.html