Wed Apr 12 02:40:00 UTC 2023 inscode

上级 63b5a6c5
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title>InsCode</title>
<meta charset="UTF-8">
<title>五子棋</title>
<style type="text/css">
#chessboard {
width: 600px;
height: 600px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
.piece {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.black {
background-color: #000;
}
.white {
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<img src="src/assets/logo.svg" alt="InsCode">
<div>欢迎来到 InsCode</div>
</div>
<script src="script.js"></script>
<canvas id="chessboard"></canvas>
<script type="text/javascript">
var chessboard = document.getElementById('chessboard');
var context = chessboard.getContext('2d');
var me = true;
var over = false;
var chess = [];
// 初始化棋盘
for (var i = 0; i < 15; i++) {
chess[i] = [];
for (var j = 0; j < 15; j++) {
chess[i][j] = 0;
}
}
// 绘制棋盘
context.strokeStyle = '#BFBFBF';
for (var i = 0; i < 15; i++) {
context.moveTo(20 + i * 40, 20);
context.lineTo(20 + i * 40, 580);
context.stroke();
context.moveTo(20, 20 + i * 40);
context.lineTo(580, 20 + i * 40);
context.stroke();
}
// 下棋
var oneStep = function(i, j, me) {
context.beginPath();
context.arc(20 + i * 40, 20 + j * 40, 18, 0, 2 * Math.PI);
context.closePath();
var gradient = context.createRadialGradient(20 + i * 40 + 2, 20 + j * 40 - 2, 18, 20 + i * 40 + 2, 20 + j * 40 - 2, 0);
if (me) {
gradient.addColorStop(0, '#0A0A0A');
gradient.addColorStop(1, '#636766');
chess[i][j] = 1;
} else {
gradient.addColorStop(0, '#D1D1D1');
gradient.addColorStop(1, '#F9F9F9');
chess[i][j] = 2;
}
context.fillStyle = gradient;
context.fill();
}
chessboard.onclick = function(e) {
if (over || !me) {
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 40);
var j = Math.floor(y / 40);
if (chess[i][j] == 0) {
oneStep(i, j, me);
if (checkWin(i, j, me)) {
over = true;
alert(me ? '黑棋赢了' : '白棋赢了');
}
me = !me;
}
}
// 判断胜负
var checkWin = function(i, j, me) {
var count = 0;
for (var k = 0; k < 5; k++) {
if (chess[i][j + k] == (me ? 1 : 2)) {
count++;
} else {
break;
}
}
for (var k = 1; k < 5; k++) {
if (j - k < 0 || chess[i][j - k] != (me ? 1 : 2)) {
break;
} else {
count++;
}
}
if (count >= 5) {
return true;
}
count = 0;
for (var k = 0; k < 5; k++) {
if (chess[i + k][j] == (me ? 1 : 2)) {
count++;
} else {
break;
}
}
for (var k = 1; k < 5; k++) {
if (i - k < 0 || chess[i - k][j] != (me ? 1 : 2)) {
break;
} else {
count++;
}
}
if (count >= 5) {
return true;
}
count = 0;
for (var k = 0; k < 5; k++) {
if (chess[i + k][j + k] == (me ? 1 : 2)) {
count++;
} else {
break;
}
}
for (var k = 1; k < 5; k++) {
if (i - k < 0 || j - k < 0 || chess[i - k][j - k] != (me ? 1 : 2)) {
break;
} else {
count++;
}
}
if (count >= 5) {
return true;
}
count = 0;
for (var k = 0; k < 5; k++) {
if (chess[i + k][j - k] == (me ? 1 : 2)) {
count++;
} else {
break;
}
}
for (var k = 1; k < 5; k++) {
if (i - k < 0 || j + k > 14 || chess[i - k][j + k] != (me ? 1 : 2)) {
break;
} else {
count++;
}
}
if (count >= 5) {
return true;
}
return false;
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册