Javascript: 迷宫与打地鼠

最新推荐文章于 2025-07-18 12:53:05 发布
最新推荐文章于 2025-07-18 12:53:05 发布
阅读量1.8k 收藏 6
点赞数 2
CC 4.0 BY-SA版权
分类专栏： HTML-CSS JavaScript 文章标签： javascript github 打地鼠 迷宫 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/linwh8/article/details/52838716
本文分享了使用JavaScript实现的两个小游戏——迷宫和打地鼠。迷宫游戏要求玩家从起点S到达终点E而不碰墙，而打地鼠游戏则要求玩家点击随机出现的地鼠得分。每个游戏都有详细的UI、功能需求和相应的HTML、CSS及JavaScript代码展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

github地址：小威威的github

1.迷宫

项目要求：

需求规格（50分）
UI（10分）：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。
正常赢（10分）：移动鼠标，从S开始，到E结束，中间不碰墙，赢得游戏，显示“You Win”
碰墙输（10分）：从S开始后，到E结束之前，碰墙，墙变红，输，显示“You Lose”
重置结果（10分）：离开迷宫，墙恢复正常；从S开始时，隐藏结果显示
发现作弊（10分）：如果用户未经过S，就指到E，又或者指向S之后，从迷宫外绕路指向E，显示”Don’t cheat, you should start form the ‘S’ and move to the ‘E’ inside the maze!”

效果图如下：
Maze

HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>The Amazing Mouse Maze</title>
        <link rel="stylesheet" type="text/css" href="CSS/maze.css">
        <script type="text/javascript" src="Js/maze.js"></script>
    </head>
    <body>
        <h1>The Amazing Mouse Maze</h1>
        <p>Move your mouse over the "S" to begin.</p>
        <p id="result"><br></p>
        <div id="maze">
            <div id="wall_1" class="wall"></div>
            <div id="wall_2" class="wall"></div>
            <div id="wall_3" class="wall"></div>
            <div id="wall_4" class="wall"></div>
            <div id="wall_5" class="wall"></div>
            <div id="path_1" class="path">
                <div id="start">
                    <p>S</p>
                </div>
            </div>
            <div id="path_2" class="path"></div>
            <div id="path_3" class="path"></div>
            <div id="path_4" class="path"></div>
            <div id="path_5" class="path">
                <div id="end">
                    <p>E</p>
                </div>
                <!--用于测试作弊的结构-->
                <div id="test"></div>
            </div>
        </div>
        <p>The object of this game is to guide the mouse cursor through the start area<br>
           and get to the end area. Be sure to avoid the walls:
        </p>
        <div id="wall_example"></div>
        <br>
        <p>Good luck!</p>
    </body>
</html>

CSS代码如下：

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    font-family: "Andale Mono", Arial, sans-serif;
}

.wall, .path {
    display: inline-block;
    position: absolute;
}

body>p:nth-of-type(-n+2) {
    font-size: 22px;
}

.wall, #wall_example {
    background-color: rgb(238, 238, 238);
}

#wall_example, #maze {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#wall_example {
    border: solid 1px black;
    width: 100px;
    height: 25px;
}

#maze {
    width: 500px;
    height: 300px;
}

#wall_1, #wall_2, #wall_3, #wall_4, #wall_5 {
    border-left: solid 1px black;
    border-right: solid 1px black;
}

#wall_2, #wall_3, #wall_5, #path_1, #path_5 {
    border-bottom: solid 1px black;
}

#wall_1, #wall_4, #path_3 {
    border-top: solid 1px black;
}

#wall_1, #wall_2, #wall_5, #path_1 {
    left: 0px;
}

#wall_1, #wall_5 {
    width: 100%;
}

#wall_2, #wall_3, #path_3 {
    top: 52px;
}

#wall_1 {
    top:0px;
    height: 52px;
}

#wall_2 {
    width: 150px;
    height: 150px;
}

#wall_3 {
    width: 153px;
    height: 150px;
    right: -2px;
}

#wall_4 {
    width: 98px;
    height: 150px;
    left: 200px;
    top: 103px;
}

#wall_5 {
    height: 46px;
    bottom: 0px;
}

#path_1 {
    width: 200px;
    height: 50px;
    top:203px;
}

#path_2 {
    width: 50px;
    height: 100px;
    top: 103px;
    left: 150px;
}

#path_3 {
    width: 196px;
    height: 51px;
    left: 150px;
}

#path_4 {
    width: 50px;
    height: 100px;
    top: 103px;
    right: 150px;
}

#path_5 {
    width: 200px;
    height: 50px;
    top: 203px;
    right: 0px;
}

.path, .wall, #start, #end {
    cursor: pointer;
}

#start, #end {
    position: absolute;
    border: solid 1px black;
    width: 43px;
    height: 40px;
    font-weight: bold;
    font-size: 35px;
    top: 4px;
}

#start {
    left: 0px;
    background-color: rgb(132, 255, 124);
    opacity: 0.7;
}

#start:hover {
    opacity: 1;
}

#end {
    right: -2px;
    background-color: rgb(134, 131, 254);
    opacity: 0.7;
}

#end:hover {
    opacity: 1;
}

#start p, #end p {
    margin-top: 0px;
}

.error {
    background-color: red;
}

#test {
    position: absolute;;
    width: 20px;
    height: 50px;
    bottom: 0px;
    right: -20px;
}

JavaScript代码如下：

/*
项目名称：The Amazing Mouse Maze
时间：Oct 14
*/

var S_flag = 0; // 标识是否经过起点
var Path_flag = [0, 0, 0, 0, 0];  // 标识是否经过各路段避免作弊
var E_flag = 0; // 标识是否经过终点
var Lose_flag = 0; // 标识是否碰到墙壁
var test_cheat = 0; // 标识是否经过测试结构

function addListener() { // 添加事件处理器
    var _wall = document.getElementsByClassName("wall");
    var _path = document.getElementsByClassName("path");
    for (var i = 0; i < 5; i++) {
        _wall[i].addEventListener('mouseover', error_func);  // 鼠标碰到墙触发的事件
        _wall[i].addEventListener('mouseout', my_reset);  // 鼠标离开墙触发的事件
        _path[i].addEventListener('mouseout', record); // 鼠标经过路径触发的事件
    }
    var _start = document.getElementById("start");
    var _end = document.getElementById("end");
    _start.addEventListener('mouseover', start_); // 鼠标经过起点触发的事件
    _end.addEventListener('mouseover', end_); // 鼠标经过终点触发的事件
    var _test = document.getElementById("test");
    _test.addEventListener('mouseover', test_); // 鼠标经过测试结构触发的事件
}


function test_(event) { // 如果经过测试结构，赋值为1
    if (S_flag == 1) {
        test_cheat = 1;
    }
}

function error_func(event) { // 如果鼠标触碰到墙壁
    if (S_flag == 1 && E_flag == 0) { // 在已经开始且未结束的情况下变色
        if (Lose_flag != 1) { // 同时还得在没有触碰到其他墙壁的情况下变色
            event.target.className += " error";  // 给出发事件的元素增加一个类，应用对应的css
        }
        document.getElementById("result").textContent = "You Lose!" // 修改输出的值
        Lose_flag = 1; // 失败的标识赋值为1，方便后续检测
        S_flag = 0; // 将开头标识赋值为0，方便初始化
    }
}

function my_reset(event) { // 鼠标离开墙壁后的重置
    event.target.className = "wall"; // 恢复原来的class值
}

function record(event) { // 鼠标经过跑道时作记号以便检测是否作弊
    if (event.target.id == "path_1") {
        Path_flag[0] = 1;
    } else if (event.target.id == "path_2") {
        Path_flag[1] = 1;
    } else if (event.target.id == "path_3") {
        Path_flag[2] = 1;
    } else if (event.target.id == "path_4") {
        Path_flag[3] = 1;
    } else if (event.target.id == "path_5") {
        Path_flag[4] = 1;
    }
}

function start_(event) { // 鼠标经过起点
    if (S_flag == 0) { // 如果起点标识为0，进行相关变量初始化
        document.getElementById("result").textContent = "Have A Try!";
        E_flag = 0;
        Lose_flag = 0;
        test_cheat = 0;
        for (var i = 0; i < 5; i++) {
            Path_flag[i] = 0;
        }
    }
    S_flag = 1; // 经过起点，起点标识赋值为1
}

function JudgeCheat() { // 检测是否经过整条path
    if (Path_flag[0] == 1 && Path_flag[1] == 1 && Path_flag[2] == 1
        && Path_flag[3] == 1 && Path_flag[4] == 1) {
        return true;
    } else {
        return false;
    }
}

function end_(event) { // 鼠标经过终点
    E_flag = 1; // 结束的标识赋值为1
    if (Lose_flag != 1) { // 在不失败的情况下
        if (JudgeCheat()) { // 通过检测作弊的第一关
            if (test_cheat == 0) {  // 通过检测作弊的第二关
                document.getElementById("result").textContent = "You Win!";
            } else { // 没有通过检测，即为作弊
                document.getElementById("result").textContent
                = "Don't Cheat, you should start from the 'S' and move to the 'E' inside the maze!";        
            }
        } else { // 没有通过检测，即为作弊
            document.getElementById("result").textContent
            = "Don't Cheat, you should start from the 'S' and move to the 'E' inside the maze!";
        }
        S_flag = 0;
    }
}

window.onload = function() { // 页面加载完毕后执行添加事件处理器函数。
    addListener();
}

2.打地鼠

项目要求：

需求规格（30分）
UI（10分）：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。
打地鼠（10分）：能够随机出现地鼠，鼠标能够击中（点击正确，地鼠消失，出现新地鼠；点击错误，地鼠不消失）
正确计分（10分）：正确计算分数并显示，包括正确结束游戏

效果图如下：
打地鼠

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Whac-a-mole</title>
        <link rel="stylesheet" type="text/css" href="CSS/mole.css">
        <script type="text/javascript" src="Js/mole.js"></script>
    </head>
    <body>
        <h1>Whac-a-mole</h1>
        <p>Test your skill.how many boxes(moles) can you check(hit) in 30 seconds?</p>
        <p>
            <button id="start_stop"> Start Game | Stop Game </button>  &nbsp &nbsp &nbsp
            Time: <input type="text" name="time" disabled="disabled" id="time">
        </p>
        <p>
            <input type="text" name="result" disabled="disable" id="result"> &nbsp &nbsp &nbsp
            Score: <input type="text" name="socre" disabled="disable" id="score">
        </p>
        <br>
        <div id="container"></div>
        <div id="instruction">
        <p>Instructions:</p>
            <ol>
                <li>Click on the radio buttons(moles) as they are selected randomly by the computer.</li>
                <li>1 point per hit, minus 1 point per miss.</li>
            </ol>
        </div>
    </body>
</html>

CSS代码如下：

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    font-family: Courier, "Andale Mono", Arial, sans-serif;
}

#container {
    border-top: solid 2px rgb(183,179,179);
    border-bottom: solid 2px rgb(183,179,179);
    width: 300px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
}

#instruction {
    width:600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#instruction p {
    font-weight: bold;
}

p:first-of-type {
    font-size: 20px;
}

#time, #score {
    width: 30px;
}

.hole {
    margin: 5px 8px 5px 8px;
}

JavaScript代码如下：

/* 

    类型：Javascripe
    项目名称：mole

*/

var count = 0;  // 分数
var status = 0; 

window.onload = function() {
    Create_button();
    document.getElementById("start_stop").onclick = _control;
    button = document.getElementsByClassName("hole");
}

/* 计时器 */
_clock = 31;
function clock() {
    _clock = _clock-1;
    document.getElementById("time").value = _clock;
    time_value = setTimeout(clock, 1000);
    if (_clock == 0) {
        clearInterval(time_value);
        document.getElementById("result").value = "Gameover";
        alert("Game Over.\n Your score is: " + document.getElementById("score").value);
        status = 0;
        button[current].checked = false;
    }
}

/* Start Game | Stop Game 按钮的处理器 */
function _control() {
    if (status == 0) {  // 初始化
        status = 1;
        count = 0;
        _clock = 31;
        Random_occur();
        document.getElementById("score").value = count;
        document.getElementById("time").value = _clock;
        document.getElementById("result").value = "Playing";
        clock();
    } else {
        alert("Game Over.\n Your score is: " + document.getElementById("score").value);
        document.getElementById("result").value = "Gameover";
        clearInterval(time_value);
        button[current].checked = false;
        _clock = 0;
        status = 0;
    }
}

/* 产生随机数的函数 */
function Random_occur() {
    if (_clock != 0) { // 避免游戏结束后还能继续操作
        current = Math.round(Math.random()*60-1);  // 使范围处于0～59，减一是为了避免出现60的情况
        button[current].checked = true;
    }
}

/* 按钮处理器 */
function button_react(event) {
    if (_clock != 0) {
        if (before == true) { // before 是点击前的状态
            count++;
            this.checked = false;  // 取消点击状态
            Random_occur();
        } else {  // 非目标按钮
            count--;
            this.checked = false;
            button[current].checked = true; // 由于单选框的特性，点击其他按钮时原来的按钮也会消失，所以要给原来的按钮重新checked
        }
        document.getElementById("score").value = count;
    } else { // 避免接触后继续对按钮操作
        this.checked = false;
    }
}

/* mousedown 事件处理器 */
function before_button_react(event) {
    before = this.checked;
}

/* 产生按钮函数 */
function Create_button() {
    var _container = document.getElementById("container");
    for (var i = 0; i < 60; i++) {
        var new_button = document.createElement("input");
        new_button.setAttribute("type", "radio");
        new_button.setAttribute("name", "mouse");
        new_button.className = "hole";
        new_button.addEventListener('click', button_react);
        new_button.addEventListener('mousedown', before_button_react);
        _container.appendChild(new_button);
    }
}

以上内容本人观点，欢迎大家提出批评和指导，我们一起探讨！

用JavaScript canvas做的走迷宫游戏，肝了一下午，请帮忙点个赞！
编程界明世隐的博客
04-24 4872
引言： 上午女儿跟我去逛超市，在文具区看到一本书，总共有10幅图都是小迷宫游戏，图什么的都挺漂亮，就是有点贵应该是纸比较好，要30多块钱，我就觉得划不来（典型的铁公鸡），我就跟女儿说家里有，买了其他东西就回来了，然后网上查了一下，主要用到的是一个算法，于是吃完午饭就开始写了，这就学马老师来一波回首掏！ 有人可能会说你这人真抠门，这点钱都舍不得掏。 我会说：这是钱的问题吗？这是专业，我们程序员的钱有那么好赚吗?我待会就跟我老婆要30块钱，说我买了个迷宫游戏书，我们程序员的钱不就是敲代码来的吗，变现有问题
JavaScript游戏作品---迷宫
01-06
JavaScript经典游戏作品---迷宫
使用Js实现的迷宫游戏
qq_56337139的博客
08-26 2192
使用HTML+CSS+JS+HTML实现npc追逐迷宫游戏的实现
JavaScript打造动态打地鼠小游戏
最新发布
weixin_34374684的博客
07-18 771
/ 存储玩家得分// 存储所有地鼠的状态和位置// 随机产生一个位置// 将地鼠添加到数组中score++;// 如果击中，增加得分// 并从数组中移除逻辑分析与参数说明score是一个整数变量，用于记录玩家的得分。moles是一个数组，用来存储当前所有地鼠的位置。spawnMole函数在游戏中的某些时刻被调用，用来在随机位置生成新的地鼠。whackMole函数是在玩家尝试击打地鼠时被调用的。它接受一个参数index，代表玩家尝试击打的地鼠位置。
迷宫代码javascript版（网页版）
09-14
javascript版迷宫代码，html网页形式，下载即可运行。 代码风格简练、结构清晰，总193行代码，核心是迷宫算法的实现。
javascript解决迷宫求解问题
weixin_45353138的博客
05-28 1102
javascript解决迷宫求解问题 基本要求： 用户进入主界面，点击开始时，进入迷宫页面，点击随机迷宫生成一个随机迷宫，点击寻找路径一个物体从起点（1,1）开始动态显示，有探索过程（进去出来），到达终点探索到路径则在下方显示”找到路径”，点击正确路径则显示刚才探索路径中的正确路径（无进去出来过程），可以在console控制台动态显示坐标，再点击随机地图则创建一个新迷宫，依旧可以实现上面的功能，点击回到主界面则回到主界面。 算法思想 这是c语言的版本: 主要运用用栈的先进后出的思路进行迷宫求解 求解路
JS 迷宫 程序
12-11
HTML5 + JavaScript开发的迷宫类小程序，代码结构清晰
H5游戏开发实例：Web2.0打地鼠与迷宫游戏
- **打地鼠游戏**：该游戏中玩家需要在限定时间内点击随机出现的地鼠，根据玩家的反应速度和准确度来计算得分。这类游戏利用了HTML5的Canvas元素来绘制游戏场景和动画效果，并使用JavaScript来处理游戏逻辑和计时器...
迷宫求解课程设计：带你实现智慧老鼠
总之，"迷宫求解课程设计（含源代码）"这一项目包含了多个计算机科学和编程的关键知识点，为学习者提供了一个结合理论与实践的优秀平台。通过对这一项目的深入学习和实现，学习者可以加深对数据结构、算法、事件处理...
创新迷宫采样游戏设计与实现
从给定文件信息可以看出，本迷宫游戏可能采用了JavaScript编程语言实现。JavaScript是一种广泛使用的脚本语言，特别适合用于开发网页交互功能。它可以通过HTML和CSS实现用户界面，通过DOM操作与用户进行交互，是开发...
DHTML实例特效教程：鼠标、菜单与游戏开发
网络游戏是DHTML应用的另一大领域，例如迷宫游戏、俄罗斯方块、小蜜蜂、打弹珠等。这些游戏往往需要更复杂的JavaScript代码来处理游戏逻辑、状态更新和绘制游戏画面。在DHTML环境下，可以使用HTML创建游戏框架，CSS...
HTML5与JS做的微信小游戏（源码）（包含：打飞机，消消乐，密室逃脱，熊出没等等）
01-05
本压缩包集合了95款使用HTML5与JavaScript编写的微信小游戏，包括但不限于"打飞机"、"消消乐"、"密室逃脱"和"熊出没"等经典类型。这些游戏不仅趣味性十足，而且对于学习和理解Web游戏开发具有很高的参考价值。 ...
web打地鼠（js+html）
12-09
这是一个打地鼠的html。用js设定计时器来实现的效果
JS实现的走迷宫小游戏完整实例
11-30
本文实例讲述了JS实现的走迷宫小游戏。分享给大家供大家参考，具体如下： 先来看看运行效果截图： 完整实例代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS打造的走迷宫游戏</title> </head> <body> [removed] function ShowMenu
Python——打地鼠
m0_72606784的博客
10-27 1447
通过这篇文章，我们不仅学习了如何使用Python和Pygame库来开发一个简单的打地鼠游戏，还了解了游戏开发的基本流程和逻辑。这只是一个开始，Python和Pygame的强大功能可以让我们开发出更加复杂和有趣的游戏。希望这篇文章能够激发你对编程和游戏开发的兴趣，让你在敲击代码的同时，也能感受到编程带来的乐趣。记住，编程不仅仅是解决问题的工具，它也是一种创造和表达自己的方式。让我们一起用代码敲击出更多的乐趣吧！点我入群一起交流。
由JavaScript版迷宫游戏引出Java版迷宫地图生成器
howard2005的专栏
01-14 1208
Java案例：迷宫地图生成器 一、引入问题 本期18软件1班网页脚本实训项目是完成一个JavaScript版迷宫游戏。 迷宫地图是如何生成的呢？很简单，将一个正方形区域等分为若干行与若干列，比如25行25列，这样就有625个单元格，用一个二维数组map[25][25]就可以保存625个单元格信息，map[i][j] = 1表示该单元格要绘制砖，而map[i][j] = 0表示该单元格不绘制砖。 ...
JavaScript 迷宫
waiguai80的专栏
08-19 398
<html> <head> <style> #stage { border: 1px solid lightgray; } .rebuild { width:110px; height:30px; ...
web前端学习--用js实现计算器、迷宫、打地鼠
Dargeul的博客
07-27 2013
这里适用于刚刚开始学习JavaScript的人。
js实现打地鼠
qq_36838562的博客
05-19 879
.content{     width: 330px;     height: 330px;     margin: 50px auto;/*草坪margin为50*/     background: url(img/5.jpg) no-repeat;     background-size: 100% 100%;    }    .content img{     width:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值