ZIP简单的系统智能黑白棋小游戏 8.69KB

zongxingfengyun需要积分:3(1积分=1元)

资源文件列表:

heibaiqi.zip 大约有3个文件
  1. heibaiqi/index.html 6.58KB
  2. heibaiqi/index.js 16.47KB
  3. heibaiqi/

资源介绍:

简单的系统智能黑白棋小游戏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=high-dpi"> <meta name="description" content="javascript黑白棋人机博弈" /> <meta name="keywords" content="黑白棋, Othello, 游戏, 算法, 人工智能, AI, 人机博弈" /> <title>黑白棋人机博弈游戏</title> <style type="text/css"> body { background: #c4824d; font-family: "微软雅黑","黑体",serif; margin: 0; padding: 0; } #desk { width: 750px; margin: 0px auto; } #title { float: left; width: 60px; padding: 15px; } #console { float: left; width: 110px; padding: 10px 0px 0px 10px; } h1 { margin: 10px 0px; color: black; font-size: 60px; line-height: 70px; font-weight: bold; text-shadow: 0px 0px 6px #A33D1B, 0px 7px 3px #754B35; } h1 span { color: white; } h3 { margin: 0px 20px; color: #330000; font-size: 25px; line-height: 30px; font-weight: bold; text-shadow: 0px 0px 4px #A33D1B, 0px 5px 2px #754B35; } .button { margin: 15px 0px; width: 100px; height: 58px; font-size: 30px; line-height: 58px; color: #440000; background: #dd8e4f; border: 1px solid #ff6600; border-radius: 30px; box-shadow: 0px 4px 10px #482915; text-align: center; cursor: default; } .button:hover { background: #E4A774; border: 1px solid #ff3300; box-shadow: 0px 6px 10px #482915; } .button:active { color: #600; background: #eec7a6; border: 1px solid #ff0000; box-shadow: 0px 2px 5px #482915; position: relative; top: 2px; } .cbox { border: 3px solid transparent; border-radius: 10px; width: 100px; height: 56px; } .side { border: 3px solid #cc3333; background: #DBA977; } .cbox span { float: right; font-size: 30px; line-height: 54px; font-weight: bold; color: #500; text-shadow: 0px 0px 3px #E8C488; padding-right: 7px; } #interface { position: relative; float: left; width: 540px; height: 560px; } #chessboard { width: 522px; height: 522px; margin: 15px 7px; border: 2px solid #CA521E; background: #51150b; box-shadow: 0px 8px 15px #482915; -webkit-transform: perspective(740px) rotateX(0deg); transform: perspective(740px) rotateX(0deg); -webkit-transition: -webkit-transform 1s; transition: transform 1s; } #chessboard table { background: #835f2e; border-spacing: 2px; border: 20px solid #51150b; } #chessboard td { width: 54px; height: 54px; border: 1px solid #e4c8a9; } #chessboard td:hover { border: 1px solid #f00; } #chessboard .bg0 { background: #c1914f; } #chessboard .bg1 { background: #cba470; } .black, .white { width: 10px; height: 10px; border-radius: 50%; margin: 5px; padding: 17px; box-shadow: 0px 4px 10px #482915; } .fdd #chessboard { -webkit-transform: perspective(800px) rotateX(35deg); transform: perspective(800px) rotateX(35deg); box-shadow: 0px 13px 0px #71301a; } .fdd td .black, .fdd td .white { margin: 0px 5px 10px 5px; box-shadow: 0px 8px 10px #482915; } .black { background: black; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .white { background: white; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .reversal { -webkit-transition: -webkit-transform 400ms ease-in-out, background 0ms 200ms; transition: transform 400ms ease-in-out, background 0ms 200ms; } .newest:before, .reversal:before { content: ""; display: block; width: 10px; height: 10px; border-radius: 5px; } .newest:before { background: #f00; } .reversal:before { background: #66c; } .prompt { width: 14px; height: 14px; border-radius: 50%; margin: 20px; padding: 0px; background: #FFCC33; } #selectbox { position: absolute; top: 50px; left: 50%; margin-left: -220px; width: 330px; height: auto; background: #DBA977; border: 3px solid #98472C; border-width: 3px 30px; box-shadow: 0px 5px 15px #482915; padding: 10px 25px; color: #472E25; font-size: 28px; line-height: 45px; display: none; } #selectbox input:checked + span { color: #990000; text-shadow: 0px 0px 3px #FF9900; } #buttons { margin: 0px 40px; } #buttons div { float: left; margin: 0px 10px; } #copyright { clear: left; text-align: center; color: #642100; padding: 5px; font-size: 18px; } #pass, #airuning { position: absolute; top: 12px; left: 50%; margin-left: -150px; width: 300px; height: auto; border-radius: 13px; text-align: center; font-size: 18px; line-height: 26px; background: rgba(230,160,80,0.6); color: #330000; text-shadow: 0px 0px 3px #900; display: none; } #airuning { top: 500px; margin-left: -100px; width: 200px; } @media screen and (max-width: 750px) { #desk { width: 540px; } #title { width: 100%; padding: 0px; text-align: center; } #console { width: 96%; padding: 10px 2%; } h1, h3 { display: inline-block; } .cbox { float: left; } #console .button { float: left; margin: 0px 5px; width: 90px; } #no3d { display: none; } } </style> </head> <body> <div id="desk"> <div id="title"> <h1>黑<span>白</span>棋</h1> <h3>人机对战游戏</h3> </div> <div id="interface"> <div id="chessboard"></div> <div id="pass"></div> <div id="airuning">AI运算中……</div> <div id="selectbox"> <label><input type="radio" name="side" checked="checked"><span>玩家先走</span></label> <label><input type="radio" name="side"><span>电脑先走</span></label><br /> <label><input type="radio" name="level" checked="checked"><span>难度一 每次计算 0.02 秒</span></label><br /> <label><input type="radio" name="level"><span>难度二 每次计算 0.1 秒</span></label><br /> <label><input type="radio" name="level"><span>难度三 每次计算 0.5 秒</span></label><br /> <label><input type="radio" name="level"><span>难度四 每次计算 2 秒</span></label><br /> <label><input type="radio" name="level"><span>难度五 每次计算 5 秒</span></label><br /> <label><input type="radio" name="level"><span>难度六 每次计算 10 秒</span></label><br /> <label><input type="radio" name="level"><span>难度七 每次计算 20 秒</span></label><br /> <div id="buttons"> <div id="ok" class="button">确定</div> <div id="cancel" class="button">取消</div> </div> </div> </div> <div id="console"> <div id="side1" class="cbox"> <span>0</span><div class="black"></div> </div> <div id="side2" class="cbox"> <span>0</span><div class="white"></div> </div> <div id="play" class="button">开始</div> <div id="back" class="button">悔棋</div> <div id="no3d" class="button">3D</div> <div id="explain" class="button">说明</div> </div> </div> <script type="text/javascript" src="index.js"></script> </body> </html>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPhtml切积木小游戏试玩17.46KB5月前
    ZIPopen3d python 给点云每个点设置不同的颜色411.94KB5月前
    ZIP江协科技STM32系列视频OLED模块调试代码8.95KB5月前
    ZIPpython实现坦克大战1.19MB5月前
    ZIP系统智能五子棋对弈小游戏11.82KB5月前
    ZIPhtml写的3D魔方小游戏206.01KB5月前
    ZIPhtml写的打砖块小游戏853.85KB5月前
    ZIPIDEA卸载软件Install tools3.06MB5月前