您的位置:首页 > 编程语言

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

2016-01-05 17:20 591 查看
图片:

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: