html实现五子棋游戏代码
代码语言：html
所属分类：游戏
代码描述：html实现五子棋游戏代码
代码标签： 游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,body{position:relative;width:100%;height:100%;margin:0;overflow:scroll;background:#e6e7ec}#chessBox,#chess_buttom_box{position:relative;margin:0 auto;border-radius:6px;box-shadow:1px 1px 3px 1px #9e9e9e5e}#chess_buttom_box{margin-top:10px;height:50px;top:0;box-shadow:0 0 0 0 #9e9e9e5e}#canvas{display:block;top:0;position:absolute;background:#f7e6b7;border-radius:4px}.WJ_A,.WJ_B{position:relative;width:100%;height:70px;display:none}.mobile_wja,.mobile_wjb{display:block}.WJ_A_left,.WJ_B_right{position:absolute;top:15px;width:120px;height:40px;background:#f3f3f3;box-shadow:0 0 5px 1px #dedede}.WJ_B_right{right:0;border-radius:30px 0 0 30px}.WJ_A_left{left:0;border-radius:0 30px 30px 0}.WJ_A>.WJ_A_left>.Wchess{top:5px;left:10px}.WJ_B>.WJ_B_right>.Bchess{top:5px;right:10px}.Wchess_expression{position:absolute;width:50px;height:50px;display:none}.Wchess_expression::after{content:"白棋获胜";position:absolute;width:150%;height:100%;left:50px;top:0;font-size:15px;text-align:center;line-height:50px}.Bchess_expression{position:absolute;width:50px;height:50px;top:10px;display:none}.Bchess_expression::after{content:"黑棋获胜";position:absolute;width:150%;height:100%;left:-82px;top:0;font-size:15px;text-align:center;line-height:50px}.regret,.anew,.select{position:absolute;width:90px;height:30px;background:#03a9f4;color:#fff;outline:none;border:0;user-select:none;border-radius:20px;line-height:30px;left:239px}.regret{left:122px}.select{display:none}.mobile_regret,.mobile_anew,.mobile_select{width:40px;height:40px;line-height:40px;border-radius:30px;left:250px;font-size:12px;box-shadow:0 0 5px 1px #c7c7c7}.mobile_regret{left:310px}.mobile_select{display:block;left:10px}.Bchess,.Wchess,.mobile_Bchess,.mobile_Bchess{position:absolute;width:27px;height:27px;border-radius:30px;background:radial-gradient(#62697b 10%,#49535d 90%);box-shadow:1px 1px 2px 0 #0000006e;font-size:10px;line-height:27px;text-align:center;color:#fff}.Wchess{background:radial-gradient( #fdf9f9 20%,#edf0f0 90%);box-shadow:1px 1px 2px 0 #0000006e;color:#000}.mobile_Bchess,.mobile_Wchess{width:19px;height:19px;line-height:19px;font-size:10px;color:#fff}.mobile_Wchess{color:#000}.Wchess_steps,.Bchess_steps{position:absolute;width:82px;height:30px;border-radius:20px;top:5px;font-size:10px;text-align:center;line-height:30px;color:#949494}.Wchess_steps{right:0}
.emoji{position:absolute;width:120px;height:120px;margin:0;background:#ffda6a;display:inline-block;border-radius:50%;position:relative;transform:scale(.4);left:-36px;top:-36px}.emoji:after{position:absolute;bottom:-40px;font-size:18px;width:60px;left:calc(50% - 30px);color:#8a8a8a}.emoji__face,.emoji__eyes,.emoji__mouth,.emoji__tongue{position:absolute}.emoji__face:before,.emoji__face:after,.emoji__eyebrows:before,.emoji__eyebrows:after,.emoji__eyes:before,.emoji__eyes:after,.emoji__mouth:before,.emoji__mouth:after,.emoji__tongue:before,.emoji__tongue:after{position:absolute;content:''}.emoji__face{width:inherit;height:inherit}.emoji--haha:after{content:''}.emoji--haha .emoji__face{animation:haha-face 2s linear infinite}.emoji--haha .emoji__eyes{width:26px;height:6px;border-radius:2px;left:calc(50% - 13px);top:35px;transform:rotate(20deg);background:0 0;box-shadow:-25px 5px 0 0 #000,25px -5px 0 0 #000}.emoji--haha .emoji__eyes:after{left:0;top:0;width:26px;height:6px;border-radius:2px;transform:rotate(-40deg);background:0 0;box-shadow:-25px -5px 0 0 #000,25px 5px 0 0 #000}.emoji--haha .emoji__mouth{width:80px;height:40px;left:calc(50% - 40px);top:50%;background:#000;border-radius:0 0 40px 40px;overflow:hidden;z-index:1;animation:haha-mouth 2s linear infinite}.emoji--haha .emoji__tongue{width:70px;height:30px;background:#f55064;left:calc(50% - 35px);bottom:-10px;border-radius:50%}@keyframes haha-face{10%{transform:translateY(25px)}20%{transform:translateY(15px)}30%{transform:translateY(25px)}40%{transform:translateY(15px)}50%{transform:translateY(25px)}60%{transform:translateY(0)}70%{transform:translateY(-10px)}80%{transform:translateY(0)}90%{transform:translateY(-10px)}}@keyframes haha-mouth{10%{transform:scale(.6);top:45%}20%{transform:scale(.8);top:45%}30%{transform:scale(.6);top:45%}40%{transform:scale(.8);top:45%}50%{transform:scale(.6);top:45%}60%{transform:scale(1);top:50%}70%{transform:scale(1.2);top:50%}80%{transform:scale(1);top:50%}90%{transform:scale(1.1);top:50%}}
</style>
<title>移动端五子棋</title>
</head>
<body>
<div id="chessBox">
<canvas id="canvas" width="0" height="0"></canvas>
</div>
<div id="chess_buttom_box">
<button class="select">选项</button>
<button class="anew">撤回</button>
<button class="regret">重开</button>
</div>
<div class="WJ_A">
<div class="WJ_A_left">
<div class="Wchess"></div>
<div class="Wchess_steps">白子第0步</div>
<div class="Wchess_expression">
<div class="emoji emoji--haha">
<div class="emoji__face">
<div class="emoji__eyes"></div>
<div class="emoji__mouth">
<div class="emoji__tongue"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="WJ_B">
<div class="WJ_B_right">
<div class="Bchess"></div>
<div class="Bchess_steps">黑子第0步</div>
</div>
<div class="Bchess_expression">
<div class="emoji emoji--haha">
<div class="emoji__face">
<div class="emoji__eyes"></div>
<div class="emoji__mouth">
<div class="emoji__tongue"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var hy_bodyWidth=document.body.clientWidth;var hy_bodyHeight=document.body.clientHeight;var hy_chessBox=document.getElementById("chessBox");var hy_canvas=document.getElementById("canvas");var hy_ctx=hy_canvas.getContext("2d");var hy_buttom_box=document.getElementById("chess_buttom_box");var hy_regret=document.getElementsByClassName("regret")[0];var hy_anew=document.getElementsByClassName("anew")[0];var hy_select=document.getElementsByClassName("select")[0];var hy_BchessSteps=document.getElementsByClassName("Bchess_steps")[0]
var hy_WchessSteps=document.getElementsByClassName("Wchess_steps")[0]
var hy_over=false;var hy_me=true;var anewOff=true;var regretOff=true
var hy_count=0;var hy_wins=[];var hy_myWin=[];var hy_computerWin=[];var hy_chessBoard=[];var hy_chessMap=[];var hy_mode=[[1,0],[0,1],[1,1],[1,-1]];var hy_lianziArr=[];var hy_chessStep=0;var hy_WchessStep=0;var hy_BchessStep=0;var chessWB=[];window.onresize=function(){setTimeout(function(){window.location.reload()},hy_bodyWidth/30)};var hy_Mobile_pc={hy_num:0,mWidth_pWidth:0,mHeight_pHeight:hy_bodyHeight,devicenNme:"",};hy_bodyWidth>420?change(450):change(360);function change(num){hy_Mobile_pc.devicenNme=num==360?hy_Mobile_pc.devicenNme="移动设备":hy_Mobile_pc.devicenNme="非移动设备";hy_Mobile_pc.mWidth_pWidth=num;hy_Mobile_pc.hy_num=num;hy_Mobile_pc.canvas_Width=num;hy_buttom_box.style.width=num+"px";hy_chessBox.style.top=(hy_bodyHeight-num)/2+"px";hy_buttom_box.style.top=(hy_bodyHeight-num)/2+20+"px";if(num==450){hy_buttom_box.style.height=30+"px";hy_chessBox.style.width=num+"px";hy_chessBox.style.height=num+"px";hy_canvas.width=num;hy_canvas.height=num;}else{hy_regret.className="regret mobile_regret";hy_anew.className="anew mobile_anew";hy_select.className="select mobile_select".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0