Javascript: 迷宫与打地鼠

最新推荐文章于 2024-05-17 01:47:17 发布

小威威__

最新推荐文章于 2024-05-17 01:47:17 发布

阅读量1.8k

点赞数 2

分类专栏： HTML-CSS JavaScript 文章标签： javascript github 打地鼠迷宫 web

本文链接：https://blog.csdn.net/linwh8/article/details/52838716

版权

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) {

最低0.47元/天解锁文章

小威威__

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Javascript: 迷宫与打地鼠

github地址：小威威的github1.迷宫项目要求：需求规格（50分） UI（10分）：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。正常赢（10分）：移动鼠标，从S开始，到E结束，中间不碰墙，赢得游戏，显示“You Win” 碰墙输（10分）：从S开始后，到E结束之前，碰墙，墙变红，输，显示“You Lose” 重置结果（10分）：离开迷宫，墙
复制链接

扫一扫