首页> 基础笔记 >JS/JQ基础学习 >经典案例 经典案例
JavaScript实例：飞机大战
作者：小萝卜 2023-03-23 【 javascript 】 浏览 462
简介JavaScript实例：飞机大战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞机大战</title>
<style type="text/css">
#game{width:400px;height:450px;border:solid 1px #333;margin:0 auto;position:relative;overflow:hidden;
background:url(./images/bg_1.jpg);
background-position:0px 0px;
}
#me{width:106px;height:76px;position:absolute;left:0px;bottom:0px;}
.enemy{width:100px;height:70px;position:absolute;left:0px;top:0px;}
.b{width:20px;height:30px;background:url(./images/b.png);position:absolute;}
#boom{width:100px;height:70px;display:none;position:absolute;}
#start{width:120px;height:50px;color:white;position:absolute;background:orange;left:150px;top:200px;font-family:microsoft yahei;text-align:center;line-height:40px;cursor:pointer;}
#score{position:absolute;right:0px;top:0px;width:50px;height:20px;background:orange;
text-align:center;color:white;
}
#imgScore{width:200px;height:40px;border:solid 1px #333;}
.num{background:url(./images/num.png);height:32px;width:22px;background-position:0px 0px;float:left;}
</style>
</head>
<body>
<div id="game">
<div id="me"><img src="./images/me.png" alt=""></div>
<div id="start">开始游戏哦!!</div>
<div id="score">0</div>
</div>
<!-- 显示分数div -->
<div id="imgScore">
</div>
<div id="boom"><img src="./images/boom.gif" alt="" width="100%"></div>
<script type="text/javascript">
//获取元素
var game = document.getElementById('game');
var me = document.getElementById('me');
var step = 2;//飞机移动的步进
var inte = null;//定时器变量
var isVip = true;
var meSpeed = 100;
var enemyStep = 5;//敌机的移动步进
var bStep = 5;//子弹的移动步进
var bSpeed = 100;
var bY = 0;//背景的y轴位置
var isStart = false;//
var s = 0;//分数
//初始化函数
function init(){
//使自己的div水平居中
//获取大div的宽度
var bw = game.offsetWidth;
//获取小div的宽度
var xw = me.offsetWidth;
//计算中间的left属性
var newLeft = (bw-xw)/2;
//设置css样式
me.style.left = newLeft + 'px';
//如果是vip的话 自己飞机的移动事件间隔修改
if(isVip){
meSpeed = 10;
step = 10;
bStep = 10;
bSpeed = 10;
}
}
init();
//绑定键盘按下事件
window.onkeypress = function(e){
//检测游戏是否开始 如果没有开始 直接返回
if(!isStart) return ;
//获取当前的按键信息
var k = e.keyCode || e.charCode;
switch(k){
case 37:
moveLeft();
break;
case 38:
moveUp();
break;
case 39:
moveRight();
break;
case 40:
moveDown();
break;
case 32:
fire();
break;
}
}
//绑定键盘抬起事件
window.onkeyup = function(){
//清空定时器
clearInterval(inte);
inte = null;
}
//创建敌机函数
function createEnemy(){
// <!-- <div class="enemy"><img src="./images/e1.png" alt="" width="100%"></div> -->
//创建div元素
var d = document.createElement('div');
//添加class属性
d.className = "enemy";
//创建img标签
var img = document.createElement('img');
//设置属性
var r = rand(1,3);
img.setAttribute('src','./images/e'+r+'.png');
img.setAttribute('width','100%');
//计算敌机的最大值left
var maxLeft = game.offsetWidth - 100;
var newLeft = rand(0, maxLeft);
//设置敌机left属性
d.style.left = newLeft + 'px';
//将img插入div中
d.appendChild(img);
//将敌机div插入game div中
game.appendChild(d);
//启动定时器使敌机自动移动
var inte2 = setInterval(function(){
//获得当前新产生元素的top属性
var t = parseInt(getComputedStyle(d).top);
//计算新的top属性
var newTop = t + enemyStep;
//判断是否越界
if(newTop > game.offsetHeight){
//清空定时器
clearInterval(inte2);
inte2 = null;
//删除元素
game.removeChild(d);
}
//设置top样式
d.style.top = newTop + 'px';
},100);
}
//启动定时器 没过一段时间产生一个新的敌机
setInterval(function(){
if(!isStart) return;
createEnemy();
}, 2000);
setInterval(function(){
bY += 1;
game.style.backgroundPosition = "0px "+bY+"px";
},10)
//向左移动
function moveLeft(){
//判断定时器是否已经存在
if(inte != null) return;
//启动定时器 自动移动
inte = setInterval(function(){
//获取left属性 off
var css = getComputedStyle(me);
var l = parseInt(css.left);//获得left的尺寸
var newLeft = l - step;
//对left进行边界判断
if(newLeft < 0){
newLeft = 0;
}
//设定css样式
me.style.left = newLeft + 'px';
}, meSpeed);
}
//向上移动
function moveUp(){
}
//向右移动
function moveRight(){
//判断定时器是否已经存在
if(inte != null) return;
//启动定时器 自动移动
inte = setInterval(function(){
//获取left属性 off
var css = getComputedStyle(me);
var l = parseInt(css.left);//获得left的尺寸
var newLeft = l + step;
//对left进行边界判断
// 计算div最大的left值
var maxLeft = game.offsetWidth - me.offsetWidth - 2;
if(newLeft > maxLeft){
newLeft = maxLeft;
}
//设定css样式
me.style.left = newLeft + 'px';
}, meSpeed);
}
//向下移动
function moveDown(){
}
//发射子弹函数 <div class="b"></div>
function fire(){
//如果不是vip检测页面子弹的数量
if(!isVip){
//获取子弹div元素
var ds = document.getElementsByClassName('b');
//检测
if(ds.length >= 2){//超过两个 直接返回
return ;
}
}
//创建div子弹
var d = document.createElement('div');
//添加class属性
d.className = 'b';
//修改子弹的left和top
//计算子弹的left值
var l = me.offsetLeft + me.offsetWidth/2;
//计算top值
var t = game.offsetHeight - 76 - 20;
//设置子弹的left和top
d.style.left = l + 'px';
d.style.top = t + 'px';
//将子弹插入到game中
game.appendChild(d);
//启动定时器 使子弹自动移动
var inte3 = setInterval(function(){
//获取当前子弹的top属性
var t = parseInt(getComputedStyle(d).top);
//计算新的top值
var newTop = t - bStep;
//对新的top值进行检测
if(newTop < -20){//如果越界的话
clearInterval(inte3);
inte3 = null;
//删除子弹
game.removeChild(d);
}
//检测子弹是否打中飞机
var es = document.getElementsByClassName('enemy');
for(var i=0;i<es.length;i++){
//当前正在遍历的敌机左侧的偏移量
var minLeft = es[i].offsetLeft;
//获取最大的left
var maxLeft = es[i].offsetLeft + 100;
//获取当前敌机距离顶部的偏移量
var minTop = es[i].offsetTop;
var maxTop = es[i].offsetTop + 70;
//如果满足条件证明打中了飞机
if(d.offsetLeft >= minLeft && d.offsetLeft <= maxLeft && d.offsetTop >= minTop && d.offsetTop <= maxTop){
//加分
showScore(++s);
//删除子弹元素
game.removeChild(d);
//清空定时器
clearInterval(inte3);
inte3 = null;
//克隆元素
var newBoom = document.getElementById('boom').cloneNode(true);
//设置元素显示
newBoom.style.display = "block";
//设置当前爆炸元素的left和top
newBoom.style.left = minLeft + 'px';
newBoom.style.top = minTop + 'px';
//执行替换
game.replaceChild(newBoom, es[i]);
//过一段时间之后 执行删除操作
setTimeout(function(){
game.removeChild(newBoom);
}, 300);
}
}
//设置新的top值
d.style.top = newTop + 'px';
}, bSpeed);
}
//给开始按钮绑定单击事件
document.getElementById('start').onclick = function(){
//修改全局变量
isStart = true;
//
this.style.display = "none";
}
//显示当前的分数
function showScore(num){
//清空imgScore div
document.getElementById('imgScore').innerHTML = "";
// document.getElementById('score').innerHTML = num;
//用图片显示单个数字 5 => -110 2 => -44 n=>-22*(n)
// var left = -22*num;
//设置背景的位置
// document.getElementsByClassName('num')[0].style.backgroundPosition = left+"px 0px";
//获取数字的长度 根据长度来创建div数字元素 imgScore
var str = String(num);
for(var i=0;i<str.length;i++){
var d = document.createElement('div');
//添加class属性
d.className = 'num';
//修改当前元素的background-position
var ch = str.charAt(i);
//计算新的背景位置的属性
var newLeft = -22*(ch);
d.style.backgroundPosition = newLeft+"px 0px";
//执行插入操作
document.getElementById('imgScore').appendChild(d);
}
}
// showScore(25000);
//获取随机数的函数封装他
function rand(m,n){
return Math.ceil(Math.random()*(n-m+1))+m-1;
}
</script>
</body>
</html>
很赞哦！ (0)
