原生js+css实现漂亮五子棋游戏代码
代码语言：html
所属分类：其他
代码描述：原生js+css实现漂亮五子棋游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8B5A2B',
secondary: '#D2B48C',
board: '#DEB887',
black: '#000000',
white: '#FFFFFF'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.board-grid {
background-size: calc(100% - 2px) calc(100% - 2px);
background-position: 1px 1px;
}
.piece-shadow {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.piece-hover {
transition: all 0.2s ease;
}
.piece-hover:hover {
transform: scale(1.05);
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4 font-sans">
<div class="max-w-4xl w-full bg-white rounded-xl shadow-lg overflow-hidden">
<!-- 游戏标题 -->
<div class="bg-primary text-white p-6 text-center">
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold">五子棋</h1>
<p class="mt-2 text-secondary/90">落子连成五子获胜</p>
</div>
<!-- 游戏区域 -->
<div class="p-6 flex flex-col md:flex-row gap-6">
<!-- 游戏信息 -->
<div class="md:w-1/4 space-y-4">
<div class="bg-gray-50 rounded-lg p-4 shadow-sm">
<h2 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
<i class="fa fa-info-circle mr-2 text-primary"></i>游戏状态
</h2>
<div class="flex items-center mb-3">
<div id="current-player-icon" class="w-6 h-6 rounded-full bg-black mr-2"></div>
<span id="current-player-text" class="text-gray-700">黑方回合</span>
</div>
<div id="game-message" class="text-gray-600 text-sm min-h-10"></div>
</div>
<div class="bg-gray-50 rounded-lg p-4 shadow-sm">
<h2 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
<i class="fa fa-trophy mr-2 text-primary"></i>游戏统计
</h2>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-600">黑方胜利</span>
<span id="black-wins" class="font-medium">0</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">白方胜利</span>
<span id="white-wins" class="font-medium">0</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">平局</span>
<span id="draws" class="font-medium">0</span>
</div>
</div.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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