摘要：通过原生的js+html实现简单的飞机大战小游戏效果，如图所示：
实现代码如下：
1.自己的飞机实现
飞机html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打飞机</title> <style> #bg { position: relative; width: 530px; height: 600px; margin-left: auto; margin-right: auto; margin-top: 100px; background: url("game_images/bg.png") no-repeat 0 -9399px; } #myPlane { position: absolute; width: 60px; height: 60px; background:url('game_images/my_air.gif') no-repeat; top: 530px; left: 235px; overflow: visible; } .enemyPlane{ position: absolute; width: 47px; height: 72px; background:url("game_images/d_j_1.gif") no-repeat; top: 3px; left: 240px; overflow: visible; } .bullets{ position: absolute; width: 9px; height: 37px; background:url("game_images/my_ari_1.gif") no-repeat; } </style> </head> <body> <div id="bg"> <div id="myPlane"></div> <!--<div class="enemyPlane"></div>--> </div> <button onclick="bgStopMove()">停止</button> <!--<button onclick="bgStartMove()">启动</button>--> </body> <script type="text/javascript" src="EnemyPlane.js"></script> <script type="text/javascript" src="bullets.js"></script> <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script> bgStartMove(); //敌机控制 var enemy_controller; //背景图的相关设置： var bg_coordinate = -100; var bg_move_controller; //用户飞机的相关设置 var move_speed = 11; var myPlane_style_left = initialDOMPosition("myPlane","left"); var myPlane_style_top = initialDOMPosition("myPlane","top"); function bgMove() { if (bg_coordinate > -1) { bg_coordinate = -9399; } bg_coordinate += 1; document.getElementById("bg").setAttribute("style", "background: red url('game_images/bg.png') no-repeat 0 " + bg_coordinate + "px;") } function bgStartMove() { bg_move_controller = setInterval(bgMove, 30); } function bgStopMove() { clearInterval(bg_move_controller); } function initialDOMPosition(DOMId,leftOrTop) { var myDiv = document.getElementById(DOMId); //获取指定DOM的style: var myPlaneStyle = document.defaultView.getComputedStyle(myDiv, null); var Position; if (leftOrTop == "left") { Position = myPlaneStyle.left; } else if (leftOrTop == "top") { Position = myPlaneStyle.top; } Position = Position.substring(0, Position.length - 2); Position = parseInt(Position);//将字符串转化为整型； return Position; } function shoot(){ var planeLeft = initialDOMPosition("myPlane","left"); var planeTop = initialDOMPosition("myPlane","top"); var myBullet = new bullets(planeLeft,planeTop); } document.onkeydown = function () { var key = event.keyCode; switch (key) { case 32://发子弹 shoot(); break; case 38://上 myPlaneMoveTop(); break; case 40://下 myPlaneMoveDown(); break; case 37://左 myPlaneMoveLeft(); break; case 39://右 myPlayMoveRight(); break; } //方向键：上：38；下：40；左：37；右：39； //空格：32 }; function myPlaneMoveDown(){ if(myPlane_style_top < 540){ myPlane_style_top += move_speed; document.getElementById("myPlane").setAttribute("style","top:"+myPlane_style_top+"px;left:"+myPlane_style_left+"px;"); } } function myPlaneMoveTop(){ if(myPlane_style_top > 3){ myPlane_style_top -= move_speed; document.getElementById("myPlane").setAttribute("style","top:"+myPlane_style_top+"px;left:"+myPlane_style_left+"px;"); } } function myPlaneMoveLeft() { //向左移动不能超过bg的边界； if (myPlane_style_left > 1) { myPlane_style_left -= move_speed; document.getElementById("myPlane").setAttribute("style", "left:" + myPlane_style_left + "px;top:"+myPlane_style_top+"px;"); } } function myPlayMoveRight() { //向左移动不能超过bg的边界； //相对于图片左边的坐标，所以坐标是：530 - 60； if (myPlane_style_left < 470) { myPlane_style_left += move_speed; document.getElementById("myPlane").setAttribute("style", "left:" + myPlane_style_left + "px;top:"+myPlane_style_top+"px;"); } } //敌机的自动调用 enemy_controller = setInterval(springEnemy,3000); function springEnemy(){ var count = parseInt((Math.random() * 10)/2); for (var i=0;i<count;i++){ var enemy = new EnemyPlane(); } } </script> </html> index控制HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body><style type="text/css"> #bg{ background-color: blueviolet;width: 500px; height: 500px;border: red 1px solid; } #m{border:rebeccapurple 1px solid;background-color: red;width: 50px; height: 50px;} </style> <div id="bg"> <div id="m"></div> </div> <div id="send"></div> <input type="button" value="开始" onclick="startinterval()"> <input type="button" value="结束" onclick="closeinterval()"> <script type="text/javascript"> // document.onkeydown =function (){ // var ke=event.keyCode; // alert(ke); // } var i=0; var top_1=0; var endsetinterval; function getid() { // i+=1document.getElementById("send" top_1+=5; document.getElementById("m").setAttribute("style","margin-top:"+top_1+"px;"); } // setTimeout(getid,1000); function startinterval(){ endsetinterval=setInterval(getid,1000); }; function closeinterval(){ clearInterval(endsetinterval); } </script> </body> </html>
2.敌机的飞机 JS代码
/** * Created by mac on 2016-07-22. */ /** * 使用闭包函数法不能实现相关功能。 */ (function (window) { //enemyType敌机1（d_j_1.gif）：0， //敌机3（d_j_3.gif）:1 var enemy_top; var enemy_index; var EnemyPlane2 = function (enemyType) { enemy_index = enemyIndex; this.init(enemyType); enemy_top = this.initialEnemyTop(); this.startMove(); }; EnemyPlane2.prototype.initialEnemyTop = function () { var Postion = $("#bg #" + enemy_index).css("top"); Postion = Postion.substring(0, Postion.length - 2); Postion = parseInt(Postion); return Postion; }; EnemyPlane2.prototype.init = function (enemyType) { var enemy = "<div class='enemyPlane' id='" + enemy_index + "'></div>"; $("#bg").append(enemy); //Math.random();//生成一个0到1的随机数； //parseInt();//取整 //$("#bg div:eq(0)").css("width"="72px");单个参数的用法 var enemy_left = parseInt(Math.random() * (530 - 64)); switch (enemyType) { case 0: $("#bg #" + enemy_index).css({ "width": "47px", "height": "72px", "background": "url('./game_images/d_j_1.gif') no-repeat", "left": enemy_left + "px" }); break; case 1: $("#bg #" + enemy_index).css({ "width": "64px", "height": "56px", "background": "url('./game_images/d_j_3.gif') no-repeat", "left": enemy_left + "px" }); break } }; EnemyPlane2.prototype.startMove = function () { var planeHeight = $("#bg #" + enemy_index).css("height"); planeHeight = planeHeight.substring(0, planeHeight.length - 2); planeHeight = parseInt(planeHeight); if ((enemy_top + planeHeight) > 598) { $("#bg #" + enemy_index).remove();//与empty()的区别在于是否将本身删除。它们的子元素都会被删除 } else { //enemy_top += 3; //$("#bg #"+enemy_index).css("top",enemy_top + "px"); $("#bg #" + enemy_index).animate({"top": (600 - planeHeight) + "px"}, 4000, function () { $("#bg #" + enemy_index).hide(); $("#bg #" + enemy_index).remove(); }); } }; window.EnemyPlane2 = EnemyPlane2; })(window); /** * 通过类的思想，实现飞机的控制； * @param enemyType * @constructor */ function EnemyPlane() { var enemy_top; var enemy_type; var enemyId; init(); function initialEnemyTop() { var Postion = $("#bg #e" + enemyId).css("top"); Postion = Postion.substring(0, Postion.length - 2); Postion = parseInt(Postion); return Postion; } function init() { //随机生成飞机类型； enemy_type = (parseInt(Math.random() * 10) > 5) ? 0 : 1; //随机生成飞机id enemyId = parseInt(Math.random() * 10000); //向#bg中添加飞机； var enemy = "<div class='enemyPlane' id='e" + enemyId + "'></div>"; $("#bg").append(enemy); //获取敌机的值； enemy_top = initialEnemyTop(); //Math.random();//生成一个0到1的随机数； //parseInt();//取整 //$("#bg div:eq(0)").css("width"="72px");单个参数的用法 //随机生成敌机开始时的Left值 var enemy_left = parseInt(Math.random() * (530 - 64)); //根据随机出来的飞机类型，对飞机属性进行设置； switch (enemy_type) { case 0: $("#bg #e" + enemyId).css({ "width": "47px", "height": "72px", "background": "url('./game_images/d_j_1.gif') no-repeat", "left": enemy_left + "px" }); break; case 1: $("#bg #e" + enemyId).css({ "width": "64px", "height": "56px", "background": "url('./game_images/d_j_3.gif') no-repeat", "left": enemy_left + "px" }); break; } //敌机开始移动 startMove(); } //敌机开始移动 function startMove() { //获取敌机的高度 var planeHeight = $("#bg #e" + enemyId).css("height"); planeHeight = planeHeight.substring(0, planeHeight.length - 2); planeHeight = parseInt(planeHeight); //获取敌机的宽度 var planeWidth = $("#bg #e" + enemyId).css("width"); planeWidth = planeWidth.substring(0, planeWidth.length - 2); planeWidth = parseInt(planeWidth); //随机获取敌机的Left（只有飞机走折线时采用） var planeLeft = parseInt(Math.random() * (530 - planeWidth)); //随机敌机是走折线，还是走直线； if (parseInt(Math.random() * 10) > 5) { $("#bg #e" + enemyId).animate({"top": (600 - planeHeight) + "px"}, 3000, function () { var planeHeight1 = $("#bg #e" + enemyId).css("top"); planeHeight1 = planeHeight1.substring(0, planeHeight1.length - 2); planeHeight1 = parseInt(planeHeight1); enemyDismiss(); }); } else { //走折线时，第一次位置变化 $("#bg #e" + enemyId).animate({"top": (300 - planeHeight) + "px", "left": "1px"}, 1500, 'linear'); //第二次位置变化 $("#bg #e" + enemyId).animate({ "top": (600 - planeHeight) + "px", "left": planeLeft + "px" }, 1500, 'linear', function () { //销毁敌机 enemyDismiss(); }); } } //销毁敌机 function enemyDismiss() { $("#bg #e" + enemyId).hide(); $("#bg #e" + enemyId).remove(); } function getEnemyPosition() { var position_top = $("#bg #e" + enemyId).css("top"); var position_left = $("#bg #e" + enemyId).css("left"); var position = {"top": position_top, "left": position_left}; return position; }
3.子弹实现 JS
/** * Created by mac on 2016-07-22. */ /** * 使用闭包函数法不能实现相关功能。 */ (function (window) { //enemyType敌机1（d_j_1.gif）：0， //敌机3（d_j_3.gif）:1 var enemy_top; var enemy_index; var EnemyPlane2 = function (enemyType) { enemy_index = enemyIndex; this.init(enemyType); enemy_top = this.initialEnemyTop(); this.startMove(); }; EnemyPlane2.prototype.initialEnemyTop = function () { var Postion = $("#bg #" + enemy_index).css("top"); Postion = Postion.substring(0, Postion.length - 2); Postion = parseInt(Postion); return Postion; }; EnemyPlane2.prototype.init = function (enemyType) { var enemy = "<div class='enemyPlane' id='" + enemy_index + "'></div>"; $("#bg").append(enemy); //Math.random();//生成一个0到1的随机数； //parseInt();//取整 //$("#bg div:eq(0)").css("width"="72px");单个参数的用法 var enemy_left = parseInt(Math.random() * (530 - 64)); switch (enemyType) { case 0: $("#bg #" + enemy_index).css({ "width": "47px", "height": "72px", "background": "url('./game_images/d_j_1.gif') no-repeat", "left": enemy_left + "px" }); break; case 1: $("#bg #" + enemy_index).css({ "width": "64px", "height": "56px", "background": "url('./game_images/d_j_3.gif') no-repeat", "left": enemy_left + "px" }); break } }; EnemyPlane2.prototype.startMove = function () { var planeHeight = $("#bg #" + enemy_index).css("height"); planeHeight = planeHeight.substring(0, planeHeight.length - 2); planeHeight = parseInt(planeHeight); if ((enemy_top + planeHeight) > 598) { $("#bg #" + enemy_index).remove();//与empty()的区别在于是否将本身删除。它们的子元素都会被删除 } else { //enemy_top += 3; //$("#bg #"+enemy_index).css("top",enemy_top + "px"); $("#bg #" + enemy_index).animate({"top": (600 - planeHeight) + "px"}, 4000, function () { $("#bg #" + enemy_index).hide(); $("#bg #" + enemy_index).remove(); }); } }; window.EnemyPlane2 = EnemyPlane2; })(window); /** * 通过类的思想，实现飞机的控制； * @param enemyType * @constructor */ function EnemyPlane() { var enemy_top; var enemy_type; var enemyId; init(); function initialEnemyTop() { var Postion = $("#bg #e" + enemyId).css("top"); Postion = Postion.substring(0, Postion.length - 2); Postion = parseInt(Postion); return Postion; } function init() { //随机生成飞机类型； enemy_type = (parseInt(Math.random() * 10) > 5) ? 0 : 1; //随机生成飞机id enemyId = parseInt(Math.random() * 10000); //向#bg中添加飞机； var enemy = "<div class='enemyPlane' id='e" + enemyId + "'></div>"; $("#bg").append(enemy); //获取敌机的值； enemy_top = initialEnemyTop(); //Math.random();//生成一个0到1的随机数； //parseInt();//取整 //$("#bg div:eq(0)").css("width"="72px");单个参数的用法 //随机生成敌机开始时的Left值 var enemy_left = parseInt(Math.random() * (530 - 64)); //根据随机出来的飞机类型，对飞机属性进行设置； switch (enemy_type) { case 0: $("#bg #e" + enemyId).css({ "width": "47px", "height": "72px", "background": "url('./game_images/d_j_1.gif') no-repeat", "left": enemy_left + "px" }); break; case 1: $("#bg #e" + enemyId).css({ "width": "64px", "height": "56px", "background": "url('./game_images/d_j_3.gif') no-repeat", "left": enemy_left + "px" }); break; } //敌机开始移动 startMove(); } //敌机开始移动 function startMove() { //获取敌机的高度 var planeHeight = $("#bg #e" + enemyId).css("height"); planeHeight = planeHeight.substring(0, planeHeight.length - 2); planeHeight = parseInt(planeHeight); //获取敌机的宽度 var planeWidth = $("#bg #e" + enemyId).css("width"); planeWidth = planeWidth.substring(0, planeWidth.length - 2); planeWidth = parseInt(planeWidth); //随机获取敌机的Left（只有飞机走折线时采用） var planeLeft = parseInt(Math.random() * (530 - planeWidth)); //随机敌机是走折线，还是走直线； if (parseInt(Math.random() * 10) > 5) { $("#bg #e" + enemyId).animate({"top": (600 - planeHeight) + "px"}, 3000, function () { var planeHeight1 = $("#bg #e" + enemyId).css("top"); planeHeight1 = planeHeight1.substring(0, planeHeight1.length - 2); planeHeight1 = parseInt(planeHeight1); enemyDismiss(); }); } else { //走折线时，第一次位置变化 $("#bg #e" + enemyId).animate({"top": (300 - planeHeight) + "px", "left": "1px"}, 1500, 'linear'); //第二次位置变化 $("#bg #e" + enemyId).animate({ "top": (600 - planeHeight) + "px", "left": planeLeft + "px" }, 1500, 'linear', function () { //销毁敌机 enemyDismiss(); }); } } //销毁敌机 function enemyDismiss() { $("#bg #e" + enemyId).hide(); $("#bg #e" + enemyId).remove(); } function getEnemyPosition() { var position_top = $("#bg #e" + enemyId).css("top"); var position_left = $("#bg #e" + enemyId).css("left"); var position = {"top": position_top, "left": position_left}; return position; } }