一个打蜜蜂的小游戏demo的代码

本文主要是介绍一个打蜜蜂的小游戏demo的代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图片： fj.png mf1.png mf2.png mf3.png

前沿介绍：

this.map.offsetWidth 代表地图本身的宽度
this.oUl.offsetWidth 代表蜜蜂ul的宽度
this.oUl.style.left 代表小蜜蜂距离左边的位置
this.oA.style.left = (this.map.offsetWidth - this.oA.offsetWidth)/2 + 'px'; //自己飞机距离左边的位置
this.oA.style.top = this.map.offsetHeight - this.oA.offsetHeight + 'px'; //自己飞机距离上边的位置
var oLi = document.createElement('li'); 创建一个li节点信息并保存在 oLi变量中（代表每一个小蜜蜂）
var oB = document.createElement('div'); 创建一个div节点信息，代表子弹的变量
oB.style.left = this.oA.offsetLeft + this.oA.offsetWidth/2 + 'px'; 子弹左边的距离
oB.style.top = this.oA.offsetTop + 'px'; 子弹的高度
this.oA = document.createElement('div'); 创建一个div节点信息，代表自己战机的div
var e = evt || window.event; 判断是ie浏览器还是其他浏览器
//如果是空格将发射子弹
if(e.keyCode==32){
This.createBullet();
}

//转换蜜蜂的布局，将浮动转换成定位
击中蜜蜂之后，会删除最后那一个，因为蜜蜂（li标签）是浮动布局，删除某一个之后后面的元素会补充上来，所以我们需要将浮动布局转换成定位布局
for (var i = 0; i < this.oLi.length; i++) {
this.oLi[i].style.left = this.oLi[i].offsetLeft + 'px';
this.oLi[i].style.top = this.oLi[i].offsetTop + 'px';
}
for (var i = 0; i < this.oLi.length; i++) {
this.oLi[i].style.position = 'absolute'
}
//掉下一个蜜蜂
// X代表横坐标移动的距离
// Y代表纵坐标移动的高度
// X轴的速度 = X轴移动的距离/总共移动的距离)*合成的速度
// Y轴的速度 = Y轴移动的距离/总共移动的距离)*合成的速度

var nowLi = this.oLi[Math.round(Math.random()*this.oLi.length)];//随机出现一个蜜蜂。
window.location.reload(); //刷新页面

以下是代码**********************************************************************************打蜜蜂********************************************************************************

<html>

<head>
<meta charset="utf-8">
<title>打蜜蜂demo</title>
<style type="text/css">
body,div,ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#map{
width: 800px;
height: 600px;
background: #000;
margin: 20px auto 0px;
position: relative;
}
#btn{
position: absolute;
left: 350px;
top: 285px;
color: #fff;
border: 1px solid #fff;
padding: 10px;
cursor: pointer;
font-size: 20px;
}
.score{
color: white;
}
.enemy{

position: absolute;
}
.enemy1{
float: left;
width: 40px;
height: 28px;
background: url(images/mf1.png) no-repeat;

}
.enemy2{
float: left;
width: 40px;
height: 28px;
background: url(images/mf2.png) no-repeat;

}
.enemy3{
float: left;
width: 40px;
height: 28px;
background: url(images/mf3.png) no-repeat;

}
.air{
width: 46px;
height: 60px;
background: url(images/fj.png) no-repeat;
position: absolute;

}
.bullet{width:1px;height: 10px;background: #fff;position: absolute;

}
</style>
</head>
<body>
<div id="map">
<div id="btn">开始游戏</div>
</div>

<script type="text/javascript">
var btn =document.getElementById('btn');
btn.onclick = function(){
btn.style.display="none";
//start游戏
Game.init(); //初始化游戏内部结构
}

//用面向对象来实现功能
//采用面向对象来实现该游戏
var Game = {
//属性：描述物体的一些特征
enemy:{
e1:{style:'enemy1',blood:1,score:1,speed:5},
e2:{style:'enemy2',blood:2,score:2,speed:7},
e3:{style:'enemy3',blood:3,score:3,speed:10}
},
air:{
style:'air',
bulletStyle:'bullet'
},
gk:[
{
eMap:[
'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
],
colNum:10, //每一列的数量
speedX:5,
speedY:10,
times:2000
},
{
eMap:[
'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
],
colNum:12,
speedX:10,
speedY:10,
times:1000
},
],
//初始化的操作
init:function(){
//获取地图的节点信息
this.map = document.getElementById('map');
//绘制积分
this.createScore();
//绘制蜜蜂
this.createEnemy(0);//默认创建第一关的蜜蜂
//绘制战机
this.createAir();
},
//创建积分
createScore:function(){
var score = document.createElement('div');
score.className = 'score';//设置class样式
score.innerHTML = '积分：<span>0</span>分';
this.oScore = score.getElementsByTagName('span')[0];
this.map.appendChild(score);
},
//创建敌人蜜蜂
createEnemy:function(g){
//创建ul的节点信息
this.oUl = document.createElement('ul');
//给他一个name属性（好将来设置样式）
this.oUl.className = 'enemy';
this.oUl.style.width = this.gk[g].colNum * 40 + 'px';
//地图追加ul为子元素
this.map.appendChild(this.oUl);
this.oUl.style.left = (this.map.offsetWidth - this.oUl.offsetWidth)/2+'px';
//开始创建li标签，每个li标签代表一只小蜜蜂
for(var i=0;i<this.gk[g].eMap.length;i++){
var oLi = document.createElement('li');
oLi.className = this.enemy[this.gk[g].eMap[i]].style;//e1 e1 e1 e2.
oLi.blood = this.enemy[this.gk[g].eMap[i]].blood;//e1 e1 e1 e2....
oLi.score = this.enemy[this.gk[g].eMap[i]].score;//e1 e1 e1 e2....
oLi.speed = this.enemy[this.gk[g].eMap[i]].speed;//e1 e1 e1 e2....
this.oUl.appendChild(oLi);
}

this.oLi = this.oUl.getElementsByTagName('li');
//转换蜜蜂的布局，将浮动转换成定位
for (var i = 0; i < this.oLi.length; i++) {
this.oLi[i].style.left = this.oLi[i].offsetLeft + 'px';
this.oLi[i].style.top = this.oLi[i].offsetTop + 'px';
}
for (var i = 0; i < this.oLi.length; i++) {
this.oLi[i].style.position = 'absolute'
}
//蜜蜂创建完就开始移动
this.runEnemy(this.gk[g]);
},
//让蜜蜂移动
runEnemy:function(gk){
var This = this;
var L = 0;
var R = this.map.offsetWidth - this.oUl.offsetWidth -5;
window.setInterval(function(){
if(This.oUl.offsetLeft<=0){
gk.speedX *= -1;
This.oUl.style.top = This.oUl.offsetTop + gk.speedY +'px';
}else if(This.oUl.offsetLeft>R){
gk.speedX *= -1;
This.oUl.style.top = This.oUl.offsetTop + gk.speedY +'px';
}
//定时器里面的this代表的当前对象,指的就是window对象
This.oUl.style.left = This.oUl.offsetLeft + gk.speedX + 'px';
//document.title = This.oUl.offsetLeft;
}, 100)
//每隔30毫秒让它出现一个蜜蜂来攻击我们
setInterval(function(){
This.oneMove();//每隔2秒就派一个蜜蜂来攻击
}, gk.times)
},
//掉下一个蜜蜂
// X代表横坐标移动的距离
// Y代表纵坐标移动的高度
// X轴的速度 = X轴移动的距离/总共移动的距离)*合成的速度
// Y轴的速度 = Y轴移动的距离/总共移动的距离)*合成的速度
oneMove:function(){
var nowLi = this.oLi[Math.round(Math.random()*this.oLi.length)];
var This = this;
clearInterval(nowLi.timer)
nowLi.timer = setInterval(function(){
var X = This.oA.offsetLeft - nowLi.offsetLeft - nowLi.parentNode.offsetLeft;
var Y = This.oA.offsetTop - nowLi.offsetTop - nowLi.parentNode.offsetTop;
var C = Math.sqrt(X*X + Y*Y);
var HSpeed = nowLi.speed;
var xspeed = HSpeed * (X/C);
var yspeed = HSpeed * (Y/C);
nowLi.style.left = nowLi.offsetLeft + xspeed +'px';
nowLi.style.top = nowLi.offsetTop + yspeed +'px';
if(X<=0 && Y<=0){
alert(' 你太菜了...游戏结束');
window.location.reload();//刷新页面
}
}, 50)
},
//创建自己的战机
createAir:function(){
this.oA = document.createElement('div');
this.oA.className = this.air.style;
this.map.appendChild(this.oA);
this.oA.style.left = (this.map.offsetWidth - this.oA.offsetWidth)/2 + 'px';
this.oA.style.top = this.map.offsetHeight - this.oA.offsetHeight + 'px';
//创建战机之后就绑定事件
this.bindEvent();
},
bindEvent:function(){
var This = this;
var timer = null;
document.onkeydown = function(evt){
//移动战机
var e = evt || window.event;
//alert(e.keyCode)
if(e.keyCode==37){
if(!timer){ //timer不存在的时候，则创建定时器
timer = setInterval(function(){
This.oA.style.left = This.oA.offsetLeft - 10 + 'px';
}, 30) //向左
}
}else if(e.keyCode==39){
if(!timer){
timer = setInterval(function(){
This.oA.style.left = This.oA.offsetLeft + 10 + 'px';
}, 30) //向右
}
}
}
document.onkeyup = function(evt){
//发射子弹
var e = evt || window.event;
//alert(e.keyCode)
clearInterval(timer);
timer = null;
if(e.keyCode==32){
This.createBullet();
}
}
},
createBullet:function(){
var oB = document.createElement('div');
oB.className = this.air.bulletStyle;
this.map.appendChild(oB);
oB.style.left = this.oA.offsetLeft + this.oA.offsetWidth/2 + 'px';
oB.style.top = this.oA.offsetTop + 'px';
//开始移动
this.runBullet(oB);//让刚刚创建的这颗子弹移动
},
runBullet:function(oB){
var This = this;
clearInterval(oB.timer);
oB.timer = setInterval(function(){
if(oB.offsetop<-10){
clearInterval(oB.timer);
This.map.removeChild(oB);
}else{
oB.style.top = oB.offsetTop - 10 +'px';
}
//判断这颗子弹是否击中蜜蜂
for(var i=0;i<This.oLi.length;i++){
var BL = oB.offsetLeft;
var LIL = This.oLi[i].offsetLeft + This.oUl.offsetLeft;
var LIR = This.oLi[i].offsetLeft+This.oLi[i].offsetWidth+This.oUl.offsetLeft;
var BT = oB.offsetTop;
var LIT = This.oLi[i].offsetTop + This.oUl.offsetTop;
var LITT = This.oLi[i].offsetTop+This.oLi[i].offsetHeight+This.oUl.offsetTop;
if(
BL > LIL &&
BL< LIR &&
BT > LIT &&
BT< LITT){
//alert('hello')
//删除子弹
This.map.removeChild(oB);
clearInterval(oB.timer);
//删除蜜蜂
if(This.oLi[i].blood==1){
//删除蜜蜂之前获得该蜜蜂的积分
This.oScore.innerHTML = parseInt(This.oScore.innerHTML) + This.oLi[i].score;
This.oUl.removeChild(This.oLi[i]);
}else{
This.oLi[i].blood--;
}
}
}
}, 30)
}
}

</script>

</body>
</html>