妙味课堂小蜜蜂源码

最新推荐文章于 2019-01-05 19:33:12 发布
最新推荐文章于 2019-01-05 19:33:12 发布
阅读量2k 收藏
点赞数
分类专栏： java学习小结 文章标签： html 移动游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010571913/article/details/41576151
版权

自己跟着妙味课堂的视频教程写的，为那些找不到源码的提供一个平台吧，代码还算通俗，不过没加注释，懒得加了，有需要注释的可以留下邮箱或者联系方式，我加上注释后给发过去。。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Insert title here!</title>
    <style>
        *{margin:0;padding:0}
        #container{
            width:1024px;height: 550px;background-color: black;margin:50px auto 0;position:relative;
        }
        #score{position: absolute;top:0;left:0;color:white;}
        #startGame{
            width: 80px;height: 40px;background-color: gray;line-height: 40px; text-align: center;margin:0 auto;
            position:relative;top:250px;cursor:pointer;
        }
        #bee{
            position:absolute; top:25px;
        }
        #bee li{ float:left;list-style-type: none ; margin:1px;}
        .e1{background-color: green;width: 20px;height: 20px}
        .e2{background-color: yellow;width: 20px;height: 20px}
        .e3{background-color: red;width: 20px;height: 20px}
        #plane{background-color: blue;height: 5px;width:80px; position:absolute ; }
        .bullet{width:1px;height: 5px;position:absolute;background-color: white}
        #gameOver{position: absolute;z-index: 2009;left:450px;top:250px ; padding:20px; background-color: yellow ;display: none}
        #gameOver button{margin: 10px 30px}
    </style>
    <script>
        window.οnlοad=function(){
            var container = document.getElementById("container");
            var startGame = document.getElementById("startGame");
            startGame.onclick = function(){
                this.style.display = "none";
                beeGame.init("container");
            }
            var beeGame;
            beeGame = {
                enemy: {e1: {name: "e1", style: "e1", blood: 1, speed: 2,score:1},
                    e2: {name: "e2", style: "e2", blood: 2, speed: 3,score:2},
                    e3: {name: "e3", style: "e3", blood: 3, speed: 5,score:3}},
                levelInfo: [
                    {times:3000,speed: 1, count: 10, enemy: eval("[" + new Array(11).join("'e2',") + new Array(10).join("'e1',") + "'e1'" + "]")},
                    {times:2000,speed: 2, count: 10, enemy: eval("[" + new Array(21).join("'e2',") + new Array(40).join("'e1',") + "'e1'" + "]")},
                    {times:1500,speed: 3, count: 10, enemy: eval("[" + new Array(31).join("'e2',") + new Array(30).join("'e1',") + "'e1'" + "]")}
                ],
                level: 0,
                lis: [],
                arr:[],
                score:0,
                init: function (parentId) {
                    this.parentDocument = document.getElementById(parentId);
                    this.createEnemy();
                    this.createPlane();
                },
                createEnemy: function () {
                    var ul = document.createElement("ul");
                    ul.id = "bee";
                    for (var i = 0; i < this.levelInfo[this.level].enemy.length; i++) {
                        var li = document.createElement("li");
                        li.className = this.levelInfo[this.level].enemy[i];
                        li.blood = this.enemy[this.levelInfo[this.level].enemy[i]].blood;
                        li.score = this.enemy[this.levelInfo[this.level].enemy[i]].score;
                        li.speed = this.enemy[this.levelInfo[this.level].enemy[i]].speed;
                        ul.appendChild(li);
                    }
                    this.parentDocument.appendChild(ul);

                    ul.style.width = (li.offsetWidth + 2) * this.levelInfo[this.level].count + 'px';
                    ul.style.left = (this.parentDocument.offsetWidth - ul.offsetWidth) / 2 + 'px';
                    this.lis=ul.getElementsByTagName("li");
                    for(var i = 0 ; i < this.lis.length;i++){
                        this.arr.push([this.lis[i].offsetLeft,this.lis[i].offsetTop]);
                    }

                    for(var i = 0 ; i < this.lis.length;i++){
                        this.lis[i].style.position = 'absolute';
                        this.lis[i].style.left = this.arr[i][0] + 'px';
                        this.lis[i].style.top = this.arr[i][1] + 'px';
                    }
                    this.moveBee(ul);
                    var This = this;
                    this.ul = ul;
                    this.ul.timer2 = setInterval(function(){
                        This.oneMove();
                    },this.levelInfo[this.level].times);

                },
                moveBee: function (ul) {
                    var This = this;
                    ul.timer = setInterval(function () {
                        ul.style.left = This.levelInfo[This.level].speed + ul.offsetLeft + 'px';
                        if (ul.offsetLeft + ul.offsetWidth > This.parentDocument.offsetWidth || ul.offsetLeft <= 0) {
                            ul.style.top = ul.offsetTop + This.lis[0].offsetHeight + 'px';
                            This.levelInfo[This.level].speed = 0 - This.levelInfo[This.level].speed;
                        }
                    }, 30);
                },
                oneMove:function(){
                    var index = Math.floor(Math.random()*this.lis.length)
                    var nowBee = this.lis[index];
                    var This = this;
                    this.lis[index].timer = setInterval(function(){
                        var a = (This.plane.offsetLeft + This.plane.offsetWidth/2) - (nowBee.offsetLeft + nowBee.offsetWidth/2 + nowBee.parentNode.offsetLeft);
                        var b = (This.plane.offsetTop + This.plane.offsetHeight/2) - (nowBee.offsetTop + nowBee.offsetHeight/2 + nowBee.parentNode.offsetTop);
                        var c = Math.sqrt(a*a + b*b);
                        var speedX = nowBee.speed * a/c;
                        var speedY = nowBee.speed * b/c;

                        nowBee.style.left = nowBee.offsetLeft + speedX + 'px';
                        nowBee.style.top = nowBee.offsetTop + speedY + 'px';

                        if((nowBee.offsetTop + nowBee.offsetHeight + nowBee.parentNode.offsetTop)>=(This.parentDocument.offsetHeight - This.plane.offsetHeight)){
                            This.gameOver();
                        }
                    },30);
                },
                createPlane: function () {
                    var This = this;
                    this.plane = document.createElement("div");
                    this.plane.id = 'plane';
                    this.parentDocument.appendChild(this.plane);
                    this.plane.style.left = (this.parentDocument.offsetWidth - this.plane.offsetWidth) / 2 + 'px';
                    this.plane.style.top = this.parentDocument.offsetHeight - this.plane.offsetHeight + 'px';
                    this.bindPlane();
                },
                bindPlane:function(){
                    var This = this;
                    document.onkeydown = function (e) {
                        if (!This.plane.timer) {
                            if (e.keyCode == '37') {
                                This.plane.timer = setInterval(function () {
                                    if (This.plane.offsetLeft >= 10) {
                                        This.plane.style.left = This.plane.offsetLeft - 10 + 'px';
                                    }
                                }, 30);
                            } else if (e.keyCode == '39') {
                                This.plane.timer = setInterval(function () {
                                    if (This.plane.offsetLeft + This.plane.offsetWidth <= This.parentDocument.offsetWidth - 10) {
                                        This.plane.style.left = This.plane.offsetLeft + 10 + 'px';
                                    }
                                }, 30);
                            }
                        }
                    }
                    document.onkeyup = function (e) {
                        clearInterval(This.plane.timer);
                        This.plane.timer = null;
                        if (e.keyCode == '32') {
                            This.createBuulet();
                        }
                    }
                },
                createBuulet: function () {
                    var This = this;
                    var bullet = document.createElement("div");
                    bullet.className = "bullet";
                    this.parentDocument.appendChild(bullet);
                    bullet.style.top = this.plane.offsetTop - bullet.offsetHeight + 'px';
                    bullet.style.left = this.plane.offsetLeft + this.plane.offsetWidth / 2 + 'px';
                    bullet.name="bullet";
                    This.runBullet(bullet);

                },
                runBullet:function(bullet){
                    var This = this;
                    bullet.timer = setInterval(function () {
                        bullet.style.top = bullet.offsetTop - 10 + 'px';
                        if (bullet.offsetTop <= 0) {
                            clearInterval(bullet.timer);
                            This.parentDocument.removeChild(bullet);
                        } else {
                            for (var i = 0; i < This.lis.length; i++) {
                                var bee = This.lis[i];
                                if (This.checkCrash(bullet, bee)) {
                                    bee.blood--;
                                    if(bee.blood ==0){
                                        clearInterval(bee.timer);
                                        This.ul.removeChild(bee);
                                        This.score += bee.score;
                                        document.getElementsByTagName("span")[0].innerHTML = This.score;
                                    }
                                    clearInterval(bullet.timer);
                                    This.parentDocument.removeChild(bullet);
                                    if(This.lis.length == 0){
                                        This.nextLevel();
                                    }

                                }
                            }
                        }


                    }, 30);
                },
                checkCrash: function (bullet, bee) {
                    var l1 = bullet.offsetLeft;
                    var r1 = bullet.offsetLeft + bullet.offsetWidth;
                    var t1 = bullet.offsetTop;
                    var b1 = bullet.offsetTop + bullet.offsetHeight;
                    var l2 = bee.offsetLeft + bee.parentNode.offsetLeft;
                    var r2 = bee.offsetLeft + bee.offsetWidth + bee.parentNode.offsetLeft;
                    var t2 = bee.offsetTop + bee.parentNode.offsetTop;
                    var b2 = bee.offsetTop + bee.offsetHeight + bee.parentNode.offsetTop;
                    if (r1 < l2 || l1>r2 || t1 > b2 || b1 < t2) {
                        return false;
                    } else {
                        return true;
                    }
                },
                gameOver:function(){
                    clearInterval(this.ul.timer2);
                    clearInterval(this.ul.timer);
                    for(var i = 0 ; i < this.lis.length ;i ++){
                        var li = this.lis[i];
                        clearInterval(li.timer);
                    }
                    var bullets = document.getElementsByClassName("bullet");
                    for(var i = 0 ;i< bullets.length ; i ++){
                        clearInterval((bullets[i].timer));
                    }
                    document.getElementById("gameOver").style.display="block";
                    document.onkeydown = function(){

                    };
                    document.onkeyup = function(){

                    }
                   // window.location.reload();
               },
                nextLevel:function(){
                    this.level ++;
                    this.createEnemy();
                }
            };
        }
        function restart(){
            window.location.reload();
        }
    </script>
</head>
<body>
<div id="container">
    <div id="score">积分：<span>0</span></div>
    <div id="startGame">Start game!</div>
    <div id = "gameOver">
        <div>Game over !!!!</div>
        <button value="OK" οnclick="restart()">restart</button>
    </div>
</div>
</body>
</html>


Sevenwingsfish
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
40多套 在线教育平台系统网站源码 知识付费源程序 网上教育
qq_60391053的博客
12-23 8711
40多套 在线教育平台系统网站源码 知识付费源程序 网上教育 ThinkPHP内核教育在线网完整源码,会员中心+PC版+WAP手机自适应+在线教学考试系统 2、EduSoHo7.5.15在线教育商业版带账户充值+打折活动+学习卡+作业练习 3、php方维在线教育系统V2.0 4、dedecms知识付费系统源码 5、教育培训Bootstrap网站 6、在线教育系统eduline商业版 7、教育培训Bootstrap网站 8、在线教育系统eduline商业版 9、因酷（inxedu）开源网络课堂系统 10、微教
一个小蜜蜂游戏的源代码
03-09 2592
看了书后有一个贪吃蛇，突然觉得自己也可以写这类代码。但是用system("cls")会导致各种闪屏，所以用了gotoxy()函数。在编写过程中，我明白了框架清晰的重要性。 #include #include #include #include #define Weigh 75 #define Heigh 25 #define BeeLine 3 #define BulletMaxAmo
妙味课堂 小蜜蜂游戏源码
11-28
跟着妙味课堂的视频教学自己写的，顺便把里面的一些Bug修改了一下，当然，现在这个版本还是有很多Bug的，懒得去修复了，凑合一下，里面没注释，懒得加
妙味课堂--jQuery源码
09-20
妙味课堂-视频问题解答-jQuery，源码，方便学习
很不错的小蜜蜂游戏源码
04-01
很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码 很不错的小蜜蜂游戏源码
控制台小蜜蜂C++源码
06-05
基于控制台的小蜜蜂C++源码，回调函数处理消息，直接利用windowsAPI（GDI）进行控制台窗口绘图
小蜜蜂APP.apk
11-01
小蜜蜂是一款由深圳市盟小蜜科技有限公司研发的社交电商APP。~小蜜蜂是slogan是让省钱变得更简单
Android 小蜜蜂源码
06-01
Android 小蜜蜂源码
mifeng.rar_java小游戏源码_小蜜蜂_小蜜蜂游戏
09-14
小蜜蜂游戏源码 -------------字数不够补丁
一款经典的小蜜蜂游戏
01-13
一个经典小游戏，是从Qt的代码移植到Delphi7的。 支持键盘和鼠标操作，可以调节速度，调节主窗口的透明度，适合在办公室玩。
J2ME小蜜蜂游戏Java源码.rar
07-10
模仿小蜜蜂游戏的J2ME手机版源代码，内含的导出包可以直接导入手机运行.
小蜜蜂射击游戏源码(VB.Net)
11-09
源码下载后Rar包解压密码均为lob.cn 一个用vb.net编写的小游戏
微信清粉工具
10-29
c# 写的工具，清除微信僵尸粉，需要手机扫描登录，登录之后自动帮你找出微信僵尸。
模拟刮刮乐
10-01
模拟彩票刮刮乐 真实中奖率 仿真刮奖 真实刮奖体验 中奖累计
12种CSS3 hover效果插件
01-12
插件描述：好看实用的CSS3的hover效果， 用transition 、amination 制造好看及实用的交互体验.参考示例：http://www.jq22.com/jquery-info5498
2019最新妙味课堂jquery源码分析 jquery源码逐行分析全套
weixin_44260957的博客
01-05 1295
视频教程一共58课有10+G,解析的jquery版本未2.0版[娘的,我现在都还在用1.8,他们13年就已经在用2.0了!看来我是落后了!].本视频学习的好处不比那些实战的差!具体自己去感悟!     下载地址：百度网盘...
【JavaScript】小蜜蜂
编程记录，亲测有效
02-25 3506
小蜜蜂这么经典的游戏，相信大家在FC红白机里面肯定玩过，你或许忘记了这个游戏的名字，但我相信你若干年之后重新看回这个游戏，一定会唤起童年记忆。这游戏看起来很复杂，但是用JavaScript也可以轻轻松松把它写出来。就像上次的《【JavaScript】贪吃蛇》（点击打开链接）一样，关键是解决好几个核心问题，就能写出来。没用到什么复杂、生疏的方法，还是那句大神级的setInterval。 一
beeServer:小蜜蜂服务器
04-28
beeServer 小蜜蜂服务器
清除微信僵尸粉工具源码
10-29
清除微信僵尸粉工具源代码，工具实现微信PC端协议，需要手机扫描登录，登录之后自动帮你找出微信僵尸。
phcarm环境下小蜜蜂的启动
最新发布
03-27
小蜜蜂是一个基于ROS的机器人软件包，可以在phcarm环境下进行启动。以下是启动小蜜蜂的步骤： 1. 打开终端，进入phcarm工作空间。 2. 启动ROS核心：`roscore` 3. 启动小蜜蜂的底盘控制节点：`roslaunch phcarm_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值