angular实现一个国际象棋游戏代码
代码语言：html
所属分类：游戏
代码描述：angular实现一个国际象棋游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
html {
background-image: url('//repo.bfw.wiki/bfwrepo/image/5fbaef09aba3e.png');
background-size: cover;
}
body {
width: 580px;
margin: 10px auto;
}
/*=====BOARD GAME=================*/
#board {
width: 480px;
margin: 15px auto 20px auto;
background: #ccc;
border: 25px solid #fff;
border-radius: 10px;
box-shadow: inset -1px 1px 7px rgba(0,0,0,.2),
inset 1px -1px 7px rgba(0,0,0,.2),
1px 12px 5px rgba(0,0,0,.4),
4px 3px 8px rgba(0,0,0,.4),
5px 10px 10px rgba(0,0,0,.2),
-5px 10px 10px rgba(0,0,0,.4);
}
#game {
}
.row {
clear: both;
overflow: hidden;
}
.box {
width: 60px;
height: 60px;
float: left;
text-align: center;
line-height: 60px;
font-size: 50px;
cursor: default;
}
.placed {
cursor: pointer;
}
.selected {
-moz-box-shadow: inset 0 0 10px #311B0B;
-webkit-box-shadow: inset 0 0 10px #311B0B;
box-shadow: inset 0 0 10px #311B0B;
}
.suggest {
-moz-filter: grayscale(50%);
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
-moz-box-shadow: inset 0 0 15px #0f0;
-webkit-box-shadow: inset 0 0 15px #0f0;
box-shadow: inset 0 0 15px #0f0;
cursor: pointer;
}
/*============================================*/
#result {
width: 480px;
height: 480px;
line-height: 480px;
position: absolute;
background: transparent;
text-align: center;
font-size: 90px;
cursor: default;
animation: blur 1.5s ease-out infinite;
z-index: 10;
}
.hide {
display: none;
}
@keyframes blur{
from {
text-shadow:0px 0px 10px #fff,
0px 0px 10px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 50px #fff,
0px 0px 50px #fff,
0px 0px 50px #7B96B8,
0px 0px 150px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px -10px 100px #7B96B8,
0px -10px 100px #7B96B8;
}
}
#pawn-promotion-option {
width: 480px;
height: 480px;
line-height: 480px;
position: absolute;
background: transparent;
text-align: center;
font-size: 90px;
cursor: default;
z-index: 10;
}
#pawn-promotion-option .option {
cursor: pointer;
}
/*========================================*/
.option-nav {
height: 20px;
width: 500px;
font-size: 30px;
margin: 0 auto;
line-height: 15px;
}
#player-nav {
display: inline-block;
cursor: default;
float: left;
width: 200px;
text-align: left;
margin-top: 5px;
}
#player {
font-size: 32px;
color: #000;
}
#undo-btn, #option {
display: inline-block;
float: right;
cursor: pointer;
margin-left: 50px;
position: relative;
}
.btn .tooltiptext {
visibility: hidden;
font-family: monospace;
width: 100px;
background: #000;
color: #ccc;
text-align: center;
border-radius: 6px;
padding: 5px 0;
line-height: 20px;
font-size: 22px;
position: absolute;
z-index: 1;
top: 120%;
left: 50%;
margin-left: -50px;
}
#undo-btn .tooltiptext {
width: 80px;
margin-left: -40px;
}
.btn .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #000 transparent;
}
.btn:hover .tooltiptext {
visibility: visible;
}
/*=================*/
#option-menu {
width: 480px;
height: 480px;
position: absolute;
background: transparent;
text-align: center;
font-size: 40px;
cursor: default;
z-index: 10;
letter-spacing: 5px;
}
#back-btn {
width: 100px;
margin: 60px auto 0 auto;
}
#theme-menu {
width: 100%;
margin: 40px auto 0 auto;
}
#color-menu {
width: 100%;
margin: 40px auto 0 auto;
}
#restart-btn {
width: 280px;
margin: 40px auto 0 auto;;
}
.button {
cursor: pointer;
}
/* Responsive design */
@media only screen and (max-width: 570px) {
body {
width: 100%;
}
#board {
width: 320px;
border-width: 13px;
}
.box {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 36px;
font-weight: normal;
}
#option {
width: 80px;
}
#option-menu {
width: 320px;
height: 320px;
font-size: 26px;
}
#back-btn {
margin-top: 25px;
}
.option-nav {
margin: 0 auto;
width: 340px;
font-size: 24px;
line-height: 10px;
}
#player-nav {
width: 30%;
margin-top: 5px;
}
#player {
font-size: 28px;
}
#undo-btn {
margin-left: 20px;
}
#option {
margin-left: 20px;
}
#pawn-promotion-option {
width: 320px;
height: 320px;
font-size: 60px;
line-height: 320px;
}
#result {
width: 320px;
height: 320px;
font-size: 60px;
line-height: 320px;
}
}
</style>
</head>
<body translate="no" >
<div class="option-nav">
<div id="player-nav">
Player: <span id="player"></span>
</div>
<div id="option" class="btn">
<i class="fa fa-cog" aria-hidden="true"></i>
<span class="tooltiptext">OPTION</span>
</div>
<div id="undo-btn" class="btn">
<i class="fa fa-undo" aria-hidden="true"></i>
<span class="tooltiptext">UNDO</span>
</div>
</div>
<div id="board">
<div id="result" class="hide"></div>
<div id="pawn-promotion-option" class="hide">
<span id="queen" class="option"></span>
<span id="rook" class="option"></span>
<span id="knight" class="option"></span>
<span id="bishop" class="option"></span>
</div>
<div id="option-menu" class="hide">
<div id="back-btn" class="button">BACK</div>
<div id="theme-menu">
THEME: <span id="theme-option" class="button"></span>
</div>
<div id="color-menu">
COLOR: <span id="color-option" class="button"></span>
</div>
<div id="restart-btn" class="button">NEW GAME</div>
</div>
<div id="game" ng-app="myApp" ng-controller="GameController">
<div class="row" ng-repeat="y in widths">
<div class="box" ng-repeat="x in widths" ng-attr-id="{{'box-' + x + '-' + y}}" piece="">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular.1.7.js"></script>
<script>
angular.module('myApp', []).controller('GameController', ['$scope', function($scope) {
//Draw the board game
$scope.size = 8;
$scope.widths = [];
//Draw board
for(var i = 0; i < $scope.size; i++) {
$scope.widths.push(i);
}
}]);
$(document).ready(function() {
var themes = [
{
name: 'CLASSIC',
boardBorderColor: '#666',
lightBoxColor: '#fff',
darkBoxColor: '#ccc',
optionColor: '#000',
optionHoverColor: '#999'
},
{
name: 'WOOD',
boardBorderColor: '#803E04',
lightBoxColor: '#FFCE9E',
darkBoxColor: '#D18B47',
optionColor: '#803E04',
optionHoverColor: '#311B0B'
},
{
name: 'OCEAN',
boardBorderColor: '#023850',
lightBoxColor: '#fff',
darkBoxColor: '#0A85AE',
optionColor: '#023850',
optionHoverColor: '#3385ff'
},
{
name: 'FOREST',
boardBorderColor: '#005900',
lightBoxColor: '#CAC782',
darkBoxColor: '#008C00',
optionColor: '#005900',
optionHoverColor: '#0c0'
},
{
name: 'BLOOD',
boardBorderColor: '#f3f3f3',
lightBoxColor: '#f3f3f3',
darkBoxColor: '#f00',
optionColor: '#f00',
optionHoverColor: '#f99'
}
];
var colors = [
{
name: 'BLACK',
color: '#000'
},
{
name: 'GREEN',
color: '#030'
},
{
name: 'BLUE',
color: '#036'
},
{
name: 'PINK',
color: '#606'
},
{
name: 'BROWN',
color: '#630'
}
];
var colorOption = 0;
var themeOption = 1;
//Change theme
$('#theme-option').on('click', function() {
themeOption === themes.length - 1 ? themeOption = 0 : themeOption++;
setTheme();
});
//Set up theme
var setTheme = function() {
var theme = themes[themeOption];
$('#theme-option').html(theme.name);
$('#board').css('border-color', theme.boardBorderColor);
$('.light-box').css('background', theme.lightBoxColor);
$('.dark-box').css('background', theme.darkBoxColor);
$('.option-nav').css('color', theme.optionColor);
//Option button effect
$('#option').css('color', theme.optionColor);
$('#option').hover(
function() {
$(this).css('color', theme.optionHoverColor);
}, function() {
$(this).css('color', theme.optionColor);
}
);
//Undo button effect
$('#undo-btn').css('color', theme.optionColor);
$('#undo-btn').hover(
function() {
$(this).css('color', theme.optionHoverColor);
}, function() {
$(this).css('color', theme.optionColor);
}
);
//Option Menu effect
$('#option-menu').css('color', theme.optionColor);
$('.button').css('color', theme.optionColor);
$('.button').hover(
function() {
$(this).css('color', theme.optionHoverColor);
}, function() {
$(this).css('color', theme.optionColor);
}
);
}
//Change color
$('#color-option').on('click', function() {
colorOption === colors.length - 1 ? colorOption = 0 : colorOption++;
setColor();
});
//Set up color for chess pieces
var setColor = function() {
var color = colors[colorOption];
$('#color-option').html(color.name);
$('.box').css('color', color['color']);
$('#pawn-promotion-option').css('color', color['color']);
$('#player').css('color', color['color']);
}
//=====GLOBAL VARIABLES=========//
//Chess pieces
var chessPieces = {
'white': {
'king': '♔',
'queen': '♕',
'rook': '♖',
'bishop': '♗',
'knight': '♘',
'pawn': '♙'
},
'black': {
'king': '♚',
'queen': '♛',
'rook': '♜',
'bishop': '♝',
'knight': '♞',
'pawn': '♟'
}
};
var player = 'black'; //First player
//Selected chess piece to move
var select = {
canMove: false, //Ready to move of not
piece: '', //Color, type of the piece
box: '' //Position of the piece
}
//Game's history (pieces + positions)
var historyMoves = [];
//Position and color of pawn p.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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