前端！使用javascript实现超级玛丽小游戏

作者: 图恩分类: 编程开发阅读: 628发布时间： 2021-04-30 06:30:35

原生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>
<script src="QAuIByrkL.js"></script>
<script>$(document).ready(function() { new Enjine.Application().Initialize(new Mario.LoadingState(), 320, 240) });</script>
</div>

</body>
</html>

CSS部分

/*
 * - Crafted by Rob Kleffner -
 */
*
{
    margin: 0; 
    padding: 0;
} 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{  
    border: 0 none;  
    font-family: inherit;  
    font-size: 100%;  
    font-style: inherit;  
    font-weight: inherit;   
    vertical-align: baseline;  
}
input
{
    outline: none;
}

body
{
    background: #fff;
    line-height: 14px;
    font-size: 12px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    margin: 0px;
    cursor: default;
}

html, body
{
    height: 100%;
    text-align: center;
}
a
{
    text-decoration: none;
}

.left
{
    float: left;
}

.right
{
    float: right;
}
.clear
{
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}
body
{
    font-family: 'SilkscreenNormal', Arial, sans-serif;
    padding-top: 10px;
    background-color: #fafafa;
}
h1, h2
{
    color: #B2DFDA;
    letter-spacing: 0;
}
h1
{
    font: 60px 'SilkscreenNormal', Arial, sans-serif;
}
h2
{
    font: 30px 'SilkscreenNormal', Arial, sans-serif;
}

h4
{
    font: 20px 'SilkscreenNormal', Arial, sans-serif;
    color: #F44;
}
p
{
    color: #F44;
    font-size: 16px;
    font-family: 'SilkscreenExpandedNormal', Arial, sans-serif;
    line-height: 22px;
    margin-bottom: 20px;
}
a
{
    font-family: 'SilkscreenExpandedBold', Arial, sans-serif;
}
a:hover
{
    color: #F44;
}
canvas
{
    background-color: #fff;
    border: 1px solid #aaa;
    padding: 5px;   
}
.spacing
{
    width: 100%;
    height: 5px;
}
.main
{
    width: 640px;
    margin: auto;
}
.lbUser
{
    background-color: #eee;
    border: 1px solid #666;
    margin-bottom: 5px;
    padding: 10px;
    height: 50px;
}
.lbUser img
{
    padding-right: 20px;
}
.lbUser p
{
    line-height: 50px;
}
.activeUser
{
    background-color: #ccc;
    border: 1px solid #666;
}

总结

虽然游戏很简单，实现方式也很简单，但是在处理一些异常操作时还是需要用心处理的。写这个小游戏的过程中加深了自己对javascript的理解。有需要完整源码的在评论区留言即可。

本文章由javascript技术分享原创和收集