web html javascript 醇前段五子棋游戏开发开发侧率解析加代码实例

本文链接：https://blog.csdn.net/weixin_42749765/article/details/91040564

原文出自：https://blog.csdn.net/weixin_42749765

五子棋游戏开发开发侧率

第一页面样式

通过表格或放一堆div实现，看怎么方便怎么写

第二执行下子

当点击那个div改变那个div样式或表格中的样式，

第三计算是否已经达到五个字

通过正立左斜右斜计算得出值

从新开始

清空或还原状态

全套代码解析版代注释版源码

https://download.csdn.net/download/weixin_42749765/11229787

样式
   1.初始都为 block
   2.数据计算都用id表示，然后把1到一百位内容

数据
   有数据由将样式改成白棋或黑棋

点击事件
   1.按照当前屏幕中的表格中的div来实现，
   2.当点击某一个div附件的时候就会把点位点上去加效果，
   3.改点属性作为标记
   4.判断条件，如果不为出事样式，则不能更改样式，也就是不能点击
   5.点击到中间的时候，只改变一次样式，保证，不会出现一次点击出俩个的问题


策略：
   1.用Math.floor(Math.random()*2); 的到0或1 来决定黑白子那个先走
   2.监听所有可以被点击的block 初始状态的表格
       1.通过当前的状态，白棋下子状态or 黑骑下子装填给与对应的样式，将初始样式修改

从新开始侧率：
   1.将页面刷新
   2.遍历所有表格中的样式，更新层初始状态
   3.为了好看顺便重置一下整个页面布局位初始状态
   4.查看当前点击位置状态，如果不是初始状态，带边已经操作过了，不允许在操作提示一下
   5.否则通过当前的白棋or黑旗状态进行放子，并修改其样式和状态
   6.一个胜利的结束标识，当胜利后不可再下棋子
   7.监听器每当鼠标按下or 每当下子 or 每当棋盘被点击检查正5字、竖5子、左斜5子、右斜5子
       （意：监听所有可能成功的内容，来给于回应）

数据策略：
   1.创建一个整个棋盘的数组，位每一个位置记录内容
   2.初始化给真个棋盘清空，都为0
   3.如果白子下，更新位置为1黑子下更新为2

正5子计算
   1.遍历整个数组
   2.判断当前位置往后加5个位置每个位置的值是否都是1 or 2来确认
   3.保证5子没有跨行（通过判断，开始位置和结束位置，都在同行，用总数/所有行等于每行多少个位置）
   4.获取没行的开头和结尾数据(现场用算法的或用传入数据)
   5.迭代判断当前的开头结尾是否都在一行中
   6.1状态测完后测2状态的


竖5子计算
   1.遍历整个数组
   2.检查当前位置和当前位置加10,20,30,40的值是否一致
   3.查完一状态差二状态ok


左斜5子计算
   1.迭代
   2.判断当前位置和当前位置加11,22,33,44的值是否一致

右斜5子：
   1.迭代
   2.判断当前位置和加9，18,27,36的值是否一致

耍帅时刻一个完整例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
body{margin:0px;padding:0px;background-color:#000;color:#fff}h3{margin-left:289px}#resource{background-color:rgb(171,240,240);width:622px;height:622px;position:fixed;margin:30px}.w1{width:60px;height:60px;background-color:rgb(109,99,134);float:left;margin-left:2px;margin-top:2px}.initstate{width:60px;height:60px;float:left;margin-left:2px;margin-top:2px}.hz{width:50px;height:50px;border-radius:50px;margin:5px;background-color:#000}.bz{width:50px;height:50px;border-radius:50px;margin:5px;background-color:#fff}span{margin-left:150px;border:1px solid #fff;border-radius:5px;padding:3px 30px;cursor:pointer}
</style>
<body>
        <h3>三国五子棋游戏</h3>
        <div id="resource"></div>
        <span>刷新重开</span>
        <span id="xzstate">黑色下子</span>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'[36-9abd-hjl-xA-R]'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('a b={F:6(){a s="";g(l i=0;i<m;i++){s+=\'<p G="w1"><p G="t"></p></p>\'}$("#u").v().w(s);b.H()},H:6(){$("span").I(6(){3($(J).text()=="刷新重开"){location.reload()}});$("#u .t").I(6(){3(b.h.x==0){a n=$(J);3(n[0].q.r("A")!=-1||n[0].q.r("B")!=-1){d}3(b.h.j==0){n.K("B");$("#j").v().w("白色下子");b.h.j=1}e{n.K("A");$("#j").v().w("黑色下子");b.h.j=0}b.L()}e{C("本剧已结束！")}})},L:6(){a 7=[];$("#u .t").each(6(k,y){3(y.q.r("A")!=-1){7.D(1)}e 3(y.q.r("B")!=-1){7.D(2)}e{7.D(0)}});a 8=0;a 9=0;g(a i=0;i<7.length;i++){3(M(i)==1||N(i)==1||O(i)==1||P(i)==1){Q}}6 P(i){g(l z=0;z<5;z++){3(i+z*10+z<m){3(7[i+z*10+z]==1){9++}e 3(7[i+z*10+z]==2){8++}}}3(8==5||9==5){o();f();d 1}f();d 0}6 O(i){g(l z=0;z<5;z++){3(i+z*10-z<m){3(7[i+z*10-z]==1){9++}e 3(7[i+z*10-z]==2){8++}}}3(8==5||9==5){o();f();d 1}f();d 0}6 N(i){g(l z=0;z<5;z++){3(i+z*10<m){3(7[i+z*10]==1){9++}e 3(7[i+z*10]==2){8++}}}3(8==5||9==5){o();f();d 1}f();d 0}6 M(i){a E=false;g(a c=1;c<11;c++){3(i>=c*10-10&&i+4<=c*10-1){E=R;Q}}3(E==R){g(l z=0;z<5;z++){3(i+z<m){3(7[i+z]==1){9++}e 3(7[i+z]==2){8++}}}}3(8==5||9==5){o();f();d 1}f();d 0}6 f(){8=0;9=0}6 o(){3(9==5){C("白子胜出！")}e 3(8==5){C("黑子胜出！")}b.h.x=1}},h:{j:0,x:0},ajaxRequest:6(obj){}};$(document).ready(6(){b.F()});',[],54,'|||if|||function|zoreArray|hzif|bzif|var|game||return|else|hy|for|gameGlobalState||xzstate||let|100|objV|privateiF|div|className|indexOf|tableDiv1|initstate|resource|empty|append|xzsaccess|||bz|hz|alert|push|pdic|init|class|gameClick|click|this|addClass|gameIf|hpd|zpd|zxpd|yxpd|break|true'.split('|'),0,{}))
</script>
</html>

在做更清晰个总结

1.设计全局

2.对布局用页面div或前段计算绘制出来

3.游戏要求高低分辨率，要求细节高就用经纬度使用，普通就用div内嵌一层，直接大的外层作为布局样式，内局，作为操作内容。

4.对内外框or 局左操作点击悬浮等一系列

5.通过做的操作做计算结果，所有有可能的结果（恒者竖者左斜着右斜着拐着弯的各种各样能想到的，然后交给大重去测试吧）

6.给于返回信息结果信息

7.游戏体验高点，就多些内容介绍步骤和结果步骤

文章持续更新