用javascript设计五子棋(JavaScript实现网页版五子棋游戏)
类别:编程学习 浏览量:1932
时间:2021-10-07 00:32:24 用javascript设计五子棋
JavaScript实现网页版五子棋游戏本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码,供大家参考,具体内容如下
学习js的第三天,跟着老师完成的五子棋小游戏,记录学习成果欢迎大佬们一起分享经验,批评指正。
本程序主要通过三部分实现:
1.棋盘绘制
2.鼠标交互
3.输赢判断
<!DOCTYPE html> <html> <head> <title> canvastest </title> </head> <body> <h1> canvas</h1> <canvas id="canvas"width="400"height="400"> </canvas> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> var canv=document.getElementById("canvas"); var ctx=canv.getContext("2d"); ctx.strokeStyle="black"; var bow=0; //画出棋盘; var matrix=[ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], ]; ctx.beginPath(); for(var i=0;i<19;i++){ ctx.moveTo(10+20*i,10); ctx.lineTo(10+i*20,370); ctx.moveTo(10,20*i+10); ctx.lineTo(370,i*20+10); } ctx.stroke(); //鼠标交互; $("#canvas").click(function(event) { console.log(event.offsetX) console.log(bow); var arcPosX,arcPosY; var mtxPosX,mtxPosY; for(var x=0;x<19;x++) { if((Math.abs(event.offsetX-(10+x*20)))<10) { arcPosX=10+x*20; mtxPosX=x; } if((Math.abs(event.offsetY-(10+x*20)))<10) { arcPosY=10+x*20; mtxPosY=x; } } if(matrix[mtxPosX][mtxPosY] == 0) { bow=!bow; ctx.beginPath(); if(bow){ ctx.fillStyle="Black"; ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false); matrix[mtxPosX][mtxPosY]=1; } else{ ctx.fillStyle="White"; ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false); ctx.stroke(); matrix[mtxPosX][mtxPosY]=2; } ctx.fill(); } //实现输赢判断 var winFlag=0; if(winFlag==0){ if(matrix[mtxPosX-1][mtxPosY] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-2][mtxPosY] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-3][mtxPosY] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-4][mtxPosY] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { if(matrix[mtxPosX+1][mtxPosY] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { winFlag = 0; } } } else { for(var w = 0; w < 2 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 3 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 4 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } if(matrix[mtxPosX][mtxPosY-1] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX][mtxPosY-2] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX][mtxPosY-3] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX][mtxPosY-4] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { if(matrix[mtxPosX][mtxPosY+1] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { winFlag = 0; } } } else { for(var w = 0; w < 2 ; w ++) { if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 3 ; w ++) { if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 4 ; w ++) { if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } if(matrix[mtxPosX-1][mtxPosY-1] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-2][mtxPosY-2] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-3][mtxPosY-3] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-4][mtxPosY-4] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { if(matrix[mtxPosX+1][mtxPosY+1] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { winFlag = 0; } } } else { for(var w = 0; w < 2 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 3 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 4 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } if(matrix[mtxPosX-1][mtxPosY+1] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-2][mtxPosY+2] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-3][mtxPosY+3] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-4][mtxPosY+4] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { if(matrix[mtxPosX+1][mtxPosY-1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; } else { winFlag = 1; } } } else { for(var w = 0; w < 2 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 3 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 4 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } if(winFlag ==1){ if(bow) alert("black win!"); else alert("white win!"); } }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- chrome调试js
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- js中arguments的用法
- js中parent和opener的区别
- extjs实现树形下拉框
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- extjs XTemplate的实例
- nodejs实现websocket服务端(Node.js+express+socket实现在线实时多人聊天室)
- mysql存储json的方式(MySQL中查询json格式的字段实例详解)
- ExtJs中怎么上传文件
- js轮播图片(JS实现简单图片轮播效果)
- 禁止鼠标右键的JS代码
- 用js做一个计算器(使用JS实现简易计算器)
- pjs计算方式(JS代码编译器Monaco使用方法)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)