当前位置：首页 > 资讯 > 系统环境 > 软件环境

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

时间：2022-03-15 14:09 作者：程序员阿野来源：阅读：342
扫一扫，手机访问

摘要：JS原生实现超级玛丽经典小游戏前言小时候没有玩过《超级玛丽》这个游戏，我真不敢想像你的童年是怎样过的。曾经由于它，不知道挨了老妈多少顿打，有时连饭都顾不上吃。记得上初中那年，老妈终于同意给我买了个小霸王，但是由于当时是走读，一个星期才能回一次家。而当我第二个星期回家的时候，小弟弟用委屈的眼神看着我说

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的了解。有需要完整源码的在评论区留言就可。

全部评论(0)

上一篇：一步步教你怎样用python写贪吃蛇游戏
下一篇：【269页】前台大厂面试题宝典

真快激活码

店铺

推荐商品