JS原生编写飞机大战小蜜蜂游戏

最新推荐文章于 2024-06-10 17:33:11 发布

南舟

最新推荐文章于 2024-06-10 17:33:11 发布

阅读量6.4k

点赞数 3

文章标签： javascript web前端前端编程

本文链接：https://blog.csdn.net/hnh666666/article/details/48439251

版权

javascript设计模式之单体模式--飞机大战小蜜蜂游戏

单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。

单体模式是javascript里面最基本但是也是最有用的也是最常用的模式之一。

单体模式的特点：

1，可以用来划分命名空间，从而清除全局变量所带来的危险

2，利用分支技术来封装浏览器直接的差异。

3，可以把代码组织的更为一体，便于阅读和维护。

单体模式的思路是：

一个类能返回一个对象的引用（并且永远是同一个）和一个获得该实例的方法（静态方法，通常使用getInstance名称）。那么当我们调用这个方法时，如果类持有的引用不为空就返回该引用，否者就创建该类的实例，并且将实例引用赋值给该类保持的那个引用再返回。同时将该类的构造函数定义为私有方法，避免其他函数使用该构造函数来实例化对象，只通过该类的静态方法来得到该类的唯一实例。

游戏中的困扰：

1.飞机移动的同时可以发射子弹--解决办法：在onkeydown中添加左右移动事件，在onkeyup中添加子弹发射事件和判断是否是移动键移松开，如果是就让移动失效，这样就可以按下飞机移动键的同时，按下子弹发射键并松开此键发射子弹，此时飞机仍然移动。

源码中用到的图片：

飞机-- 低级小蜜蜂-- 中级小蜜蜂-- 高级小蜜蜂--

源代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:800px; height:600px; overflow:hidden; background:black; margin:20px auto; position:relative;}
#gameName{color:white;font-size:40px;font-family:'华文隶书';position:absolute;top:40px;left:255px;}
#gameAuthor{color:white;font-size:14px;position:absolute;top:578px;left:170px;}
#gameBtn{ color:white; font-size:20px; cursor:pointer; border:1px #FFFFFF solid; width:100px; height:30px; line-height:30px; text-align:center; position:absolute; top:285px; left:350px;}

#score{ color:#FFFFFF;}
#bee{ position:relative;}
.enemy1{ width:40px; height:28px; background:url(images/mf1.png) no-repeat; float:left;}
.enemy2{ width:40px; height:28px; background:url(images/mf2.png) no-repeat; float:left;}
.enemy3{ width:40px; height:28px; background:url(images/mf3.png) no-repeat; float:left;}

.air1{ width:46px; height:60px; background:url(images/fj.png) no-repeat; position:absolute;}
.bullet{ width:1px; overflow:hidden; height:10px; background:white; position:absolute;}
</style>

<script>
window.οnlοad=function(){
   var oBtn=document.getElementById("gameBtn");
   oBtn.οnclick=function(){
       this.style.display='none';
       document.getElementById('gameAuthor').style.display='none';
       document.getElementById('gameName').style.display='none';
       Game.init('div1');//游戏开始
   };
};

var Game={

   oEnemy:{//敌人的数据
       e1:{style:'enemy1',blood:1,speed:3,score:1},
       e2:{style:'enemy2',blood:2,speed:4,score:2},
       e3:{styl

最低0.47元/天解锁文章

南舟

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
JS原生编写飞机大战小蜜蜂游戏

javascript设计模式之单体模式--飞机大战小蜜蜂游戏单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。单体模式是javascript里面最基本但是也是最有用的也是最常用的模式之一。单体模式的特点：1，可以用来划分命名空间，从而清除全局变量所带来的危险。2，利用分支技术来封装浏览器直接的差异。3，可以把
复制链接

扫一扫