当前位置:首页 > HTML5游戏 > 正文内容

纯H5小游戏,生存挑战 - 躲避

nrta1105个月前 (03-15)HTML5游戏385

这是一个纯HTML5+CSS3写的一个小游戏。很适合前端初学者哈...。

HTML5:

<canvas id='world'></canvas>
<div id="status" class="ui"></div>
<div class="pos">
<div id="message" class="ui">
<h2 id="title">Survival Game</h2>
<ul>
<li>1. 避免红点。</li>
<li>2. 触摸绿色点刀枪不入。</li>
<li>3. 停留在中心, 不要接触侧面</li>
<li>4. 使用不易破坏的红点。</li>
<li>5. 通过到处移动来获得额外的分数。</li>
<li>6. 活下去</li>
</ul>
<a href="#" class="btn" id="startButton">Play</a>
</div>
</div>

CSS3:

a {
cursor: pointer;
}
html, body {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
li {
list-style: none;
}
.pos{
position: relative;
top: -90px;
}
/*input[type="Submit"]{cursor:pointer;}*/
strong {
font-weight: bold;
}
body {
overflow: hidden;
font-family: 'Comfortaa', cursive;
font-size: 11px;
}
canvas {
background-image:url(p9mUO.jpg);
background-position-x: initial;
background-position-y: initial;
background-size: cover;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-position: center;
font-family: 'Comfortaa', cursive;
}
.ui {
border-radius: 50px 120px 120px;
font-family: 'Comfortaa', cursive;
font-size: 17px;
color: #fa3380;
background: linear-gradient(to right, rgba(2, 179, 228, 0.6) 0%, rgba(2, 204, 186,0.6) 100%);
position: absolute;
width: 70%;
}
#message {
border-radius: 50px 120px 120px;
padding: 70px;
position: relative;
margin: 0 auto;
-webkit-animation:colorchange 50s infinite alternate;
}
#startButton {
margin-top: 50px;
}
#status {
width: 100%;
height: 15px;
padding: 8px;
display: none;
}
#status span {
color: #fff;
font-weight: bold;
margin-right: 20px;
}
#title {
text-transform: uppercase;
text-align: center;
margin-top: 10px;
color: #fa3380;
-webkit-animation:colorchange 7s infinite alternate;
}
.ui a {
outline: none;
font-family: 'Comfortaa', cursive;
font-size: 38px;
width: 150px;
text-align: center;
margin: 0 auto;
text-decoration: none;
color: deepskyblue;
padding: 2px;
display: block;
-webkit-animation:colorchange 1s infinite alternate;
}
.ui a:hover {
font-weight: bold;
background: linear-gradient(to right, rgba(2, 179, 228, 0.9) 0%, rgba(2, 204, 186,0.9) 100%);
border-radius: 50px 120px 120px;
}
@-webkit-keyframes colorchange {
0% {
color: darkviolet;
}
10% {
color: #fa3380;
}
20% {
color: rgba(2,179,228,0.8);
}
30% {
color: rgba(2,204,186,0.8);
}
40% {
color: rgba(169,81,237,0.8);
}
50% {
color: rgba(255,162,52,0.8);
}
60% {
color: rgba(255,84,131,0.8);
}
70% {
color: deepskyblue;
}
80% {
color: purple;
}
90% {
color: lightpink;
}
100% {
color: rgba(125,151,173,0.8);
}
}

代码下载

点击下载(提取码:xjsh)

qrcode_for_gh_95ec6d40e739_258.jpg

扫描二维码关注公众号

如在微信端,长按二维码即可关注

版权声明:本文由蚂蚁开源_H5游戏,微信小程序,蚂蚁大喇叭发布,如需转载请注明出处。

本文链接:http://www.zzfriend.com/post/44.html

分享给朋友:

相关文章

火柴人射箭 二

火柴人射箭 二

《火柴人射箭2 Archery 2》是一款射击游戏,邪恶的弓箭家族正在进行一场入侵狂欢。他们一个接着一个地控制了广阔的地区。在他们来袭击我们之前,我们应该先采取行动,成为传奇火柴人弓箭大师并消灭敌人邪恶的弓箭手。选择你的弓箭,并杀死在这个狩...

愤怒的小红帽

愤怒的小红帽

游戏简介:HTML5愤怒的小红帽小游戏是一款益智休闲射击小游戏,游戏中一支箭,一个便当袋,小红帽能平安的到达老奶奶家吗?赶紧一起护送小红帽去奶奶家吧。完成这个神圣的任务,做真正的勇士!游戏规则:抓住跑来的怪物,进入靶心后射箭。源码演示:代码...

H5游戏,盖楼游戏,带教程。

H5游戏,盖楼游戏,带教程。

一个基于 Canvas 的盖楼游戏游戏规则以下为默认游戏规则,也可参照下节自定义游戏参数每局游戏生命值为3,掉落一块楼层生命值减1,掉落3块后游戏结束,单局游戏无时间限制成功盖楼加25分,完美盖楼加50分,连续完美盖楼额外加25分,楼层掉落...

水果五子棋

水果五子棋

游戏说明:一款HTML5的五子棋小游戏,游戏中的棋子都是可爱的水果。如果你也喜欢五子棋游戏,那就赶快来挑战一下吧。图片演示:游戏通过鼠标左键/触摸进行操作,点击放置水果,五个连成一线的一方获得胜利。如何开始:游戏加载完毕点击播放键 - 再选...

西游黄金矿工

西游黄金矿工

基于cocos2d-js的html5版黄金矿工游戏西游黄金矿工是一款以黄金矿工玩法为基础,西游题材为背景的HTML5游戏,玩家需要在规定的时间内抓取宝物,同时需要达到过关分值方可过关。游戏说明游戏资源比较多,加载速度比较慢,打开连接后请耐心...

围住神经猫升级版,围住小鬼子

围住神经猫升级版,围住小鬼子

图片演示:源码下载:点击下载(提取码:ntd0)...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。