简介
DooMissO是本人使用JS、jQuery开发的一款弹幕射击游戏,现已推出1.8版
HTML DOM操作和jQuery代码混搭得比较厉害,后续几个版本会陆续修正统一
github仓库地址:https://github.com/Kagashino/doomisso-demo
试玩地址:https://kagashino.github.io/doomisso-demo/
实现步骤:
一、游戏画布(伪)
这个不是CANVAS开发的游戏,所以游戏画布是一个600*600的DIV,包括各种按钮和界面,画布右侧显示各种游戏即时数据。附上HTML代码:
<!-- 游戏设置画面 -->
<div class="layout layout2">
<center>
<h2>游戏设置</h2>
<h3>点击下方选项设置按键</h3><br>
<h3 class="keySet"> 向上 按键:<span id="UPKeySet"></span></h3>
<h3 class="keySet"> 向下 按键:<span id="DNKeySet"></span></h3>
<h3 class="keySet"> 向左 按键:<span id="LTKeySet"></span></h3>
<h3 class="keySet"> 向右 按键:<span id="RTKeySet"></span></h3>
<h3 class="keySet"> 低速 按键:<span id="LSKeySet"></span></h3>
<h3 class="keySet"> 还原默认按键</h3>
<h3>难易度调节</h3>
<span class="selectDiff" title="浅尝辄止的难度">简单</span><span class="selectDiff" title="代表大多数玩家的水平">正常</span><span class="selectDiff" title="难度越大,回报越高">疯狂</span>
<input type="hidden" id="difficult" value="正常">
</center>
<h1 class="returnMain btn-style">返回</h1>
</div>
<!-- 游戏说明 -->
<div class="layout layout3">
<center><h2>游戏说明</h2></center>
<p class="howToPlay">
1、默认<strong>Enter</strong>键开始,<strong>上下左右</strong>移动,<strong>shift</strong>低速移动,同时显示擦弹范围和判定点(见3、),您在下一个版本可以在“游戏设置”中修改游戏操作按键;<br />
2、为了将来该游戏系统的布局计划,现在已开启<strong>自动开火</strong>模式;<br />
3、擦弹范围是一个围绕着机体的<span class="gray">灰色的圈</span>,当圈内有子弹时分数会加得很快,判定点只有机体中间一个小<span class="wdot">白点</span>的范围,击中一次<span class="orange">生命值-10</span>(注意:碰到飞行物不会触发碰撞);<br />
4、今后还会推出更丰富的游戏系统,敬请期待;<br />
5、If it ran into any bug, REFRESH can solve 99% problems.(有任何问题,请使用刷新大法);<br>
6、good luck, have fun!
</p>
<img id="control" src="img/operate.png" />
<h1 class="returnMain btn-style">返回</h1>
</div>
<!-- 游戏主面板 -->
<section id="gameScreen">
<!-- 自机 -->
<div id="p_ship" class="player1">
<div id="laser"></div>
<div id="p_spot"></div>
</div>
</section>
<!-- 数据面板 -->
<aside>
<button id="startBtn" >开始游戏</button><br>
<button id="endTest" onclick="endGame()">结束游戏</button><br><br>
<p>生命值:<span id="hitCount">50</span></p><br>
<p>擦弹:<span id="zijiPos">0</span></p><br>
<p>分数:<span id="score">0</span></p><br><br>
<p>屏幕弹幕数 <span id="dmkcount">0</span></p>
<h4>HTML5弹幕射击游戏 ver1.8 作者:Kagashino</h4>
<p>图片素材均来自恶魔之星</p><br>
<p>历史版本 <br>
<!--逻辑初成-->
ver1.6.12.28 <br>
<!--优化代码结构-->
ver1.7.1.18 <br>
<!--优化界面布局,增加自定义按键,优化代码结构-->
ver1.7.2.28 <br>
<!--重做了弹幕生成算法-->
<!--新增自机狙、五角星和螺旋弹的算法-->
<!--1.8更新:把弹幕添加到了Boss中,整个游戏流程基本成型-->
</p><br><br>
</aside>
CSS设置
body{
margin: 0;
padding: 0;
z-index: -1000;
}
section,p,aside{
margin: 0;padding: 0;
display: inline-block;
vertical-align: top;
}
aside{
width: 30%;
}
.gray{
border: 2px dashed #666;
color:#666;
}
.orange{
color: #f51;
}
.wdot{
border: dashed 1px gray;
color: #eee;
}
#gameScreen{
width: 600px;
height: 600px;
background: #336 url(../img/bg.png);
position: relative;
/*overflow: hidden;*/
z-index: 1;
}
#laser{
position: absolute;
width: 15px;
height: 600px;
background: transparent;
border: 2px #fff solid;
border-bottom: none;
left: 35px;
top: -560px;
display: none;
}
#hitCount{
}
.btn-style{
padding: 5px;
position: absolute;
font-weight: normal;
border:3px solid white;
color:white;
z-index: 1000;
}
.btn-style:hover{
cursor: pointer;
font-weight: bold;
box-shadow: 0 0 15px 5px white;
}
.btn-style