在线版的超级马里奥 Super Mario HTML5

原本是在csdn资源找个代码学习的,无奈下载了几份都是垃圾代码(下载了几份都是)

废话不多说,直接上干活。代码、音效、图片、样式都包含

<!doctype html>
<html>
<head>
<meta charset=utf-8 />
<title>Super Mario HTML5 Test</title>
<link href="Content/style.css" rel="stylesheet" />
</head>
<body>
<div id="game">
<div id="world">
</div>
<div id="coinNumber" class="gauge">0</div>
<div id="coin" class="gaugeSprite"></div>
<div id="liveNumber" class="gauge">0</div>
<div id="live" class="gaugeSprite"></div>
</div>
<script>window.jQuery || document.write('<script src="Scripts/jquery.js"><\/script>')</script>
<script src="Scripts/testlevels.js"></script>
<script src="Scripts/oop.js"></script>
<script src="Scripts/keys.js"></script>
<script src="Scripts/constants.js"></script>
<script src="Scripts/sounds.js"></script>
<script src="Scripts/main.js"></script>
<!-- Game Musik -->
<audio id="GameMusic" preload="auto" autoplay loop>
    <source src="audio/Overworld.ogg" type="audio/ogg" />
</audio>
</body>
</html>

代码下载链接:https://download.csdn.net/download/mawendong/89053157

代码也是从Github上下载大神的

  • 11
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,我作为AI语言模型并没有能力呈现交互式游戏,但是我可以提供一些HTML/CSS的静态游戏设计示例。 以下是一个基于HTML/CSS的简单超级马里奥游戏静态页面示例: <!DOCTYPE html> <html> <head> <title>超级马里奥</title> <style> body { background-color: #0085c5; color: #fff; text-align: center; font-size: 2em; font-weight: bold; margin: 0; padding: 0; } .box { display: inline-block; position: relative; width: 60px; height: 60px; background-color: #ff7f0f; border: 2px solid #fff; margin-top: 50px; margin-left: 50px; } .box .mario { position: absolute; bottom: 0; left: 10px; width: 40px; height: 40px; background-image: url('https://vignette.wikia.nocookie.net/nintendo/images/7/78/SuperM.png/revision/latest?cb=20130103003927&path-prefix=en'); background-size: cover; } .box .coin { position: absolute; top: 0; right: 10px; width: 40px; height: 40px; background-image: url('https://pngimg.com/uploads/coin/coin_PNG36994.png'); background-size: cover; } </style> </head> <body> <div class="box"> <div class="mario"></div> <div class="coin"></div> </div> </body> </html> 在此示例中,我们使用HTML和CSS创建了一个游戏页面。在页面上,我们创建了一个60像素宽和60像素高的红色矩形。该矩形代表超级马里奥游戏中的区域。矩形上居中名称"超级马里奥”。接下来,我们在矩形中添加马里奥和金币。马里奥和金币都是div元素,使用CSS进行布局和样式化。马里奥和金币使用背景图像。 这只是一个简单示例,但是你可以添加更多元素和交互式动作,通过JavaScript实现APP或可以整合到在线游戏平台中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值