JavaScript原生编写《飞机大战坦克》游戏完整实例
93 浏览量
2020-10-20
17:13:09
上传
评论
收藏 62KB PDF 举报
JavaScript原生编写《飞机大战坦克》游戏完整实例原生编写《飞机大战坦克》游戏完整实例
飞机大战坦克是一款小游戏，相信很多朋友都有玩过，由于最近在深入学习Javascript，所以想着用利用
Javascript来实现这个游戏，下面这篇文章主要介绍了如何利用JavaScript原生编写《飞机大战坦克》游戏,需要
的朋友可以参考下
先来看看开始的界面图先来看看开始的界面图
实现思路：实现思路：
1.打开页面，背景开始走动；
2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；
3.当敌人碰到子弹，敌人消失；
4.当敌人和飞机相遇，飞机死亡，结束游戏；
html页面页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞机大战</title>
<link rel="stylesheet" type="text/css" href="飞机大战.css">
</head>
<body>
<div id="mainScreen">
<!-- 背景图片 -->
<div id="bgImg1" class="bg"></div>
<div id="bgImg2" class="bg"></div>
<!-- 飞机 -->
<div id="airplane"></div>
<!-- 开始按钮 -->
<div id="startMenu">
<a href="#" id="start">Start</a>
</div>
<!-- 重新开始按钮 -->
<div id="restartMenu">
<a href="#" id="restart">Game Over!<br/>重新开始</a>
</div>
<!-- 敌人 -->
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<!-- 子弹 -->
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet"></div>
</div>
<script type="text/javascript" src="sunckBase.js"></script>
<script type="text/javascript" src="飞机大战.js"></script>
</body>
</html>
css样式样式
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
#mainScreen{
width: 512px;
height: 768px;
评论0
最新资源