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

2023-10-27

前言

在这里插入图片描述
「作者主页」雪碧有白泡泡
「个人网站」雪碧的个人网站
「推荐专栏」

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

请添加图片描述

认识一下inscode

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

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

使用Inscode,只需访问其网站https://inscode.csdn.net/
个人主页:why_does_it_work

先看运行效果

在这里插入图片描述
这里可以直接看查源码内容刷新,最后一个是放大跳转网页

看查源码内容

在这里插入图片描述

获取项目

点击链接
在这里插入图片描述

项目结构

在这里插入图片描述

在这里插入图片描述

  • <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文件,该文件包含游戏中与游戏手柄交互的函数和逻辑。

在这里插入图片描述

角色控制按键

在这里插入图片描述


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
  });

在这里插入图片描述

这段代码定义了一个名为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对象,并将相应的按键与具体的游戏动作进行关联,可以实现控制游戏的功能。在全屏马里奥游戏中,通过检测键盘或游戏手柄的按键事件来控制角色移动、跳跃、加速等行为。
在这里插入图片描述

小结

通过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.jseditor.jsevents.jsgenerator.js等,用于定义游戏的逻辑和行为。

  4. 页面加载事件:使用<body onload="FullScreenMario()">将页面加载事件绑定到FullScreenMario()函数,该函数用于启动游戏。

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

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

童年回忆——超级玛丽(内含源码inscode一键运行) 的相关文章

随机推荐

  • STM32CubeMX新建工程并点亮一个LED

    可提前看 STM32CubeMX环境安装 保姆级 目录 进入STM32CubeMX界面 双击软件 可能会出现的弹窗 更改固件路径 新建工程 进入配置环境 以一个点灯程序为例 GPIO配置 输出电平设置 输出模式 上下拉 输出速度 User
  • 方差

    什么是随机变量的方差 方差反映随机变量取值的什么性质 方差是一个常用来体现随机变量的取值分散程度的量 设 X X X是一个随机变量 若 E X
  • (c语言)输出Programming is fun!

    题目要求 输入 无 输出 Programming is fun 具体代码如下 include
  • 打印从1到最大的n位数

    链接 打印从1到最大的n位数 牛客题霸 牛客网 nowcoder com 描述 输入数字 n 按顺序打印出从 1 到最大的 n 位十进制数 比如输入 3 则打印出 1 2 3 一直到最大的 3 位数 999 1 用返回一个整数列表来代替打印
  • Hands-On Hyperledger Fabric——Fabric的证书(账号)体系

    文章目录 Fabric证书是什么 Fabric证书服务器 Fabric ca fabric ca server的初始化 fabric ca server 配置文件 fabric ca client 使用 将Fabric ca server绑
  • GPT分区规划与各分区作用解析

    1 GPT分区规划 安装用EFI引导的Windows 10前 手动为硬盘分区 推荐方案如下 序号 分区名 起始柱面 磁头 扇区 容量 MBR保留扇区 GPT分区表 1MB 0 ESP分区 0 32 33 96MB 空白 预留给扩展ESP时使
  • 【H5】 svg画贝塞尔曲线方法

    H5 svg画贝塞尔曲线方法 d属性M 起始坐标 L 结束坐标 H 水平线 V 垂直线 A 圆弧 Z 闭合路劲 C S Q T贝塞尔曲线大写为绝对坐标 具体的坐标位置 小写为相对坐标 相对起始坐标点的具体长度 A命令x 径y半径角度弧长 0
  • 关于虚拟机.vmdk与.ovf 磁盘装载问题

    与 vmdk磁盘装载相关的两种方式 0 前言 1 只有 vmdk文件 2 带有 ovf vmdk文件 0 前言 提一嘴 现在用的比较多的虚拟机创建或者拷贝方式有两种 第一种是iso光盘映像装载 第二种是OVF导入 分别为 ISO的装载方式最
  • build JAX from source code

    Building from source JAX documentation
  • visual studio:不能加载.vdproj

    总结 下载后关闭所有vs项目 重新打开目标工程 需要完成次扩展的后续安装任务 参考 https www cnblogs com hofmann p 11183457 htm
  • 122FPS,51.9mAP 超轻量关键点检测算法PP-TinyPose来啦!

    在人机交互场景中 机器可以识别人的手势 肢体动作 表情 你可知背后的核心技术是什么吗 没错 就是关键点检测技术 它能帮你实现精准的人机交互任务 如手势控制 智能健身 体感游戏等 还可以识别交通违规 打架斗殴 违规操作等异常行为 话不多说 我
  • DVWA——XSS(Dom low&medium)

    此文章只用于学习 请勿用作其他违法犯罪行为 以下部分文字内容以图片形式展示 因为JS代码打不上去 目录 前言 XSS攻击流程 XSS的危害 XSS的漏洞类型 JS基本语句 XSS Dom Low XSS Dom Medium 前言 XSS被
  • Ubantu扩展SWAP区,使用gparted,以及死机非热启动解决方法

    Ubantu扩展SWAP区 使用gparted 以及死机非热启动解决方法 Swap分区 强制重启 扩充SWAP Swap分区 Swap分区是用来扩展内存的 即使用一部分硬盘空间作为交换 个人认为电脑内存大于16G即不需要分配Swap空间 我
  • Python字符串替换的3种方法

    Python字符串替换笔记主要展示了如何在Python中替换字符串 Python中有以下几种替换字符串的方法 本文主要介绍前三种 replace方法 常用 translate方法 re sub方法 字符串切片 根据Python字符串切片方法
  • springboot + redis多数据源 + jedis集群模式

    最近有个项目需要redis支持多个集群 网上搜了下 发现有个开源的项目spring boot starter dynamic redis 代码写的挺好 可惜只有单机版的 于是fork了他的代码改了下 支持jedis集群模式 新代码昨天已提交
  • 如何用人工智能预测股票(完整项目)

    本文由 沈庆阳 所有 转载请与作者取得联系 前言 十分钟实现人工智能股价预测 是一个深度学习的练习项目 其通过机器学习算法 根据过去几年与某只股票相关的K线走势 公司相关报道的情感分析作为数据集 通过训练来得到可以预测股价的机器学习模型 并
  • VS2008, MFC 文件的操作4 - CFile类, CFileDialog类 方式 文本方式打开

    接上一节笔记 VS2008 MFC 文件的操作3 Win32 API 方式 文本方式打开 1 代码 及 点击 子菜单项 WriteFile 时候的可选文件 void Cvs2008 SX jiaocheng12View OnFileWrit
  • 【vscode代码片段增加和删除】

    目录 一 概述 二 详解 三 实例 一 概述 项目开发中 存在很多重复代码 可将其抽取出来定义成自己的代码片段 提高编码效率 实现快捷开发 二 详解 详解1 选择并打开代码片段文件 详解2 删除代码片段文件 代码片段文件创建后会一直保存在本
  • Java7对资源释放操作的简化

    学会使用finally释放资源 public class TryCatchResourceDemo public static void main String args try 这里面只能放置资源对象 用完会自动关闭 自动调用资源对象的c
  • 童年回忆——超级玛丽(内含源码inscode一键运行)

    前言 作者主页 雪碧有白泡泡 个人网站 雪碧的个人网站 推荐专栏 java一站式服务 React从入门到精通 前端炫酷代码分享 从0到英雄 vue成神之路 uniapp 从构建到提升 从0到英雄 vue成神之路 解决算法 一个专栏就够了 架