【休闲益智】【HTML】抓船长，30s抓船长，看能抓几只

我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛

我正在参加码上掘金体验活动，详情：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" οnclick="clickSpan(this)" οnmοuseenter="enterSpan(this)" οnmοuseleave="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的要求申请了，就给大家放_{（着急想要的可以直接去扒我的网站}）传送门

文章小尾巴

文章写作、模板、文章小尾巴可参考：《写作“小心思”》

　　感谢你看到最后，最后再说两点~
　　①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
　　②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
　　我是南方者，一个热爱计算机更热爱祖国的南方人。

　　（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）