<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="javascript黑白棋人机博弈" />
<meta name="keywords" content="黑白棋, Othello, 游戏, 算法, 人工智能, AI, 人机博弈" />
<title> javascript黑白棋人机博弈游戏 版本:1.01 </title>
<style type="text/css">
body {
background: #c4824d;
font-family: "微软雅黑","黑体",serif;
}
#desk {
position: absolute;
width: 780px;
height: 570px;
top: 10px;
left: 50%;
margin-left: -390px;
}
#left {
float: left;
width: 105px;
}
#right {
float: left;
width: 120px;
padding-top: 10px;
padding-left: 25px;
}
h1 {
margin: 10px 15px;
color: black;
width: 60px;
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 35px;
color: #330000;
width: 20px;
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: 50px;
font-size: 30px;
line-height: 50px;
color: #440000;
background: #dd8e4f;
border: 1px solid #ff6600;
border-radius: 25px;
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;
}
#chessboard {
float: left;
border: 2px solid #CA521E;
width: 522px;
height: 522px;
box-shadow: 0px 8px 15px #482915;
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: 25px;
margin: 5px;
padding: 17px;
box-shadow: 0px 4px 10px #482915;
}
.fdd #chessboard {
transform: perspective(740px) rotateX(40deg);
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;
transform: rotateY(0deg);
}
.white {
background: white;
transform: rotateY(180deg);
}
.reversal {
transition: transform 0.3s, background 0.3s;
}
.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: 7px;
margin: 20px;
padding: 0px;
background: #ff0;
}
#selectbox {
position: absolute;
left: 140px;
top: 36px;
width: 380px;
height: 430px;
background: #DBA977;
border: 5px solid #98472C;
border-radius: 50px;
box-shadow: 0px 5px 15px #482915;
padding: 0px 30px;
color: #472E25;
font-size: 28px;
line-height: 45px;
display: none;
}
#selectbox input:checked + span {
color: #990000;
}
#buttons {
margin: 0px 50px;
}
#buttons div {
float: left;
margin: 0px 10px;
}
#copyright {
clear: left;
text-align: center;
color: #642100;
padding-top: 15px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="desk">
<div id="left">
<h1>黑<span>白</span>棋</h1>
<h3>人机对战游戏</h3>
</div>
<div id="chessboard"></div>
<div id="right">
<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="2d3d" class="button">3D</div>
<div id="explain" class="button">说明</div>
</div>
<div id="copyright">Copyright © 2015, jslang, All Rights Reserved</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"><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" checked="checked"><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>
<!-- <input type="button" value="AI" id="ai" /> -->
<script type="text/javascript" src="ocjs.js"></script>
</body>
</html>
javascript黑白棋人机博弈.rar （2个子文件） 
javascript黑白棋人机博弈 
othello.html 6KB
ocjs.js 17KB
天际的海浪
- 粉丝: 4573
- 资源: 2
最新资源
- Python爬虫入门实例教程.docx
- 基于Qt的文献管理系统.zip学习资料程序
- Arduino IDE 2 入门指南.pdf
- YOLO目标检测入门实例教程.docx
- 使用外部的抽奖游戏网站的开奖接口进行开奖，网站使用php搭建，游戏使用java运行.zip
- 使用Java Swing创建飞机大战小游戏.zip
- 升官图游戏 java.zip学习资料程序
- webmagic是一个开源的Java垂直爬虫框架，目标是简化爬虫的开发流程，让开发者专注于逻辑功能的开发 webmagic的核心非常简单，但是覆盖爬虫的整个流程，也是很好的学习爬虫开发的材料
- NFC测试不灵敏，NFC工具
- javaweb-高校学生选课系统项目源码.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页