原生JS實(shí)現(xiàn)超級(jí)瑪麗經(jīng)典小游戲
前言
小時(shí)候沒有玩過《超級(jí)瑪麗》這個(gè)游戲，我真不敢想像你的童年是怎么過的早芭。曾經(jīng)因?yàn)樗顺牵恢腊ち死蠇尪嗌兕D打，有時(shí)連飯都顧不上吃退个。記得上初中那年募壕，老媽終于同意給我買了個(gè)小霸王，但是因?yàn)楫?dāng)時(shí)是走讀语盈，一個(gè)星期才能回一次家舱馅。而當(dāng)我第二個(gè)星期回家的時(shí)候，小弟弟用委屈的眼神看著我說：哥刀荒，你的學(xué)習(xí)機(jī)不知道為什么接電視機(jī)上沒反應(yīng)了代嗤。。接電視機(jī)上沒反應(yīng)了缠借。干毅。。沒反應(yīng)了泼返！當(dāng)時(shí)我那個(gè)恨跋醴辍！
通過按鍵绅喉，來控制圖片的位置
- 按S鍵開始
- 方向鍵：移動(dòng)
- S鍵：跳躍/進(jìn)入
- A鍵：快跑/射擊
運(yùn)行截圖
項(xiàng)目截圖
源碼
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;
}
總結(jié)
雖然游戲很簡單渠鸽，實(shí)現(xiàn)方式也很簡單，但是在處理一些異常操作時(shí)還是需要用心處理的霹疫。寫這個(gè)小游戲的過程中加深了自己對(duì)javascript的理解拱绑。有需要完整源碼的在評(píng)論區(qū)留言即可。
