华容道实现
老代码了，有空优化一下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> <title>在线华容道</title> <meta name="Keywords" content="华容道,曹操,关羽,张飞,马超,赵云,黄忠"/> <meta name="Description" content="在线华容道"/> <style type="text/css"> *{ margin: 0; padding: 0; } .title{ position: absolute; top: 0px; left: 0px; width: 100%; height: 70px; line-height: 70px; text-align: center; background: #98644C; color: white; font-weight: 700; font-size: 30px; } .main{ width: 60%; position: absolute; left: 20%; top: 90px; } .kaiju{ width: 100%; position: absolute; left: 0px; top: 560px; } .editor{ width: 450px; position: absolute; left: 0px; top: 618px; } #hrd{ width: 400px; height: 500px; background: #98644C; font-size: 51px; color: white; position: absolute; left: 0px; top: 0px; } #hrd div{ text-align: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jiang{ width: 100px; height: 200px; line-height: 100px; } #zhangfei{ position: absolute; top: 0px; left: 0px; background: #FF8040; } #cc{ width: 200px; height: 200px; position: absolute; top: 0px; left: 100px; line-height: 200px; background: #C6A300; } #machao{ position: absolute; top: 0px; left: 300px; background: #FFA500; } #zhaoyun{ position: absolute; top: 200px; left: 0px; background: #D94600; } #huangzhong{ position: absolute; top: 200px; left: 300px; background: #F75000; } #guanyu{ width: 200px; height: 100px; position: absolute; top: 200px; left: 100px; line-height: 100px; background: green; } .zu{ width: 100px; height: 100px; line-height: 100px; background: #9393FF; } #zua{ position: absolute; top: 300px; left: 100px; } #zub{ position: absolute; top: 300px; left: 200px; } #zuc{ position: absolute; top: 400px; left: 0px; } #zud{ position: absolute; top: 400px; left: 300px; } .introduce{ position: absolute; left: 0px; top: 520px; } .kaijus{ padding: 5px 10px; border: 3px solid #98644C; display: inline-block; cursor: pointer; color: #98644C; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .editors{ width: 100px; height: 100px; font-size: 60px; } #generate{ margin-top: 20px; border-style: none; padding: 10px 15px; background: #98644C; color: white; font-size: 20px; cursor: pointer; } </style> </head> <body> <div class="title">败 走 华 容 道</div> <div class="main"> <div id="hrd"> <div id="zhangfei" class="jiang">张飞</div> <div id="cc">曹 操</div> <div id="machao" class="jiang">马超</div> <div id="zhaoyun" class="jiang">赵云</div> <div id="huangzhong" class="jiang">黄忠</div> <div id="guanyu">关 羽</div> <div id="zua" class="zu">卒</div> <div id='zub' class="zu">卒</div> <div id='zuc' class="zu">卒</div> <div id='zud' class="zu">卒</div> </div> <p class="introduce">游戏介绍：通过移动棋子，让曹操顺利通过下方入口即可获得胜利</p> <div class="kaiju"> <span class="kaijus" style="background: #98644C;color: white;">横刀立马</span> <span class="kaijus">诸葛羽扇</span> <span class="kaijus">近在一步</span> <span class="kaijus">海阔天空</span> </div> <div class="editor"> </div> </div> <script type="text/javascript"> ;(function(){ /* *张飞用1代替;马超用2代替;赵云用3代替;黄忠用4代替;关羽用5代替;曹操用6代替;卒子用7,8,9,10代替;空白用0代替; *上下左右用1，2，3，4代替 */ var map = [[1,6,6,2],[1,6,6,2],[3,5,5,4],[3,7,8,4],[9,0,0,10]];//代表20个方格，每个方格里是谁 var locat = [[0,0],[0,3],[2,0],[2,3],[2,1],[0,1],[3,1],[3,2],[4,0],[4,3]];//代表10个棋子的位置 var qizis = ["zhangfei", "machao", "zhaoyun", "huangzhong", "guanyu", "cc", "zua", "zub", "zuc", "zud"];//代表10个棋子的ID var hrd = document.getElementById("hrd");//华容道主体 var hrdleft = parseInt(hrd.getBoundingClientRect().left);//华容道主体距离左边的距离 var hrdtop = parseInt(hrd.getBoundingClientRect().top);//华容道主体距离上边的距离 var x1 = 0, y1 = 0;//鼠标按下时的坐标 var x2 = 0, y2 = 0;//鼠标抬起时的坐标 var direction = 0;//方向 var kaijus = document.getElementsByClassName("kaijus"); hrd.onmousedown = function(e){ var e = e || window.event; x1 = e.pageX - hrdleft; y1 = e.pageY - hrdtop; } hrd.onmouseup = function(e){ var e = e || window.event; x2 = e.pageX - hrdleft; y2 = e.pageY - hrdtop; var x = x2 - x1; var y = y2 - y1; //确定方向 if(Math.abs(x) >= Math.abs(y)){ if(x >= 0){ direction = 4; } else{ direction = 3; } }else{ if(y >= 0){ direction = 2; } else{ direction = 1; } } //确定要移动的棋子 var xx = Math.floor(x1/100); var yy = Math.floor(y1/100); var qizi = map[yy][xx];//棋子编号(1,2,3,4,5……) var qiziid = qizis[qizi - 1];//棋子ID(zhangfei,machao,huangzhong,zhaoyun……) var zqizi = document.getElementById(qiziid);//棋子元素本身 if(qizi >= 1 && qizi <= 4){//张飞，赵云，马超，黄忠移动 if(direction == 1){//向上 if((locat[qizi-1][0]-1) >= 0 && map[locat[qizi-1][0]-1][locat[qizi-1][1]] == 0) { map[locat[qizi-1][0]-1][locat[qizi-1][1]] = qizi; map[locat[qizi-1][0]+1][locat[qizi-1][1]] = 0; locat[qizi-1][0] = locat[qizi-1][0] - 1; var yang = window.getComputedStyle(zqizi).top; yang = parseInt(yang); yang = yang - 100; zqizi.style.top = yang + 'px'; } }else if(direction == 2){//向下 if((locat[qizi-1][0]+1) <= 4 && map[locat[qizi-1][0]+2][locat[qizi-1][1]] == 0) { map[locat[qizi-1][0]+2][locat[qizi-1][1]] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; locat[qizi-1][0] = locat[qizi-1][0] + 1; var yang = window.getComputedStyle(zqizi).top; yang = parseInt(yang); yang = yang + 100; zqizi.style.top = yang + 'px'; } }else if(direction == 3){//向左 if((locat[qizi-1][1]-1) >= 0 && map[locat[qizi-1][0]][locat[qizi-1][1]-1] == 0 && map[locat[qizi-1][0]+1][locat[qizi-1][1]-1] == 0) { map[locat[qizi-1][0]][locat[qizi-1][1]-1] = qizi; map[locat[qizi-1][0]+1][locat[qizi-1][1]-1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; map[locat[qizi-1][0]+1][locat[qizi-1][1]] = 0; locat[qizi-1][1] = locat[qizi-1][1] - 1; var yang = window.getComputedStyle(zqizi).left; yang = parseInt(yang); yang = yang - 100; zqizi.style.left = yang + 'px'; } }else{//向右 if((locat[qizi-1][1]+1) <= 4 && map[locat[qizi-1][0]][locat[qizi-1][1]+1] == 0 && map[locat[qizi-1][0]+1][locat[qizi-1][1]+1] == 0) { map[locat[qizi-1][0]][locat[qizi-1][1]+1] = qizi; map[locat[qizi-1][0]+1][locat[qizi-1][1]+1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; map[locat[qizi-1][0]+1][locat[qizi-1][1]] = 0; locat[qizi-1][1] = locat[qizi-1][1] + 1; var yang = window.getComputedStyle(zqizi).left; yang = parseInt(yang); yang = yang + 100; zqizi.style.left = yang + 'px'; } } }else if(qizi == 5){//关羽移动 if(direction == 1){//向上 if((locat[qizi-1][0]-1) >= 0 && map[locat[qizi-1][0]-1][locat[qizi-1][1]] == 0 && map[locat[qizi-1][0]-1][locat[qizi-1][1]+1] == 0) { map[locat[qizi-1][0]-1][locat[qizi-1][1]] = qizi; map[locat[qizi-1][0]-1][locat[qizi-1][1]+1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; map[locat[qizi-1][0]][locat[qizi-1][1]+1] = 0; locat[qizi-1][0] = locat[qizi-1][0] - 1; var yang = window.getComputedStyle(zqizi).top; yang = parseInt(yang); yang = yang - 100; zqizi.style.top = yang + 'px'; } }else if(direction == 2){//向下 if((locat[qizi-1][0]+1) <= 4 && map[locat[qizi-1][0]+1][locat[qizi-1][1]] == 0 && map[locat[qizi-1][0]+1][locat[qizi-1][1]+1] == 0) { map[locat[qizi-1][0]+1][locat[qizi-1][1]] = qizi; map[locat[qizi-1][0]+1][locat[qizi-1][1]+1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; map[locat[qizi-1][0]][locat[qizi-1][1]+1] = 0; locat[qizi-1][0] = locat[qizi-1][0] + 1; var yang = window.getComputedStyle(zqizi).top; yang = parseInt(yang); yang = yang + 100; zqizi.style.top = yang + 'px'; } }else if(direction == 3){//向左 if((locat[qizi-1][1]-1) >= 0 && map[locat[qizi-1][0]][locat[qizi-1][1]-1] == 0) { map[locat[qizi-1][0]][locat[qizi-1][1]-1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]+1] = 0; locat[qizi-1][1] = locat[qizi-1][1] - 1; var yang = window.getComputedStyle(zqizi).left; yang = parseInt(yang); yang = yang - 100; zqizi.style.left = yang + 'px'; } }else{//向右 if((locat[qizi-1][1]+1) <= 3 && map[locat[qizi-1][0]][locat[qizi-1][1]+2] == 0) { map[locat[qizi-1][0]][locat[qizi-1][1]+2] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; locat[qizi-1][1] = locat[qizi-1][1] + 1; var yang = window.getComputedStyle(zqizi).left; yang = parseInt(yang); yang = yang + 100; zqizi.style.left = yang + 'px'; } } }else if(qizi == 6){//曹操移动 if(direction == 1){//向上 if((locat[qizi-1][0]-1) >= 0 && map[locat[qizi-1][0]-1][locat[qizi-1][1]] == 0 && map[locat[qizi-1][0]-1][locat[qizi-1][1]+1] == 0) { map[locat[qizi-1][0]-1][locat[qizi-1][1]] = qizi; map[locat[qizi-1][0]-1][locat[qizi-1][1]+1] = qizi; map[locat[qizi-1][0]+1][locat[qizi-1][1]] = 0; map[locat[qizi-1][0]+1][locat[qizi-1][1]+1] = 0; locat[qizi-1][0] = locat[qizi-1][0] - 1; var yang = window.getComputedStyle(zqizi).top; yang = parseInt(yang); yang = yang - 100; zqizi.style.top = yang + 'px'; } }else if(direction == 2){//向下 if((locat[qizi-1][0]+2) <= 4 && map[locat[qizi-1][0]+2][locat[qizi-1][1]] == 0 && map[locat[qizi-1][0]+2][locat[qizi-1][1]+1] == 0) { map[locat[qizi-1][0]+2][locat[qizi-1][1]] = qizi; map[locat[qizi-1][0]+2][locat[qizi-1][1]+1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; map[locat[qizi-1][0]][locat[qizi-1][1]+1] = 0; locat[qizi-1][0] = locat[qizi-1][0] + 1; var yang = window.getComputedStyle(zqizi).top; yang = parseInt(yang); yang = yang + 100; zqizi.style.top = yang + 'px'; } }else if(direction == 3){//向左 if((locat[qizi-1][1]-1) >= 0 && map[locat[qizi-1][0]][locat[qizi-1][1]-1] == 0 && map[locat[qizi-1][0]+1][locat[qizi-1][1]-1] == 0) { map[locat[qizi-1][0]][locat[qizi-1][1]-1] = qizi; map[locat[qizi-1][0]+1][locat[qizi-1][1]-1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]+1] = 0; map[locat[qizi-1][0]+1][locat[qizi-1][1]+1] = 0; locat[qizi-1][1] = locat[qizi-1][1] - 1; var yang = window.getComputedStyle(zqizi).left; yang = parseInt(yang); yang = yang - 100; zqizi.style.left = yang + 'px'; } }else{//向右 if((locat[qizi-1][1]+2) <= 4 && map[locat[qizi-1][0]][locat[qizi-1][1]+2] == 0 && map[locat[qizi-1][0]+1][locat[qizi-1][1]+2] == 0) { map[locat[qizi-1][0]][locat[qizi-1][1]+2] = qizi; map[locat[qizi-1][0]+1][locat[qizi-1][1]+2] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; map[locat[qizi-1][0]+1][locat[qizi-1][1]] = 0; locat[qizi-1][1] = locat[qizi-1][1] + 1; var yang = window.getComputedStyle(zqizi).left; yang = parseInt(yang); yang = yang + 100; zqizi.style.left = yang + 'px'; } } }else{//小兵移动 if(direction == 1){//向上 if((locat[qizi-1][0]-1) >= 0 && map[locat[qizi-1][0]-1][locat[qizi-1][1]] == 0) { map[locat[qizi-1][0]-1][locat[qizi-1][1]] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; locat[qizi-1][0] = locat[qizi-1][0] - 1; var yang = window.getComputedStyle(zqizi).top; yang = parseInt(yang); yang = yang - 100; zqizi.style.top = yang + 'px'; } }else if(direction == 2){//向下 if((locat[qizi-1][0]+1) <= 4 && map[locat[qizi-1][0]+1][locat[qizi-1][1]] == 0) { map[locat[qizi-1][0]+1][locat[qizi-1][1]] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; locat[qizi-1][0] = locat[qizi-1][0] + 1; var yang = window.getComputedStyle(zqizi).top; yang = parseInt(yang); yang = yang + 100; zqizi.style.top = yang + 'px'; } }else if(direction == 3){//向左 if((locat[qizi-1][1]-1) >= 0 && map[locat[qizi-1][0]][locat[qizi-1][1]-1] == 0) { map[locat[qizi-1][0]][locat[qizi-1][1]-1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; locat[qizi-1][1] = locat[qizi-1][1] - 1; var yang = window.getComputedStyle(zqizi).left; yang = parseInt(yang); yang = yang - 100; zqizi.style.left = yang + 'px'; } }else{//向右 if((locat[qizi-1][1] + 1) <= 4 && map[locat[qizi-1][0]][locat[qizi-1][1]+1] == 0) { map[locat[qizi-1][0]][locat[qizi-1][1]+1] = qizi; map[locat[qizi-1][0]][locat[qizi-1][1]] = 0; locat[qizi-1][1] = locat[qizi-1][1] + 1; var yang = window.getComputedStyle(zqizi).left; yang = parseInt(yang); yang = yang + 100; zqizi.style.left = yang + 'px'; } } } var caocao = document.getElementById('cc'); if(window.getComputedStyle(caocao).left == '100px' && window.getComputedStyle(caocao).top == '300px') { alert("闯关成功！"); window.location.reload(); } } kaijus[0].onclick = function(){//横刀立马 kaijucss(0); map = [[1,6,6,2],[1,6,6,2],[3,5,5,4],[3,7,8,4],[9,0,0,10]]; locat = [[0,0],[0,3],[2,0],[2,3],[2,1],[0,1],[3,1],[3,2],[4,0],[4,3]]; kaijulogic(); } kaijus[1].onclick = function(){//诸葛羽扇 kaijucss(1); map = [[3,5,5,9],[3,6,6,4],[2,6,6,4],[2,7,1,10],[0,8,1,0]]; locat = [[3,2],[2,0],[0,0],[1,3],[0,1],[1,1],[3,1],[4,1],[0,3],[3,3]]; kaijulogic(); } kaijus[2].onclick = function(){//近在一步 kaijucss(2); map = [[3,4,7,9],[3,4,8,10],[2,1,5,5],[2,1,6,6],[0,0,6,6]]; locat = [[2,1],[2,0],[0,0],[0,1],[2,2],[3,2],[0,2],[1,2],[0,3],[1,3]]; kaijulogic(); } kaijus[3].onclick = function(){//海阔天空 kaijucss(3); map = [[7,5,5,8],[3,6,6,4],[3,6,6,4],[2,9,10,1],[2,0,0,1]]; locat = [[3,3],[3,0],[1,0],[1,3],[0,1],[1,1],[0,0],[0,3],[3,1],[3,2]]; kaijulogic(); } function kaijulogic(){//封装开局逻辑 for(let i = 0; i <= 9; ++i){ let temp = document.getElementById(qizis[i]); temp.style.left = locat[i][1] * 100 + 'px'; temp.style.top = locat[i][0] * 100 + 'px'; } } function kaijucss(k){//封装开局样式 for(let i = 0; i <= 3; ++i){ kaijus[i].style.background = "white"; kaijus[i].style.color = "#98644C"; } kaijus[k].style.background = "#98644C"; kaijus[k].style.color = "white"; } var htm = "<p style='color: red;font-weight: 700;'>自定义开局</p><br/><p>一共20个方格，每个方格填上对应角色的编码即可，张飞=1，马超=2，赵云=3，黄忠=4，关羽=5，曹操=6，卒子=7，8，9，10，空白=0；下面默认是横刀立马开局</p><br/>"; var def = [1,6,6,2,1,6,6,2,3,5,5,4,3,7,8,4,9,0,0,10]; for(let i = 0; i <= 19; ++i){ htm = htm + "<input type='text' value='" + def[i] + "' class='editors' />"; } htm = htm + "<button id='generate'>生成开局</button>"; document.getElementsByClassName("editor")[0].innerHTML = htm; document.getElementById("generate").onclick = function(){//生成开局 var ed = document.getElementsByClassName("editors"); var arr = []; var locats = new Array(); for(let i = 0; i < 10; ++i){ locats[i] = new Array(); locats[i].push(0); locats[i].push(0); locats[i].push(0); } for(let i = 0, j = 0; i < 20; ++i){ if(i % 4 == 0){ arr[j] = new Array(); ++j; } arr[j-1].push(ed[i].value); } var arrs = [2,2,2,2,2,4,1,1,1,1,2]; var state = 1; for(let i = 0; i < 5; ++i){ if(state == 0){break;} for(let j = 0; j < 4; ++j){ if(arr[i][j] == 1){ if(arrs[0] == 2){ if(arr[i+1][j] == 1){} else{state = 0;alert("张飞数据错误！");break;} } arrs[0]--; }else if(arr[i][j] == 2){ if(arrs[1] == 2){ if(arr[i+1][j] == 2){} else{state = 0;alert("马超数据错误！");break;} } arrs[1]--; }else if(arr[i][j] == 3){ if(arrs[2] == 2){ if(arr[i+1][j] == 3){} else{state = 0;alert("赵云数据错误！");break;} } arrs[2]--; }else if(arr[i][j] == 4){ if(arrs[3] == 2){ if(arr[i+1][j] == 4){} else{state = 0;alert("黄忠数据错误！");break;} } arrs[3]--; }else if(arr[i][j] == 5){ if(arrs[4] == 2){ if(arr[i][j+1] == 5){} else{state = 0;alert("关羽数据错误！");break;} } arrs[4]--; }else if(arr[i][j] == 6){ if(arrs[5] == 4){ if(arr[i][j+1] == 6 && arr[i+1][j] == 6 && arr[i+1][j+1] == 6){} else{state = 0;alert("曹操数据错误！");break;} } arrs[5]--; }else if(arr[i][j] == 7){ arrs[6]--; }else if(arr[i][j] == 8){ arrs[7]--; }else if(arr[i][j] == 9){ arrs[8]--; }else if(arr[i][j] == 10){ arrs[9]--; }else if(arr[i][j] == 0){ arrs[10]--; }else{ state = 0; alert("未知数据错误！"); break; } } } if(arrs[6] != 0 || arrs[7] != 0 || arrs[8] != 0 || arrs[9] != 0){state = 0;alert("小兵数据错误！");} if(arrs[10] != 0){state = 0;alert("空白数据错误！");} if(state){ for(let i = 0; i < 5; ++i){ for(let j = 0; j < 4; ++j){ map[i][j] = arr[i][j]; } } for(let i = 0; i < 5; ++i){ for(let j = 0; j < 4; ++j){ if(arr[i][j] != 0){ if(locats[arr[i][j]-1][2] == 0){ locats[arr[i][j]-1][0] = i; locats[arr[i][j]-1][1] = j; locats[arr[i][j]-1][2] = 1; } } } } } for(let i = 0; i < 5; ++i){ for(let j = 0; j < 4; ++j){ map[i][j] = arr[i][j]; } } for(let i = 0; i < 10; ++i){ for(let j = 0; j <2; ++j){ locat[i][j] = locats[i][j]; } } kaijulogic(); alert("成功生成开局！"); } })(); </script> </body> </html>
浙公网安备 33010602011771号