js实现一个简单的星球大战射击游戏效果代码
代码语言:html
所属分类:游戏
代码描述:js实现一个简单的星球大战射击游戏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; color: #000000; } body{ width: 960px; height: 600px; margin: 0 auto; font-size: 20px; } /**************************************************开始界面*********************************************************/ #ks{ width: 960px; height: 600px; background: url("//repo.bfw.wiki/bfwrepo/image/607e4ca28879b.png"); margin: auto; display: block; } /**********游戏名称**********/ #ks .mc{ width: 580px; height: 100px; /*background-color: gold;*/ margin: 0 auto; font-size: 100px; color: #ffffff; } /**********开始按钮**********/ #ks .an button{ width: 200px; height: 50px; background-color: #f19e0d; position: relative; top: 350px; left: 375px; font-size: 25px; cursor:pointer; } /**********游戏说明**********/ #ks .sm{ width: 400px; height: 300px; /*background-color: deeppink;*/ margin: -40px 0 0 250px; font-size: 17px; color: azure; overflow: hidden; } #ks .sm .sm1{ width: 400px; height: 460px; position: relative; top: 200px; cursor:pointer; /*background-color: firebrick;*/ -webkit-animation-name:move; -webkit-animation-duration:20s; animation-iteration-count:999; animation-timing-function: linear; } #ks .sm .sm1:hover{ animation-play-state: paused; } @keyframes move{ from{ transform: translateX(0px); } to{ transform: translateY(-420px); } } #ks .sm .sm1 ul li{ line-height: 18px; list-style-type: none; } /**************************************************游戏界面*********************************************************/ #yx{ width: 960px; height: 600px; background: url("//repo.bfw.wiki/bfwrepo/image/607e4ca28879b.png"); margin: 0 auto; position: relative; display: none; overflow: hidden; } #yx .main{ width: 100px; height: 100px; /*background-color: firebrick;*/ position: absolute; left: 0; top: 200px; z-index: 1; } #yx .planet{ width: 100%; height: 100%; /*background-color: gold;*/ position: absolute; z-index: 0; } #yx .jm4{ width: 20px; height: 6px; position: absolute; /*background-color: #ff2b85;*/ top: 296px; left: 94px; } #bullets,#enemy,#xx{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .b{ width: 14px; height: 6px; position: absolute; } .e{ position: absolute; } .z{ position: absolute; } #yx .jm6{ width: 50px; height: 50px; /*background-color: fuchsia;*/ position: absolute; left: 200px; top: 10px; } #yx .jm6 img{ width: 35px; height: 45px; } #yx .jm6 .jm7{ width: 200px; height: 8px; /*background-color: violet;*/ border: #f1be65 solid 2px; position: relative; } #yx .jm6 .jm7 .schedule{ width: 198px; height: 6px; /*background-color: #f1be65;*/ position: absolute; top: 1px; } #jdt{ width: 198px; height: 6px; background-color: #f1be65; position: absolute; top: 1px; } #span{ color: white; position: absolute; left: -30px; } #p{ position: absolute; top: -45px; left: 180px; color: white; /*font-size: 20px;*/ } .rl{ position: absolute; } #yx #scores{ width: 200px; height: 40px; /*background-color: darkblue;*/ /*border: #f19e0d solid 3px;*/ color: #ffffff; /*//font-size: 30px;*/ position: absolute; left: 500px; top: 20px; } #yx .jm9{ width: 50px; height: 50px; /*background-color: darkblue;*/ position: absolute; left: 800px; top:20px; } #yx #jm9{ color: white; /*font-size: 20px;*/ } #yx #jm9 input{ width: 70px; height: 30px; position: absolute; border: #f19e0d solid 3px; left: 60px; top: 5px; font-size: 18px; } #yx .jm9 img{ width: 100%; height: 100%; } #yx .jm11{ width: 150px; height: 50px; /*background-color: rgba(255, 255, 255, 0.5);*/ position: absolute; top: 530px; left: 300px; cursor: pointer; } #yx .jm11 img:nth-child(2){ position: absolute; left: 90px; } #yx .jm12{ width: 50px; height: 50px; background-color: #ffffff; border-radius: 50%; color: #ffffff; /*font-size: 50px;*/ position: absolute; left: 600px; top: 530px; } #jpzt{ cursor: pointer; } #yx .jm13{ width: 150px; height: 150px; /*background-color: rgba(255, 255, 255, 0.1);*/ position: absolute; top: 430px; left: 730px; z-index: 1; } #yx .jm13 img:nth-child(1){ position: absolute; left: 50px; cursor: pointer; } #yx .jm13 img:nth-child(2){ position: absolute; left: 100px; top: 50px; cursor: pointer; } #yx .jm13 img:nth-child(3){ position: absolute; left: 50px; top: 100px; cursor: pointer; } #yx .jm13 img:nth-child(4){ position: absolute; top: 50px; cursor: pointer; } .f{ position: absolute; } #nickname{ width: 960px; height: 600px; background: url("//repo.bfw.wiki/bfwrepo/image/607e4ca28879b.png"); margin: 0 auto; display: none; } #nickname .nickname1{ width: 600px; height: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 0 auto; position: relative; } #nickname .nickname1 a:nth-child(1){ font-size: 50px; color: white; position: absolute; top: 20px; left: 145px; } #nickname .nickname1 span{ color: white; font-size: 30px; position: absolute; border: white solid 3px; background-color: #f1be65; top: 400px; left: 225px; cursor: pointer; } #df{ width: 200px; height: 100px; /*background-color: yellow;*/ position: absolute; top: 100px; left: 200px; font-size: 20px; } </style> <script> ;window.onload = function () { //获取标签 function $(idName) { return document.getElementById(idName); } //获取样式使用最终值的函数 function getStyle(ele, attr) { var res = null; if (ele.currentStyle) { res = ele.currentStyle[attr]; } else { res = window.getComputedStyle(ele, null)[attr]; } return parseFloat(res); } //获取标签元素 //获取开始按钮元素 var ks = $("ks") , s = $("scores").firstElementChild.firstElementChild , an = $("an")//开始标签 , yx = $("yx")//游戏界面标签 , enemyP = $("enemy")//敌方飞机标签 , rlP = $("rl")//进度条标签 , tubiao = $("tubiao")//燃料标签 , xxP = $("xx")//行星标签 , nickname = $("nickname")//输入昵称标签 , djzdsP = $("djzds")//敌机子弹标签 , bullet = $("bullet");//子弹标签 var bullets = [];//所有子弹的集合 var rls = [];//定义燃料集合 var xxx = [];//定义行星集合 var djzds = [];//定义敌机子弹的集合 //定义己方飞船 var main = $("main"); var x = null;//行星定时器 var c = null; //背景定时器 var score = 0;//得分 var backgroundPX = 0; //定义背景的x轴 //开始游戏 an.firstElementChild.onclick = function () { ks.style.display = "none"; yx.style.display = "block"; appearEnemy();//敌机开始创建 start();//计时器开始计时 rl1();//燃料开始创建 jdt();//进度条开始倒计时 xxyd();//行星开始创建 bgMove();//背景移动 djzd_1();//创建敌机子弹 }; //键盘控制方向 var main1 = document.getElementById("main"); var jLeft = false; var jTop = false; var jRight = false; var jBottom = false; var mainStatus = true; var yxH = getStyle(yx, "height"); setInterval(function () { if (jLeft) { if (mainStatus) { main1.style.left = main1.offsetLeft - 10 + "px"; } } else if (jRight) { if (mainStatus) { main1.style.left = main1.offsetLeft + 10 + "px"; } } if (jTop) { if (mainStatus) { main1.style.top = main1.offsetTop - 10 + "px"; } } else if (jBottom) { if (mainStatus) { main1.style.top = main1.offsetTop + 10 + "px"; } } limit(); }, 30); document.onkeydown = function (event) { var event = event || window.event; switch (event.keyCode) { case 37: jLeft = true; break; case 38: jTop = true; break; case 39: jRight = true; break; case 40: jBottom = true; break; } limit(); return false; }; //var youxizt =true; // if(youxizt){正常调用} // else{ !createBullet();} // 暂停:{youxizt =false} // 开始{youxizt =true;} document.onkeyup = function (event) { switch ((event || window.event).keyCode) { case 37: jLeft = false; break; case 38: jTop = false; break; case 39: jRight = false; break; case 40: jBottom = false; break; case 32: if (mainStatus) { createBullet();//触发子弹事件 } break; case 80: if (mainStatus) { //点击P建时,暂停游戏,再次点击,开始游戏 mainStatus = false; clearInterval(b);//清除敌机定时器 clearInterval(rl);//清除燃料定时器 clearInterval(x);//清除行星定时器 clearInterval(int);//清除计时器 clearInterval(djzd_timer);//清除敌机创建子弹定时器 } else { mainStatus = true; rl = null;//燃料为空 rl1();//燃料开始创建 b = null;//敌机为空 appearEnemy();//敌机开始创建 x = null;//行星为空 xxyd();//开始创建行星 int = null;//计时器为空 start();//开始计时器 djzd_timer = null;//敌机子弹定时器 djzd_1();//开始敌机子弹定时器 } } limit(); return true; }; //防止溢出 function limit() { //var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]; //防止左侧溢出 main1.offsetLeft <= 0 && (main1.style.left = 0 + "px"); //防止顶部溢出 main1.offsetTop <= 0 && (main1.style.top = 0 + "px"); //防止右侧溢出 main1.offsetLeft >= 860 && (main1.style.left = 860 + "px"); //防止底部溢出 main1.offsetTop >= 500 && (main1.style.top = 500 + "px"); } //敏感区域的移动 var top = document.getElementById("top"); var left = document.getElementById("left"); var right = document.getElementById("right"); var bottom = document.getElementById("bottom"); right.onmouseover = function () { var right_timer = setInterval(function () { if (right) { if (mainStatus) { main1.style.left = main1.offsetLeft + 10 + "px"; } } limit(); }, 30); right.onmouseout = function () { clearInterval(right_timer); } }; top.onmouseover = function () { var top_timer = setInterval(function () { if (top) { if (mainStatus) { main1.style.top = main1.offsetTop - 10 + "px" } } limit(); }, 30); top.onmouseout = function () { clearInterval(top_timer); } }; left.onmouseover = function () { var left_timer = setInterval(function () { if (left) { if (mainStatus) { main1.style.left = main1.offsetLeft - 10 + "px" } } limit(); }, 30); left.onmouseout = function () { clearInterval(left_timer); } }; bottom.onmouseover = function () { var bottom_timer = setInterval(function () { if (bottom) { if (mainStatus) { main1.style.top = main1.offsetTop + 10 + "px" } } limit(); }, 30); bottom.onmouseout = function () { clearInterval(bottom_timer); } }; var bulletW = 14 , bulletH = 6; var bulletsP = $("bullets"); var myMainW = getStyle(main, "width") , myMainH = getStyle(main, "height"); var yxW = getStyle(yx, "width") , yxH = getStyle(yx, "height"); //制造子弹 function createBullet() { var bullet = new Image(); bullet.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAGCAMAAADExV+OAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADMUExURQAAAJFIAJFIAHRGAJJHAJJGAJNIAJFIAJFIAJJGAJBIAJJGAJNJAJNJAJJGAJBHAI9JAJNJAJFIAJJEAJJGAI1IAJFIAJNGAJBFAJNHAI1IAJFEAJBIAJdGAJFGAJJGAIw/AJNFAJBIAJFHAJBHAJBHAJFIAJBJAJBIAJJJAJFGAJJJAI9DAJJEAJNHAItEAI9FAI5HAIBAAJFGAJBKAI1LAJNAAJBIAJJIAJBHAJNIAJBIAJJHAJJFAJBGAJJJAJJJAIxFAIBIAJJIAIRfzZcAAABEdFJOUwDqzgvG3tLj3OzK0Mv12/TPz8dp4nLV7NrGYB61FsWoNcF1Ydhl8eHry/Tga2LNT11IBL6VOii8xOauw7SY7agOeiC9pdBHIAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAGFJREFUGFdjYGBQ5hHgZJVhszSxMWNgYFZQZGES5OUwZmW3MnVgkGdkZ9TkEuLnc2ZntzdnUJLjVFdj42YRl7C2s3BkYJDV09DWUhGTFOGwdQKaZGSoq2+goyolLCrNwAAAe0oJHTUfFKgAAAAASUVORK5CYII="; bullet.className = "b"; //己方飞机的位置 var myMainL = getStyle(main, "left") , myMainT = getStyle(main, "top"); //确定创建子弹的位置 var bulletT = myMainT + myMainH / 2 - bulletH / 2 , bulletL = myMainL + myMainW - bulletW / 2; if (mainStatus) { bullet.style.left = bulletL + "px"; bullet.style.top = bulletT + "px"; } bulletsP.appendChild(bullet); bullets.push(bullet); move(bullet, "left"); } //子弹的运动 function move(ele, attr) { var speed = +8; ele.timer = setInterval(function () { var moveVal = getStyle(ele, attr); //子弹的运动出游戏界面: 清除定时器 ,删除子弹 if (moveVal >= 940) { clearInterval(ele.timer); ele.parentNode.removeChild(ele); bullets.splice(0, 1); } else { if (mainStatus) { ele.style[attr] = moveVal + speed + "px"; } } }, 30); } //创建敌机数据 var ememysObj = { enemy1: { width: 80, height: 81, score: 5, hp: 100 }, enemy2: { width: 80, height: 80, score: 10, hp: 200 }, enemy3: { width: 80, height: 80, score: -10, hp: 100 } }; //创建燃料 var rlObj = { rl1: { width: 35, height: 45 } }; //创建行星 var xxObj = { xx1: { width: 100, height: 100 }, xx2: { width: 80, height: 80 }, xx3: { width: 90, height: 52 }, xx4: { width: 35, height: 36 }, xx5: { width: 23, height: 24 } }; //创建敌机的定时器 var b = null; function appearEnemy() { if (b) return;//当创建子弹的定时器“b”为null时执行以下函数,当创建子弹定时器为return时不执行以下函数 b = setInterval(function () { //制造敌机 if (mainStatus) { createEnemy(); } }, 1000); } clearInterval(b); //制造敌机的函数 var enemys = []; function createEnemy() { //敌机出现概率的数据 var percentData = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3]; //敌机的类型 var enemyType = percentData[Math.floor(Math.random() * percentData.length)]; //得到当前随机敌机的数据 var enemyData = ememysObj ["enemy" + enemyType]; //创建敌机所在的元素 var enemy = new Image(enemyData.width, enemyData.height); enemy.src = "//repo.bfw.wiki/bfwrepo/image/5f0bbc710dfdd.png"; enemys.t = enemyType; enemy.score = enemyData.score; enemy.hp = enemyData.hp; enemy.className = "e"; enemy.dead = false;//敌机存活 //确定当前敌机的出现时的位置 var enemyL = -enemyData.width , enemyT = Math.floor(Math.random() * (yxH - enemyData.height + 1)); if (mainStatus) { enemy.style.left = 960 + "px"; enemy.style.top = enemyT + "px"; } enemyP.appendChild(enemy); enemys.push(enemy); enemyMove(enemy, "left"); } //敌机子弹创建方法 var djzd_timer = null; function djzd_1() { if(djzd_timer) return; djzd_timer = setInterval(function () { var djs = enemyP.getElementsByTagName("img"); for (var i = 0; i < djs.length; i++) { if (djs[i].offsetHeight === 81) { // console.log(djs[i].offsetTop,djs[i].offsetHeight); create_djzd(djs[i]); } } }, 2000); } function create_djzd(ele) { //console.log(ele.offsetHeight); //敌机子弹的宽、高 var djzdW = 14 , djzdH = 6; var djzd = new Image(); djzd.src = "//repo.bfw.wiki/bfwrepo/image/6077e8b0cc79e.png"; djzd.className = "z"; //确定敌机创建的位置 var djW = ele.offsetWidth , djH = ele.offsetHeight;//敌机的宽高 var djL = ele.offsetLeft ,djT = ele.offsetTop;//敌机的左、上边距 //console.log(djW); //console.log(djH); //确定创建敌机子弹的位置 var djzdT = djT + djH / 2 - djzdH / 2 , djzdL = djL - djW/2 + djzdW / 2; if(mainStatus) { djzd.style.top = djzdT + "px"; djzd.style.left = djzdL + "px"; } djzdsP.appendChild(djzd); djzds.push(djzd); djzdMove(djzd, "left"); } function djzdMove(ele,attr) { var speed = -5; ele.timer = setInterval(function () { var djzdyd = getStyle(ele,attr); if(djzdyd <= -14){ clearInterval(ele.timer); djzdsP.removeChild(ele); }else { if(mainStatus) { ele.style[attr] = djzdyd + speed + "px"; } zdpz(); } },10) } //敌机运动 function enemyMove(ele,attr) { var speed = -2; ele.timer = setInterval(function () { var moveVal = getStyle(ele, attr); if (moveVal <= -80) { clearInterval(ele.timer); enemyP.removeChild(ele); } else { if(mainStatus) { ele.style[attr] = moveVal + speed + 'px'; } //每一架敌机运动时,检测和每一颗子弹的碰撞 danger(ele); //检测己方飞机与敌机的碰撞 gameOver(); } }, 10) } //检测己方飞机的子弹和敌机的碰撞 function danger(enemys) { for (var i = 0; i < bullets.length; i++) { //得到子弹的左上边距 var bulletL = getStyle(bullets[i], "left") , bulletT = getStyle(bullets[i], "top"); //得到敌机的左上边距 var enemyL = getStyle(enemys, "left") , enemyT = getStyle(enemys, "top"); //得到敌机的宽高 var enemyW = getStyle(enemys, "width") , enemyH = getStyle(enemys, "height"); var condition = bulletL + bulletW >= enemyL && bulletL <= enemyL + enemyW && bulletT <= enemyT + enemyH && bulletT + bulletH >= enemyT; if (condition) { //子弹和敌机的碰撞:删除子弹 //console.log("ccc"); //1.先清除碰撞子弹的定时器 clearInterval(bullets[i].timer); //2.删除元素 bulletsP.removeChild(bullets[i]); //3.从集合中删除子弹 bullets.splice(i, 1); //4.子弹和敌机发生碰撞后,敌机血量减少,血量为0时,删除敌机 enemys.hp -= 100; if (enemys.hp === 0) { //删除敌机 clearInterva.........完整代码请登录后点击上方下载按钮下载查看
网友评论0