我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛
我正在参加 码上掘金体验活动，详情：show出你的创意代码块
前言
《抓船长》：是一款pc端单机html小游戏，休闲娱乐游戏；无需键盘操作，只有鼠标，把船长快乐抓抓抓！
一、游戏介绍与规则
技术介绍
css + jq
游戏名称
《抓船长》
游戏规则
时间倒计时：30s.（默认滑入模式）
① 滑入模式，鼠标滑到就是抓到，抓到就是得分！
② 点击模式，鼠标滑到船长处，然后单击鼠标，方可得分！
二、大体设计与代码讲解
大体设计
大体设计就是，比较简单，就是创建4x4个宫格子；每个格子同一个方法，放一个船长到一个格子里；鼠标滑入格子，匹配该格子的位置和船长出现的格子位置是否正确，正确加分；同时，船长会跑去别的格子...以次，30s内，找到多少只船长~
代码讲解
由于代码也比较简单，而且也有注释；就直接上完整的代码啦~
var type = 1; // 1滑入模式；2点击模式
var time = 30;
let that = this;
var result = 0;
that.createPuzzleTable(); // 创建表格，“画”表格
var isStart = false;
var theCaptainPosition = -1; // 船长的位置
// 切换模式
function bindType(e) {
if (isStart) {
// 当前已经开始游戏，不可创建
return;
}
// console.log(e)
var theType = e.getAttribute("data-value");
if (theType == 1) {
e.setAttribute("data-value", "2");
$("#gameType").text("点击模式");
type = 2;
} else {
e.setAttribute("data-value", "1");
$("#gameType").text("滑入模式");
type = 1;
}
}
// 创建表格，“画”表格
function createPuzzleTable() {
$pt = $('<table>').attr('id', 'puzzleTable');
for (var y = 0; y < 4; y++) {
var $row = $pt.append($('<tr>'));
for (var x = 0; x < 4; x++) {
$row.children().append($('<td class="td" onclick="clickSpan(this)" onmouseenter="enterSpan(this)" onmouseleave="leaveSpan(this)" data-value=' + (y * 4 + x) + '>').text(y * 4 + x + 1));
}
}
$('#catch-body').append($pt);
}
// 开始游戏
function start() {
if (isStart)
return;
if (time == 30) { //如果不加入该判断，则会出现在倒计时期间不断的点击发生不断的加快（其实就是你点了多少次就重复多少次该函数）的问题，用setTimeout（）方法不加此判断也是一样的
var time1 = setInterval(function() {
if (time == 0) {
$("#gameStart").text("再来一把");
$("#gameStart").removeAttr("disabled");
time = 30;
clearInterval(time1);
isStart = false;
that.gameOver();
} else {
$("#gameStart").attr("disabled", "true");
$("#gameStart").text("倒计时(" + time + ")");
time--;
}
}, 1000);
// 随机的船长
randomCaptain();
isStart = true;
}
}
// 游戏结束
function gameOver() {
alert("游戏结束，您的最终分数：" + result);
result = 0;
}
// 生成随机的船长
function randomCaptain() {
var tdList = $('.td');
if (tdList == undefined || tdList.length == 0) {
// console.log("出错了！")
return;
}
var size = tdList.length;
var randomNum = Math.floor(Math.random() * size);
var lastImg = tdList[randomNum].style.backgroundImage;
while (lastImg != "") {
randomNum = Math.floor(Math.random() * size);
lastImg = tdList[randomNum].style.backgroundImage;
}
for (var i = 0; i < size; i++) {
tdList[i].style.backgroundImage = "";
}
that.theCaptainPosition = randomNum;
tdList[randomNum].style.backgroundImage = 'url("https://p9-passport.byteacctimg.com/img/user-avatar/2ee55cb1e7f476ace6a73fc86a8ff7e2~300x300.image")';
// console.log(size);
// console.log(tdList);
// console.log(tdList[randomNum])
}
// 判断是否抓到的是船长
function bindCatch(theNumber) {
// console.log(theCaptainPosition);
// console.log(theNumber)
if (theNumber == theCaptainPosition) {
// console.log("加一分！");
result++;
$("#result").text(result);
randomCaptain();
}
}
// 点击模式
function clickSpan(e) {
console.log(type, isStart)
if (!isStart || type == 1) { // 当前未开始或滑入模式，不需要点击
return;
}
var theNumber = e.getAttribute("data-value");
that.bindCatch(theNumber);
}
// 鼠标滑入
function enterSpan(e) {
e.style.border = "1px solid #66d3ff";
if (!isStart || type == 2) { // 未开始或是点击模式不操作
return;
}
// console.log(result)
// console.log("滑入", e);
var theNumber = e.getAttribute("data-value");
that.bindCatch(theNumber);
}
// 鼠标滑出
function leaveSpan(e) {
e.style.border = "1px solid #000000";
if (!isStart) {
return;
}
// console.log("离开", e);
}
三、仓库地址与体验地址
这里代码片段展示（布局不会弄，太拉了~ alter 弹窗不支持，最好去网站体验~）
（没有做适配，很抱歉~ 手机端也不友好。献丑了~ ）
大家可以直接来笔者的网站来体验
在线体验（pc端）：体验传送门
仓库地址：等建好活动GitHub的要求申请了，就给大家放~（着急想要的可以直接去扒我的网站~） 传送门
文章小尾巴
文章写作、模板、文章小尾巴可参考：《写作“小心思”》
感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是南方者，一个热爱计算机更热爱祖国的南方人。
（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）
