Initial commit

README.md

+# 超级玛丽
+
+## 前言
+
+如果你没有玩过《超级玛丽》这个游戏，我真不敢想像你的童年是什么颜色的。曾经因为它，不知道挨了老妈多少顿打，有时连饭都顾不上吃。记得上初中那年，老妈终于同意给我买了个小霸王，但是因为当时是走读，一个星期才能回一次家。而当我第二个星期回家的时候，小弟弟用委屈的眼神看着我说：哥，你的学习机不知道为什么接电视机上没反应了。。接电视机上没反应了。。。没反应了！当时我那个恨啊！
+
+## 游戏介绍
+
+通过 A D 键来控制角色左右移动，K键跳，吃到子弹时使用J键射击，按H键开始游戏。游戏还是以背景运动的方式来实现人物向前跑的效果。其中主要运用了碰撞检测、抛物线运动等算法，并对大量的数据进行了分组处理。是否真实还原了游戏，由你来体验并给出答案。 当然，游戏中有些地方在操作控制上稍微有些不足，有待进一步完善。目前只有一关。
+
+![开始游戏](1.png)
+
+![生命和关卡显示界面](2.png)
+
+![游戏中。。。](3.png)
+
+![放子弹效果](4.png)
+
+![第一关过关](5.png)
+
+## 主要功能
+
+- **游戏地图的创建**： 地图的样式展现，陆地，石头，管道，岩石，带属性硬石，碉堡，城堡岩，旗帜，旗杆等。
+
+- **游戏关卡的设置**：障碍物、玛丽奥、敌人、隐藏物等位置属性。
+
+- **玛丽奥的功能设置**：实现定位、缓动效果移动、跳跃、成长、降级、发射子弹、死亡和障碍物及敌人碰撞检测。
+
+- **敌人的功能设置**：实现定位、移动、死亡、飞分数和障碍物及玛丽奥碰撞检测。
+
+- **障碍物的设置**：实现定位、实现碎石、飞金币、长蘑菇、飞分数、移动等效果、隐藏物的展现和玛丽奥的碰撞检测。
+
+- **属性物的设置**：子弹，成长蘑菇，加人蘑菇，子弹花，金币的属性设置及功能实现。
+
+- **游戏数据的展示**：游戏开始、开始关卡、游戏结束界面数据展示，游戏进行中展现倒计时、分数、金币、关卡、生命等数据。
\ No newline at end of file

css/style.css

+@charset "UTF-8";
+html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
+fieldset, img { border:none; }
+img{display: block;}
+address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
+ul, ol { list-style:none; }
+input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
+input::-moz-focus-inner { border:none; padding:0; }
+select, input { vertical-align:middle; }
+select, input, textarea { font-size:12px; margin:0; }
+input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }
+textarea { resize:none; }
+table { border-collapse:collapse; }
+body { color:#333; font:12px/22px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ }
+.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
+.clearfix { zoom:1; }
+.clearit { clear:both; height:0; font-size:0; overflow:hidden; }
+a { color:#666; text-decoration:none; }
+a:visited { color:#666; }
+a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }
+.hide-text{ white-space:nowrap; text-indent:100%; overflow:hidden;}
+
+
+#main{ width:512px; height:480px; margin:40px auto; border:1px solid #333; position:relative; overflow:hidden;}
+#person.base{ width:32px; height:32px; position:absolute;}
+.base.personR{ background:url(../img/allbgs.png) no-repeat 0 0;}
+.base.personL{ background:url(../img/allbgs.png) no-repeat -32px 0;}
+.base.personRM{ background:url(../img/move.gif) no-repeat 0 0;}
+.base.personLM{ background:url(../img/move.gif) no-repeat -32px 0;}
+.base.personRU{ background:url(../img/allbgs.png) no-repeat -64px 0;}
+.base.personLU{ background:url(../img/allbgs.png) no-repeat -96px 0;}
+.base.supportR{ background:url(../img/allbgs.png) no-repeat -128px 0;}
+.base.supportL{ background:url(../img/allbgs.png) no-repeat -160px 0;}
+.base.die{ background:url(../img/allbgs.png) no-repeat 0 -160px;}
+#person.big{ width:32px; height:64px; position:absolute; left:0;}
+.big.personR{ background:url(../img/allbgs.png) no-repeat 0 -32px;}
+.big.personL{ background:url(../img/allbgs.png) no-repeat -32px -32px;}
+.big.personRM{ background:url(../img/move.gif) no-repeat 0 -32px;}
+.big.personLM{ background:url(../img/move.gif) no-repeat -32px -32px;}
+.big.personRU{ background:url(../img/allbgs.png) no-repeat -64px -32px;}
+.big.personLU{ background:url(../img/allbgs.png) no-repeat -96px -32px;}
+.big.supportR{ background:url(../img/allbgs.png) no-repeat -128px -32px;}
+.big.supportL{ background:url(../img/allbgs.png) no-repeat -160px -32px;}
+#person.sendBullet{ width:32px; height:64px; position:absolute;}
+.sendBullet.personR{ background:url(../img/allbgs.png) no-repeat 0 -96px;}
+.sendBullet.personL{ background:url(../img/allbgs.png) no-repeat -32px -96px;}
+.sendBullet.personRM{ background:url(../img/move.gif) no-repeat 0 -96px;}
+.sendBullet.personLM{ background:url(../img/move.gif) no-repeat -32px -96px;}
+.sendBullet.personRU{ background:url(../img/allbgs.png) no-repeat -64px -96px;}
+.sendBullet.personLU{ background:url(../img/allbgs.png) no-repeat -96px -96px;}
+.sendBullet.personRF{ background:url(../img/allbgs.png) no-repeat -128px -96px;}
+.sendBullet.personLF{ background:url(../img/allbgs.png) no-repeat -160px -96px;}
+.sendBullet.supportR{ background:url(../img/allbgs.png) no-repeat -192px -96px;}
+.sendBullet.supportL{ background:url(../img/allbgs.png) no-repeat -224px -96px;}
+#person.cloaking{ background:none;}
+.map{ height:480px; background:url(../img/gk1.jpg) repeat-x left top; position:absolute; left:0; top: 0;}
+.map-list{ float:left; position:relative;}
+.map-list div{ float:left; width:32px; height:32px; background-image:url(../img/allbgs.png); background-repeat:no-repeat;}
+.maptype-bare{ background-position: 32px -256px;}
+.maptype-land{ background-position: 0 -256px;}
+.maptype-stone{ background-position: -32px -256px;}
+.maptype-ask{ background:url(../img/map-ask.gif) no-repeat !important;}
+.maptype-pipeline1{ background-position: 0 -288px;}
+.maptype-pipeline2{ background-position: -32px -288px;}
+.maptype-pipeline3{ background-position: 0 -320px;}
+.maptype-pipeline4{ background-position: -32px -320px;}
+.maptype-rock{ background-position: -64px -320px;}
+.maptype-blockhouse{ background:#000 !important;}
+.maptype-nothing{ background-position: -64px -288px;}
+.maptype-flagTop{background-position: -96px -256px;}
+.maptype-flagpole{background-position: -96px -288px;}
+.maptype-castleRock1{background-position: -128px -256px;}
+.maptype-castleRock2{background-position: -128px -288px;}
+.maptype-castleRock3{background-position: -128px -320px;}
+.maptype-castleRock4{background-position: -160px -256px;}
+.maptype-castleRock5{background-position: -160px -288px;}
+.maptype-castleRock6{background-position: -160px -320px;}
+
+.mushroom{ width:32px; height:32px; background:url(../img/mushroom.gif) no-repeat; position:absolute;}
+.mushroom.die{ background:url(../img/allbgs.png) no-repeat -32px -160px;}
+.mushroom.reverse{ background:url(../img/mushroomR.gif) no-repeat;}
+
+.data_display{ position:absolute; z-index:10; width:100%; font-family:"Press Start"; color:#fafafa; font-size:12px;}
+.data_display ul li{ float:left; width:20%; text-align:center; padding:10px 0;}
+
+.score{ font:12px/18px 'Press Start'; color:#fff; position:absolute;}
+.gold{ width:32px; height:32px; background:url(../img/gold.gif) no-repeat; position:absolute;}
+.largenMushroom{ width:32px; height:32px; background:url(../img/allbgs.png) no-repeat 0 -224px; position:absolute;}
+.lifeMushroom{ width:32px; height:32px; background:url(../img/allbgs.png) no-repeat -32px -224px; position:absolute;}
+.macadam{ width:16px; height:16px; background:url(../img/macadam.gif) no-repeat; position:absolute;}
+.flower{ width:32px; height:32px; background:url(../img/flower.gif) no-repeat; position:absolute;}
+.bullet{ width:16px; height:16px; background:url(../img/bullet.gif) no-repeat; position:absolute;}
+.explode{ width:32px; height:32px; background:url(../img/allbgs.png) no-repeat 0 -192px; position:absolute;}
+.flag{ width:32px; height:32px; background:url(../img/allbgs.png) no-repeat -96px -320px; position:absolute;}
+
+#notice{ background:#000; width:100%; height:100%; position:absolute; z-index:9; color:#fff; display:none;}
+#notice .world{ margin-top:150px; color:#fff;text-align:center; font:16px/32px 'Press Start'; }
+#notice .world span{ margin-left:20px;}
+.life{ margin:20px 0; text-align:center; font:16px/32px 'Press Start'; }
+.life span{ display:inline-block; vertical-align:top; margin:0 10px;}
+.life span.s1{ width:32px; height:32px; background:url(../img/allbgs.png) no-repeat 0 0;}
+.life span.s2{ line-height:20px; padding-top:12px;}
+
+#over{ display:none; background:#000; width:100%; height:100%; position:absolute; z-index:12; color:#fff;font:36px/480px 'Press Start'; text-align:center; }
+#text{ display:none; width:350px; margin-top:64px; position:absolute; z-index:10; left:50%; margin-left:-175px; font-family:'Press Start';}
+#text .name { background:url(../img/allbgs.png) no-repeat 0 -352px; width:352px; height:176px;}
+#text .boo{ text-align:right; color:#FFCCCC;}
+#text .explanation{ color:#fff; text-align:center; line-height:32px; font-size:14px;}
+#start{ color:#fff; font-size:12px; text-decoration:none;}
+
+
+@font-face {
+    font-family: 'Press Start';
+    src: url('pressstart2p-webfont.eot');
+    src: url('pressstart2p-webfont.eot?#iefix') format('embedded-opentype'),
+         url('pressstart2p-webfont.woff') format('woff'),
+         url('pressstart2p-webfont.ttf') format('truetype'),
+         url('pressstart2p-webfont.svg#press_start_2pregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'Super Plumber Bros';
+    src: url('super_plumber_brothers-webfont.eot');
+    src: url('super_plumber_brothers-webfont.eot?#iefix') format('embedded-opentype'),
+         url('super_plumber_brothers-webfont.woff') format('woff'),
+         url('super_plumber_brothers-webfont.ttf') format('truetype'),
+         url('super_plumber_brothers-webfont.svg#super_plumber_brothersregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}