javascript实现简单飞机大战小游戏
本文实例为大家分享了javascript实现飞机大战小游戏的具体代码，供大家参考，具体内容如下
效果图
html文件
<!DOCTYPE html>
<html lang='zh'>
<head>
<meta charset='UTF-8'>
<title>mm</title>
<link rel="stylesheet" href="./css/index.css">
<style>
*{
margin:0;
padding:0;
list-style:none;
user-select:none;
}
</style>
</head>
<body>
<div class="wrap">
<!-- 游戏等级 -->
<div id="level">
<h1>飞机大战 Lv1</h1>
<p>简答模式</p>
<p>一般模式</p>
<p>困难模式</p>
<p>地狱模式</p>
</div>
<!-- 游戏界面 -->
<div id="map">
<!-- 我军飞机 -->
<!-- 敌军飞机1 -->
<!-- 敌军飞机2 -->
<div class="allFire">
<!-- 我军子弹 -->
</div>
</div>
<!-- 游戏得分 -->
<div id="score">0</div>
<!-- 结束游戏的界面 -->
<div id="settlement">
<div>最终得分:<span class="totalscore">10</span></div>
<div>获得评价:<span class="appraise">青铜</span></div>
<button>重新开始</button>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
css文件
.wrap{
position:relative;
width: 400px;
height: 600px;
margin:10px auto;
overflow:hidden;
}
/* 游戏等级 */
#level{
position:absolute;
top:0;
left:0;
z-index:1;
width:100%;
height:100%;
font-family:"楷体";
background:url(../img/bg_1.jpg)repeat 0/cover;
}
#level h1{
width:100%;
color:#fff;
text-align:center;
padding:100px 0;
}
#level p{
text-align:center;
padding:10px 20px;
letter-spacing:5px;
font-weight:bold;
background-color:#fff;
margin:30px 120px;
border-radius:5px;
box-shadow:1px 1px 10px 1px #aaa;
}
#level p:hover{
cursor:pointer;
background-color:#4D6BA2;
color:#fff;
}
/* 游戏界面 */
#map{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../img/bg_2.jpg)repeat 0/cover;
}
#map .plane,/*我军飞机*/
.enemy,/*敌军飞机*/
.boom,/*敌军飞机爆炸*/
.boom2,/*我军飞机爆炸*/
.fire{/*我军飞机子弹*/
position:absolute;
}
#map .plane,.enemy{
z-index:5;
}
#map .boom{
z-index:6;
animation : enemyDisappear 0.8s 1;
animation-fill-mode : forwards;/*显示最后一个关键帧*/
}
#map .boom2{
z-index:6;
animation : planeDisappear 2s 1;
animation-fill-mode : forwards;
}
#map .fire{
z-index:7;
}
/* 敌军消失的动画 */
@keyframes enemyDisappear {
from { opacity : 1; }
to{ opacity : 0; }
}
/* 我军消失的动画 */
@keyframes planeDisappear {
0% { opacity : 1; }
20%{ opacity : 0; }
40%{ opacity : 1; }
60%{ opacity : 0; }
80%{ opacity : 1; }
100%{ opacity : 0; }
}
/* 游戏得分 */
#score{
display:none;
position:absolute;
top:0;
left:0;
z-index:10;
padding:10px 20px;
color:#fff;
}
/* 结束游戏的界面 */
#settlement{
display:none;
position:absolute;
top:30%;
left:0;
z-index:100;
width:100%;
height:35%;
font-family:"楷体";
}
#settlement div{
margin:20px 0;
text-align:center;
font-size:20px;
color:#fff;
}
#settlement div span{
font-size:24px;
}
#settlement div .totalscore{
color:red;
}
#settlement div .appraise{
color:green;
}
#settlement button{
margin:30px 34% 0;
padding:10px 20px;
background-color:rgba(255,255,255,.8);
letter-spacing : 2px;
border:none;
font-family:"楷体";
font-size:20px;
font-weight:bold;
border-radius:5px;
}
#settlement button:hover{
cursor:pointer;
background-color:rgba(255,255,255,1);
}
js文件
let oWrap = document.querySelector(".wrap"),
oLevel = document.getElementById("level"),//游戏等级盒子
oLevelList = document.querySelectorAll("#level p"),//游戏等级
oMap = document.getElementById("map"),//游戏界面
oAllFire = document.querySelector(".allFire"),//子弹盒子
oScore = document.getElementById("score"),//游戏得分
oSettlement = document.getElementById("settlement"),//结算界面
oButton = oSettlement.querySelector("button");//重新开始
for(let i=0; i<oLevelList.length; i++){
oLevelList[i].onclick = function(e){
startGame(i,
{
x : e.clientX - oWrap.offsetLeft,//获取鼠标到游戏界面的位置
y : e.clientY - oWrap.offsetTop
}
)
};
}
//重新开始
oButton.onclick = function aginGame(){
//背景图停止移动
cancelAnimationFrame(oWrap.timer);
//隐藏得分界面
oSettlement.style.display = "none";
//显示等级
oLevel.style.display = "block";
//分数清0
oScore.innerHTML = 0;
//
oMap.innerHTML = `<div id="allFire"></div>`;
oAllFire = document.getElementById("allFire");
}
//开始游戏
function startGame(level,pos){
hiddenShow();
bgImgMove(level);
let myPlane = createPlane(level,pos);
createEnemy(level,myPlane);
oWrap.score = 0;
}
//点击游戏等级的消失与隐藏
function hiddenShow(){
oLevel.style.display = "none";
oMap.style.display = "block";
oScore.style.display = "block";
}
//背景图移动
function bgImgMove(level){
oMap.style.backgroundImage = `url(./img/bg_${level+1}.jpg)`;
let bgMove = 0;
(function bgMoveTimer(){
bgMove++;
oMap.style.backgroundPositionY = bgMove + "px";
oWrap.timer = requestAnimationFrame(bgMoveTimer);
})();
}
//我军飞机飞机
function createPlane(level,pos){
//创建我军飞机
let oImgPlane = new Image();
oImgPlane.src = "./img/plane_0.png";
oImgPlane.width = 70;
oImgPlane.height = 70;
oImgPlane.className = "plane";
oImgPlane.style.left = pos.x - oImgPlane.width / 2 + "px";
oImgPlane.style.top = pos.y - oImgPlane.height / 2 + "px";
oMap.appendChild(oImgPlane);
//鼠标移动是飞机不断获取鼠标位置
let minLeft = -oImgPlane.width/2,
minTop = 0,
maxLeft = oMap.clientWidth - oImgPlane.width/2,
maxTop = oMap.clientHeight - oImgPlane.height/2;
document.onmousemove = function(e){
let left = e.clientX - oWrap.offsetLeft - oImgPlane.width / 2,
top = e.clientY - oWrap.offsetTop - oImgPlane.height / 2;
left = Math.min(left,maxLeft);
left = Math.max(left,minLeft);
top = Math.min(top,maxTop);
top = Math.max(top,minTop);
oImgPlane.style.left = left + "px";
oImgPlane.style.top = top + "px";
}
fire(level,oImgPlane)
return oImgPlane;
}
//子弹
function fire(level,oImgPlane){
//创建子弹
function createFires(isDouble,n){
let createFire = new Image();
createFire.src = "./img/fire.png";
createFire.width = 30;
createFire.height = 30;
createFire.className = "fire"
let left = oImgPlane.offsetLeft + oImgPlane.width/2 - createFire.width/2 ,
top = oImgPlane.offsetTop - oImgPlane.height/2;
if(isDouble){
left = left + oImgPlane.width/3*n;
}
createFire.style.left = left + "px";
createFire.style.top = top + "px";
oAllFire.appendChild(createFire);
// 子弹运动
function fireMove(){
if(createFire.parentNode){
top -= 10;
if(top< -createFire.height){
oAllFire.removeChild(createFire);
}else{
createFire.style.top = top + "px";
requestAnimationFrame(fireMove);
}
}
}
setTimeout(()=>{
requestAnimationFrame(fireMove);
},20);
}
//定时生成子弹的频率
oWrap.fireTimer = setInterval(()=>{
if(oWrap.score>=100){
createFires(true,-1);
createFires(true,+1);
}else{
createFires();
}
},[200,150,100,50][level])
}
//创建敌军
let enemyNum = 1;
function createEnemy(level,myPlane){
let speed = [4,6,8,10][level];//游戏模式相对应的的等级飞机下落的速度
MapW = oMap.clientWidth,
MapH = oMap.clientHeight;
oWrap.enemyTimer = setInterval(()=>{
let createEnemy = new Image();
createEnemy.index = enemyNum%20 ? 1:0;
createEnemy.src = `./img/enemy_${["big","small"][createEnemy.index]}.png`;
createEnemy.width = [100,50][createEnemy.index];
createEnemy.height = [100,50][createEnemy.index];
//敌军的血量
createEnemy.hp = [4,1][createEnemy.index];
createEnemy.className = "enemy";
//敌军首次出现的位置
let enemyTop = -createEnemy.height;
createEnemy.style.top = enemyTop + "px";
createEnemy.style.left = Math.random()*MapW - createEnemy.width/2 + "px";
oMap.appendChild(createEnemy);
enemyNum++;
console.log(createEnemy.offsetLeft,createEnemy.offsetTop)
//判断敌军的下落运动
function enemyMove(){
if(createEnemy.parentNode){
enemyTop += speed;
if(enemyTop>=MapH){
oMap.removeChild(createEnemy);
}else{
createEnemy.style.top = enemyTop + "px";
//子弹与敌军发生碰撞
let arrAllFire = oAllFire.children;
for(let i=arrAllFire.length-1; i>=0; i--){
let newFire = arrAllFire[i];
if(isCollide(newFire,createEnemy)){
//撞上的 移出子弹
oAllFire.removeChild(newFire)
//血量减一
createEnemy.hp--;
if(createEnemy.hp === 0){
oWrap.score += [5,1][createEnemy.index];
oScore.innerText = oWrap.score;
//敌军发生爆炸
boom({
x : createEnemy.offsetLeft,
y : createEnemy.offsetTop,
w : createEnemy.width,
h : createEnemy.height,
i : createEnemy.index
});
oMap.removeChild(createEnemy);
return;
}
}
}
//我军与敌军发生碰撞
if(myPlane.parentNode&&isCollide(createEnemy,myPlane)){
//敌军产生爆炸
boom({
x:createEnemy.offsetLeft,
y:createEnemy.offsetTop,
w:createEnemy.width,
h:createEnemy.height,
i:createEnemy.index
});
//我军发生爆炸
boom({
x:myPlane.offsetLeft,
y:myPlane.offsetTop,
w:myPlane.width,
h:myPlane.height,
i:2
});
oMap.removeChild(createEnemy);
oMap.removeChild(myPlane)
//游戏结束
gameOver();
return;
}
requestAnimationFrame(enemyMove);
}
}
}
requestAnimationFrame(enemyMove);
},[400,350,300,200][level])
}
//是否发生碰撞
function isCollide(newFirePlane,createEnemy){
//子弹/我军飞机的位置
let fireTop = newFirePlane.offsetTop,
fireLeft = newFirePlane.offsetLeft,
fireBottom = fireTop + newFirePlane.clientHeight,
fireRight = fireLeft + newFirePlane.clientWidth;
//飞机的位置
let createEnemyTop = createEnemy.offsetTop,
createEnemyLeft = createEnemy.offsetLeft,
createEnemyRight = createEnemyLeft+createEnemy.clientWidth,
createEnemyBotoom = createEnemyTop+createEnemy.clientHeight;
//没碰上的四种结果
return !(fireTop>createEnemyBotoom || fireBottom<createEnemyTop || fireLeft>createEnemyRight || fireRight<createEnemyLeft)
}
//发生爆炸
function boom(data){
let createBoom = new Image();
createBoom.src = `./img/${["boom_big","boom_small","plane_0"][data.i]}.png`;
createBoom.className = "boom" + ["","","2"][data.i];
createBoom.width = data.w;
createBoom.height = data.h;
createBoom.style.top = data.y + "px";
createBoom.style.left = data.x + "px";
oMap.appendChild(createBoom);
setTimeout(()=>{
createBoom.parentNode&&oMap.removeChild(createBoom);
},[1200,1200,2500][data.i])
}
//游戏结束
function gameOver(){
clearInterval(oWrap.enemyTimer);
clearInterval(oWrap.fireTimer);
document.onmousemove = null;
gameSettlement();
}
//结算游戏
function gameSettlement(){
let oTotalscore = oSettlement.querySelector(".totalscore"),
oAppraise = oSettlement.querySelector(".appraise");
if(oWrap.score < 50){
oAppraise.innerHTML = "青铜";
}else if(oWrap.score <100){
oAppraise.innerHTML = "黄金";
}else if(oWrap.score <200){
oAppraise.innerHTML = "钻石";
}else{
oAppraise.innerHTML = "王者";
}
oTotalscore.innerHTML = oWrap.score;
oScore.style.display = "none";
oSettlement.style.display = "block";
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现飞机大战小游戏
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/
-
javascript实现飞机大战小游戏
本文实例为大家分享了javascript实现飞机大战游戏的具体代码,供大家参考,具体内容如下 文档结构如下 其中tool文件中只使用了随机数,audio中是存放的音乐文件,images中是己方和敌方飞机的图片. HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
-
js实现飞机大战游戏
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo
-
用JS实现飞机大战小游戏
本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 小的时候玩的飞机大战感觉还蛮神奇,今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running =
-
JS面向对象实现飞机大战
本文实例为大家分享了JS面向对象实现飞机大战的具体代码,供大家参考,具体内容如下 主页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; ma
-
JavaScript原生编写《飞机大战坦克》游戏完整实例
先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r
-
原生JS实现飞机大战小游戏
本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 <html> <head> <title> 飞机大战 </title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft yahei"} body{overflow:hidden;;} </style> </head>
-
JavaScript实现飞机大战游戏
本文实例为大家分享了canvas ,js 实现一个简单的飞机大战,供大家参考,具体内容如下 预览图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
-
javascript实现简单飞机大战小游戏
本文实例为大家分享了javascript实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 效果图 html文件 <!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8'> <title>mm</title> <link rel="stylesheet" href="./css/index.css">
-
JavaScript实现前端飞机大战小游戏
本文实例为大家分享了JavaScript实现前端飞机大战的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>飞机大战</title> <link rel="stylesheet" type="text/c
-
python实现简单飞机大战小游戏
为了熟悉Python基础语法,学习了一个经典的案例:飞机大战,最后实现效果如下: 实现步骤: ①下载64位对应python版本的pygame:pygame-1.9.6-cp38-cp38-win_amd64.whl ② 更新pip:python -m pip install --upgrade pip ③ 安装pygame:pip install pygame-1.9.6-cp38-cp38-win_amd64.whl ④ 实现代码如下: import sys # 导入系统模块 import
-
C语言实现飞机大战小游戏完整代码
大一课设做的飞机大战,可以进行登入和注册,这个是利用单链表做的,源代码已经给出,这个是最基本的飞机大战模式,我设置了几个功能,比如排行榜之类的.排行榜是用结构体数组做的,已及冒泡排序,并且在文件里保存信息.比较简单. 这个是注册页面规范: 这个是登入页面: 游戏菜单: 飞机大战页面: 话不多说,直接上代码 以下是源代码 #include"stdio.h" #include"windows.h" //用于获取窗口的句柄与屏幕控制 #include"co
-
C++基于EasyX框架实现飞机大战小游戏
正式使用Easyx之前,你需要先安装他!! EasyX 2022 版 (2022-9-1 更新) - EasyX 选择合适的版本安装 安装结束后就可以开始敲代码啦! 这里作者使用的是Visual Studio 2022所以安装EasyX_20220901版本 启动Visual Studio 2022,新建一个空项目 这是工程目录: 首先来看看Bullet(子弹)类 头文件: #pragma once class Bullet { public: Bullet(int x, int y, int
-
java实战之飞机大战小游戏(源码加注释)
一.工程文件 二.Main.java 主函数,实现类 package ui; //主函数实现 public class Main { public static void main(String[] args) { //创建窗体 GameFrame frame = new GameFrame(); //创建面板 GamePanel panel = new GamePanel(frame); //调用开始游戏的方法启动游戏 panel.action(); //将面板加入到窗体中 frame.add
-
基于Java语言在窗体上实现飞机大战小游戏的完整步骤
目录 小组项目 模块需求描述 总体开发思想 功能实现 1.登录与结束界面 2.播放音乐 3.子弹 运行测试 登陆界面 发射子弹 总结 小组项目 飞机大战:用 Java 语言在窗体上实现飞机大战小游戏,运行程序后,出现一个窗体,在窗体上用鼠标控制英雄机的移动,通过子弹打击敌机进行分数的计算,以及英雄机血量的计算等. 主要模块:登陆界面.音乐.子弹.敌机.英雄机.背景图.结束界面.BOSS 机.分数计算.血量计算. 负责模块:登陆界面.音乐.子弹.结束界面. 模块需求描述 登陆界面:运行程序后,弹出
-
Vue实现飞机大战小游戏
目录 使用 Vue 开发一个简略版的飞机大战小游戏 一.实现思路 二.所需知识点 三.实现步骤 使用 Vue 开发一个简略版的飞机大战小游戏 如题,假设你为了向更多访问你博客的人展示你的技术,你决定小试身手开发一个飞机大战小游戏.功能: 开始游戏前用户名必填,玩家可以发射子弹,敌军与行星随机出现,鼠标可操控玩家移动,敌军可发射子弹 一.实现思路 如题所述: 玩家可操控玩家飞机可发射子弹,敌军与行星随机生成: 这意味着我们需要一个单独的玩家飞机dom,以及敌军.行星与子弹 用 vue 循环生成的3