最新一次的作业,需要用所学到的知识写一个前端小游戏,我想到了五子棋,想着容易做起来难啊!不过历经千辛万苦,最终磕磕巴巴写出来了一个简单的(有bug)五子棋。
首先贴起来html内容,很简单,就一个地图
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="map" class="map"></div>
<script src="js/index.js"></script>
</body>
</html>
然后稍微的设置了一下样式,看起来不是贴边,并且给添加了一个背景图片,看起来稍微的好一点(并不是因为不知道填充什么颜色好点)
* {
padding: 0;
margin: 0;
list-style: none;
}
.map {
width: 600px;
height: 600px;
margin: 10px auto;
/* border: 5px solid #333; */
border-radius: 5px;
position: relative;
background: url(../image/1.jpg) no-repeat center center;
background-size: auto 610px;
}
接下来就是重头戏了,先构造一个棋子和棋盘网格的对象
// ========================== 棋子 ==============================
(function () {
const ps = "absolute";
const interval = 20;
function Chess(option) {
option = option instanceof Object ? option : {};
this.width = option.width || 20;
this.height = option.height || 20;
this.color = option.color || "black";
this.radius = option.radius || "50%";
this.x = option.x || 0;
this.y = option.y || 0;
this.eles = [];
}
Chess.prototype.creatChess = function (map) {
const ele = document.createElement("div");
ele.style.width = this.width + "px";