带你重回童年的经典系列——使用javascript实现超级玛丽小游戏！

最新推荐文章于 2024-08-12 12:14:18 发布

学前端的第五个月

最新推荐文章于 2024-08-12 12:14:18 发布

阅读量988

点赞数 9

分类专栏：前端 javascript 文章标签：游戏 html5 javascript 前端 css

本文链接：https://blog.csdn.net/m0_57454385/article/details/116206234

版权

本文介绍如何使用原生JavaScript实现超级玛丽小游戏。通过键盘控制角色移动、跳跃，重温童年乐趣。作者分享了项目的运行截图和关键代码片段，并表示这个小项目有助于提升JavaScript技能。

摘要由CSDN通过智能技术生成

原生JS实现超级玛丽经典小游戏

前言

小时候没有玩过《超级玛丽》这个游戏，我真不敢想像你的童年是怎么过的。曾经因为它，不知道挨了老妈多少顿打，有时连饭都顾不上吃。记得上初中那年，老妈终于同意给我买了个小霸王，但是因为当时是走读，一个星期才能回一次家。而当我第二个星期回家的时候，小弟弟用委屈的眼神看着我说：哥，你的学习机不知道为什么接电视机上没反应了。。接电视机上没反应了。。。没反应了！当时我那个恨啊！

通过按键，来控制图片的位置

按S键开始
方向键：移动
S键：跳跃/进入
A键：快跑/射击

运行截图

在这里插入图片描述

项目截图

在这里插入图片描述

源码

HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<link rel=stylesheet type="text/css" href="VNkyVaVxUV.css">
<script type="text/javascript" src="jquery.js"></script>

</head>
<body>
<div class=spacing></div>
<div class=main>
<canvas id=canvas width=640 height=480>
</canvas>
<div class=spacing></div>
</div>
<script src="wNGu2CtEMx.js"></script>