童年回忆——超级玛丽（内含源码inscode一键运行）

梦里梦外; 2023-10-14 15:33 54阅读 0赞

# 前言 #

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

> ★[java一站式服务][java] ★  
> ★ [React从入门到精通][React]★  
> ★[前端炫酷代码分享][Link 3] ★  
> ★ [从0到英雄，vue成神之路][0_vue]★  
> ★ [uniapp-从构建到提升][uniapp-]★  
> ★ [从0到英雄，vue成神之路][0_vue 1]★  
> ★ [解决算法，一个专栏就够了][Link 4]★  
> ★ [架构咱们从0说][0]★  
> ★ [数据流通的精妙之道][Link 5]★  
> ★[后端进阶之路][Link 6]★

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

### 文章目录 ###

*  前言
 *  认识一下inscode
 *  先看运行效果
 *   *   *  看查源码内容
         *  获取项目
 *  项目结构
 *  角色控制按键
 *  小结

# 认识一下inscode #

![在这里插入图片描述][ceb7297d53444c67ac900201cc3b721f.png]  
CSDN最新推出的Inscode服务是一个在线编程工具，旨在为开发者提供一个便捷的编写、运行和分享代码的环境，让开发者无需在本地搭建编程环境，即可快速编写和运行代码。

Inscode支持多种编程语言，包括Java、Python、C++等，同时也支持编写HTML、CSS和JavaScript代码。它提供了完整的运行环境，让代码在网页上直接运行并输出结果，即时调试，方便快捷。同时，Inscode还提供了分享功能，可以轻松地将代码分享给其他人。

使用Inscode，只需访问其网站[https://inscode.csdn.net/][https_inscode.csdn.net]  
个人主页：[why\_does\_it\_work][why_does_it_work]

# 先看运行效果 #

![在这里插入图片描述][22c242737a63478287cee5392fa2c005.png]  
这里可以直接**看查源码内容**，**刷新**，最后一个是**放大跳转网页**

### 看查源码内容 ###

![在这里插入图片描述][f45be275d7d7437e950e740b4256bb70.png]

### 获取项目 ###

[点击链接][Link 7]  
![在这里插入图片描述][0e8f8bdae09445b0af9cc61638841edb.png]

# 项目结构 #

![在这里插入图片描述][9d097225aefa4c548d4f46dd0e721e90.png]

![在这里插入图片描述][aa2c9ad697ce430aaddc9eedbf6ba944.png]

>  *  `<link href="mario.css" rel="stylesheet">`：引用名为"mario.css"的样式表文件，该文件用于定义Full Screen  
>     Mario游戏的样式。
>  *  `<link href="Fonts/stylesheet.css" rel="stylesheet">`：引用名为"stylesheet.css"的样式表文件，该文件用于定义游戏中使用的字体样式。
>  *  `<script src="data.js"></script>`：引用名为"data.js"的JavaScript文件，该文件包含有关游戏中使用的数据。
>  *  `<script src="editor.js"></script>`：引用名为"editor.js"的JavaScript文件，该文件包含用于编辑游戏的相关函数。
>  *  `<script src="events.js"></script>`：引用名为"events.js"的JavaScript文件，该文件包含游戏中的事件处理函数。
>  *  `<script src="generator.js"></script>`：引用名为"generator.js"的JavaScript文件，该文件包含游戏中生成地图和物体的函数。
>  *  `<script src="library.js"></script>`：引用名为"library.js"的JavaScript文件，该文件包含一些工具函数和常量。
>  *  `<script src="load.js"></script>`：引用名为"load.js"的JavaScript文件，该文件包含游戏中用于加载资源的函数。
>  *  `<script src="maps.js"></script>`：引用名为"maps.js"的JavaScript文件，该文件包含游戏中使用的地图数据和相关函数。
>  *  `<script src="mario.js"></script>`：引用名为"mario.js"的JavaScript文件，该文件包含有关Mario角色的函数和逻辑。
>  *  `<script src="quadrants.js"></script>`：引用名为"quadrants.js"的JavaScript文件，该文件包含用于管理游戏中的四分之一区域的函数。
>  *  `<script src="sounds.js"></script>`：引用名为"sounds.js"的JavaScript文件，该文件包含游戏中的声音相关函数。
>  *  `<script src="sprites.js"></script>`：引用名为"sprites.js"的JavaScript文件，该文件包含游戏中的精灵（sprite）的相关函数和逻辑。
>  *  `<script src="things.js"></script>`：引用名为"things.js"的JavaScript文件，该文件包含游戏中的各种物体的函数和逻辑。
>  *  `<script src="toned.js"></script>`：引用名为"toned.js"的JavaScript文件，该文件包含游戏中对音频的处理函数。
>  *  `<script src="triggers.js"></script>`：引用名为"triggers.js"的JavaScript文件，该文件包含游戏中的触发器函数和逻辑。
>  *  `<script src="upkeep.js"></script>`：引用名为"upkeep.js"的JavaScript文件，该文件包含游戏中的维护函数和逻辑。
>  *  `<script src="utility.js"></script>`：引用名为"utility.js"的JavaScript文件，该文件包含一些通用的工具函数。
>  *  `<script src="gamepad.js"></script>`：引用名为"gamepad.js"的JavaScript文件，该文件包含游戏中与游戏手柄交互的函数和逻辑。

![在这里插入图片描述][fe17a5a11c3f4d489b6738b4e688ada5.png]

# 角色控制按键 #

![在这里插入图片描述][5887496250024d70ba173a7813d65fec.png]

function resetTriggers() {
        
      // Make the controls object
      window.controls = new Controls({
        
        left: [37, 65, "AXIS_LEFT", "DPAD_LEFT"],       // a,     left
        right: [39, 68, "AXIS_RIGHT", "DPAD_RIGHT"],    // d,     right
        up: [38, 87, 32, "FACE_2"],                     // w,     up
        down: [40, 83, "AXIS_DOWN", "DPAD_DOWN"],       // s,     down
        sprint: [16, 17, "FACE_1"],                     // shift, ctrl
        pause: [80, "START_FORWARD"],                   // p
        mute: [77],                                     // m
        qcount: [81]                                    // q
      });

![在这里插入图片描述][7d3bc6949eb94385bb8c81d8eacbc5bd.png]

这段代码定义了一个名为`resetTriggers`的函数，函数内部的代码如下：

>  *  创建一个`Controls`对象并将其赋值给全局变量`window.controls`。
>  *  这个`Controls`对象具有以下属性和键盘/游戏手柄按键的映射关系：
>     
>      *  `left`：表示左移动的按键，包括键码37、65以及游戏手柄上的"AXIS\_LEFT"和"DPAD\_LEFT"。
>      *  `right`：表示右移动的按键，包括键码39、68以及游戏手柄上的"AXIS\_RIGHT"和"DPAD\_RIGHT"。
>      *  `up`：表示上移动的按键，包括键码38、87、32以及游戏手柄上的"FACE\_2"。
>      *  `down`：表示下移动的按键，包括键码40、83以及游戏手柄上的"AXIS\_DOWN"和"DPAD\_DOWN"。
>      *  `sprint`：表示加速的按键，包括键码16、17以及游戏手柄上的"FACE\_1"。
>      *  `pause`：表示暂停的按键，包括键码80以及游戏手柄上的"START\_FORWARD"。
>      *  `mute`：表示静音的按键，包括键码77。
>      *  `qcount`：表示按键计数的按键，包括键码81。

通过创建`Controls`对象，并将相应的按键与具体的游戏动作进行关联，可以实现控制游戏的功能。在全屏马里奥游戏中，通过检测键盘或游戏手柄的按键事件来控制角色移动、跳跃、加速等行为。  
![在这里插入图片描述][059fbdbdc98d409588013bcc8ad71fda.png]

# 小结 #

通过HTML编写的超级马里奥代码主要包括以下几个部分：

1.  HTML结构：包含`<!DOCTYPE html>`声明和`<html>`, `<head>`, `<title>`等标签，用于定义页面的基本结构和显示在浏览器标签栏的标题。
2.  样式表引用：使用`<link href="mario.css" rel="stylesheet">`和`<link href="Fonts/stylesheet.css" rel="stylesheet">`引用外部的CSS样式表文件，用于定义游戏的样式。
3.  JavaScript文件引用：使用`<script src="..." ></script>`标签引用多个JavaScript文件，包括`data.js`、`editor.js`、`events.js`、`generator.js`等，用于定义游戏的逻辑和行为。
4.  页面加载事件：使用`<body onload="FullScreenMario()">`将页面加载事件绑定到`FullScreenMario()`函数，该函数用于启动游戏。

总结起来，通过这段HTML代码，我们引入了游戏所需的样式和脚本文件，并在页面加载完成后调用`FullScreenMario()`函数来启动超级马里奥游戏。这些文件中定义了游戏的样式、数据、逻辑、事件处理等内容，通过这些代码实现了游戏的展示和交互效果。

![在这里插入图片描述][bcebd84c1ba94c9f8364972b80108e56.png]

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[React]: http://t.csdn.cn/69y5b
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[0_vue]: http://t.csdn.cn/X1kpw
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue 1]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[Link 6]: https://blog.csdn.net/why_does_it_work/category_12397959.html?spm=1001.2014.3001.5482
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[ceb7297d53444c67ac900201cc3b721f.png]: https://img-blog.csdnimg.cn/ceb7297d53444c67ac900201cc3b721f.png
[https_inscode.csdn.net]: https://inscode.csdn.net/
[why_does_it_work]: https://inscode.csdn.net/@why_does_it_work
[22c242737a63478287cee5392fa2c005.png]: https://img-blog.csdnimg.cn/22c242737a63478287cee5392fa2c005.png
[f45be275d7d7437e950e740b4256bb70.png]: https://img-blog.csdnimg.cn/f45be275d7d7437e950e740b4256bb70.png
[Link 7]: https://inscode.csdn.net/@why_does_it_work/HTML-CSS-JS_31
[0e8f8bdae09445b0af9cc61638841edb.png]: https://img-blog.csdnimg.cn/0e8f8bdae09445b0af9cc61638841edb.png
[9d097225aefa4c548d4f46dd0e721e90.png]: https://img-blog.csdnimg.cn/9d097225aefa4c548d4f46dd0e721e90.png
[aa2c9ad697ce430aaddc9eedbf6ba944.png]: https://img-blog.csdnimg.cn/aa2c9ad697ce430aaddc9eedbf6ba944.png
[fe17a5a11c3f4d489b6738b4e688ada5.png]: https://img-blog.csdnimg.cn/fe17a5a11c3f4d489b6738b4e688ada5.png
[5887496250024d70ba173a7813d65fec.png]: https://img-blog.csdnimg.cn/5887496250024d70ba173a7813d65fec.png
[7d3bc6949eb94385bb8c81d8eacbc5bd.png]: https://img-blog.csdnimg.cn/7d3bc6949eb94385bb8c81d8eacbc5bd.png
[059fbdbdc98d409588013bcc8ad71fda.png]: https://img-blog.csdnimg.cn/059fbdbdc98d409588013bcc8ad71fda.png
[bcebd84c1ba94c9f8364972b80108e56.png]: https://img-blog.csdnimg.cn/bcebd84c1ba94c9f8364972b80108e56.png