前台！使用javascript实现超级玛丽小游戏
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的了解。有需要完整源码的在评论区留言就可。
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台！使用javascript实现超级玛丽小游戏
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台！使用javascript实现超级玛丽小游戏
