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

最新推荐文章于 2022-05-21 17:14:05 发布
最新推荐文章于 2022-05-21 17:14:05 发布
阅读量1k 收藏
点赞数
分类专栏： 前端Javascript相关操作说明 文章标签： javascript 游戏 面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gujinapenggu5/article/details/50464004
版权

图片： 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>
午夜玫瑰钻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java 小蜜蜂游戏源码 非Android.rar
07-10
我用Java编写的小蜜蜂游戏，包括了游戏功能和图形界面，解压后在myEclipse里直接import运行即可。 　　注意这个游戏不是Android游戏，不能在Android手机里运行，请不要混淆哦。
一个小蜜蜂游戏的源代码
03-09 2592
看了书后有一个贪吃蛇，突然觉得自己也可以写这类代码。但是用system("cls")会导致各种闪屏，所以用了gotoxy()函数。在编写过程中，我明白了框架清晰的重要性。 #include #include #include #include #define Weigh 75 #define Heigh 25 #define BeeLine 3 #define BulletMaxAmo
打蜜蜂游戏(cocos-2d-js)游戏体会
abc882715的博客
05-03 418
游戏简介:这款小游戏是一款简单的打砖块游戏翻版.游戏要求:1.拥有一个炮塔可以生成子弹,炮塔随着鼠标点击的位置发生改变,子弹跟随炮塔的发射而改变其位置,子弹撞到上左右三面墙进行反弹,2.子弹撞到砖块拥有一个简单的爆炸效果3.不准使用物理引擎心得体会:1.如何使用cocos-2d-js制作帧动画. // var sp = new cc.Sprite(); // sp.setTag(1...
定时器函数的应用setInterval（）
FateInTheSky的博客
09-19 463
setInterval（function(){},time） 该函数表示每个time的时间就执行function(){} 下列列子是在js里面实现一个div自动运动 var div=document.createElement(‘div’); //创建一个div document.body.appendChild(div); //往body添加div div.style.width=“10...
教你用Python实现经典游戏《小蜜蜂》
Greenfoot专栏
05-21 928
估计很多老玩家在小时候都玩过Galaxian（小蜜蜂）吧。这款射击游戏的鼻祖叫《太空侵略者》，上手简单，但可玩性很强。 《太空侵略者》大火之后，新推出的Galaxian（小蜜蜂）于1979年成为其最大竞争对手。由Namco发行的Galaxian为外星敌人提供了新的色彩和不可预测的动作，后者不但会发射炮弹，还会自杀式俯冲攻击。 《Galaxian》在街机游戏中大受欢迎，以至于Namco在两年后又发布了续作《Galaga》——这款游戏使攻击模式更加复杂。 很难说《Galaxian》究竟有多少移植和克隆
DELPHI7打蜜蜂游戏源代码
最新发布
10-13
DELPHI7打蜜蜂游戏源代码，D7下运行没毛病
一个简易的打蜜蜂小游戏
01-09
突然想起了童年玩的打蜜蜂的小游戏，就手痒写了一个，使用VB.NET写的，我觉得挺适合初学者的，游戏比较简单，有些部分我加了注释，供大家参考。
小蜜蜂手机游戏J2ME版代码
03-16
内容索引:JAVA源码,游戏娱乐,小蜜蜂,J2ME游戏,手机游戏　这是一个模仿小蜜蜂游戏的J2ME手机版源代码，内含的导出包可以直接导入手机运行。可以研究一下哦！
nes模拟器和小蜜蜂小游戏
05-08
nes模拟器和小蜜蜂小游戏nes模拟器和小蜜蜂小游戏nes模拟器和小蜜蜂小游戏
小蜜蜂代码
EKKO123456的博客
04-22 1489
# # -*- coding:utf-8 -*- # import cv2 # import numpy as np # image = cv2.imread(r"C:\Users\Administrator.PC-20190818MAZV\Desktop\05\353.jpg") # -*- coding:utf-8 -*- """ Author: alan Email: wst.521@1...
小游戏 打蜜蜂javascript源码
12-22
小游戏 打蜜蜂javascript源码，入门程序
Java小蜜蜂游戏源代码
12-28
模仿红白机上面的小蜜蜂游戏，初学者可以看看
用python写的“小蜜蜂”游戏
10-10
“小蜜蜂”这个游戏相信我们小时候都玩过，这次用python写了这个小游戏，可以运行，功能完好，可以随意调整敌机以及我方发射子弹的速度和数量。
很不错的小蜜蜂游戏源码
04-01
很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码
JS原生编写飞机大战小蜜蜂游戏[完善版]
09-14
改良JS版小蜜蜂游戏，完善了一边移动一边发子弹的不足，代码完整，结构清晰，注释详细，适合初学者学习！
妙味课堂 小蜜蜂游戏源码
11-28
跟着妙味课堂的视频教学自己写的，顺便把里面的一些Bug修改了一下，当然，现在这个版本还是有很多Bug的，懒得去修复了，凑合一下，里面没注释，懒得加
控制台小蜜蜂C++源码
06-05
基于控制台的小蜜蜂C++源码，回调函数处理消息，直接利用windowsAPI（GDI）进行控制台窗口绘图
一款经典的小蜜蜂游戏
01-13
一个经典小游戏，是从Qt的代码移植到Delphi7的。 支持键盘和鼠标操作，可以调节速度，调节主窗口的透明度，适合在办公室玩。
c#写的游戏源码 超级蜜蜂
04-09
c#写的小游戏，适合对开发有兴趣的同学，游戏是小蜜蜂
python写一个小蜜蜂游戏
06-08
好的，下面是一个简单的Python小蜜蜂游戏： ```python import pygame import random # 初始化pygame pygame.init() # 设置游戏窗口的宽和高 width = 600 height = 600 # 创建游戏窗口 screen = pygame.display....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值