JS+canvas实现的五子棋游戏【人机大战版】
程序员文章站
2022-05-26 08:22:55
本文实例讲述了js+canvas实现的五子棋游戏。分享给大家供大家参考,具体如下:
运行效果图:
html代码如下:
本文实例讲述了js+canvas实现的五子棋游戏。分享给大家供大家参考,具体如下:
运行效果图:
html代码如下:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" /> </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>
style.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; }
script.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(); }
ps:这里再为大家推荐另一款本站的js版五子棋游戏供大家参考(其ai相对简单一些)
在线五子棋游戏:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript数据结构与算法技巧总结》、《javascript数学运算用法总结》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》及《javascript遍历算法与技巧总结》
希望本文所述对大家javascript程序设计有所帮助。