zoukankan      html  css  js  c++  java
  • 刚学玩原生JS,自己写了一个小游戏,希望在以后能不断地进步加以改善

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>冒险岛</title>
    </head>
    <style type="text/css">
    body{
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    }
    #game{
    1200px;
    height:580px;
    /*border:1px solid red;*/
    margin:20px auto;
    background:url("sucai/readyBg.jpg") repeat-x ;
    background-position: 0 0;
    background-size: 1300px 700px ;
    overflow: hidden;
    position: relative;
    }
    #anniu{
    300px;
    height:400px;
    /*border:1px solid red;*/
    float: left;
    margin:80px 60px;
    background-color: rgba(29,157,254,0.4);
    }
    #anniu p{
    font-size: 36px;
    color:blueviolet;
    150px;
    border:1px solid #88d0f1;
    margin: auto;
    margin-top: 40px;
    border-radius: 3px;
    }
    #anniu p:hover{
    color: deeppink;
    cursor: pointer;
    }
    #xueliang{
    350px;
    height:100px;
    position: absolute;
    top:5px;
    left:85px;
    z-index: 2;
    display: none;
    }
    #xue{
    400px;
    height:150px;
    }
    #xueliang div{
    35px;
    height:6px;
    /*border:1px solid red;*/
    position: absolute;
    }
    #xue1{
    left:120px;
    top:57px;
    background-color: #ff8c19;
    }
    #xue2{
    left:170px;
    top:57px;
    background-color: #ff8c19;
    }
    #xue3{
    left:240px;
    top:57px;
    background-color: #ff8c19;
    }
    #xue4{
    left:290px;
    top:57px;
    background-color: #ff8c19;
    }
    #lan1{
    left:125px;
    top:81px;
    background-color: #21add1;
    }
    #lan2{
    left:171px;
    top:81px;
    background-color: #21add1;
    }
    #lan3{
    left:238px;
    top:81px;
    background-color: #21add1;
    }
    #lan4{
    left:284px;
    top:81px;
    background-color: #21add1;
    }
    #exp1{
    left:140px;
    top:104px;
    background-color: #ffe695;
    display: none;
    }
    #exp2{
    left:200px;
    top:104px;
    background-color: #ffe695;
    display: none;
    }
    #exp3{
    left:260px;
    top:104px;
    background-color: #ffe695;
    display: none;
    }
    #zhuangtai{
    50px;
    height: 50px;
    position: absolute;
    top:18px;
    left:22px;
    }
    #zhuangtai img{
    85px;
    height: 85px;
    }
    #jifen{
    220px;
    height:250px;
    /*border:1px solid red;*/
    margin:auto;
    position:absolute ;
    top:200px;
    left:530px;
    z-index: 3;
    display: none;
    }
    #jifen p{
    /*border:1px solid red;*/
    position: relative;
    font-size: 23px;
    top:-240px;
    left:30px;
    180px;
    }
    #jifen span{
    color:red;
    }
    #playfenshu{
    139px;
    height:50px;
    /*border:1px solid red;*/
    position: absolute;
    z-index: 3;
    right:100px;
    top:30px;
    display: none;
    }
    #playfenshu p{
    position: relative;
    color:red;
    font-size: 14px;
    top:-40px;
    left:35px;
    }
    #gk{
    position: absolute;
    top: 92px;
    left:97px;
    z-index: 3;
    30px;
    height:30px;
    }
    #dazhao{
    position: absolute;
    top:12px;
    left:75px;
    z-index: 3;
    display: none;
    }
    #Pause{
    55px;
    height: 55px;
    position: absolute;
    top:30px;
    left:700px;
    z-index: 3;
    display: none;
    cursor: pointer;
    }
    #pauseoff{
    200px;
    height:130px;
    /*border:1px solid red;*/
    position: absolute;
    top:250px;
    left:600px;
    z-index: 3;
    display: none;
    }
    #pauseoff button{
    200px;
    height:30px;
    border:none;
    background-color: #df5f14;
    margin-top: 5px;
    border-radius: 5px;
    color: white;
    }
    #pauseoff button:hover{
    background-color: #fcdb6a;
    color:#df5f14;
    }
    #bj{

    /* 0;*/
    /*height: 0;*/
    /*border:1px solid red;*/
    margin-left: 700px;
    margin-top: 22px;
    }
    #bk{
    display: none;
    0;
    height: 0;
    border:1px solid red;
    }
    #kill{
    display: none;
    0;
    height: 0;
    border:1px solid red;
    }
    #biu{
    display: none;
    0;
    height: 0;
    border:1px solid red;
    }
    #next{
    margin-left: 70px;
    cursor: pointer;
    }
    #guize{
    500px;
    height:430px;
    margin-left: 500px;
    margin-top: 60px;
    background-color: lightblue;
    box-shadow: 2px 4px 5px ;
    position: relative;
    display: none;
    }
    #guize p:nth-of-type(1){
    font-size: 18px;
    color:chocolate;
    line-height:60px;
    margin-left: 20px;
    }
    #guize p:nth-of-type(2){
    font-size: 18px;
    color:darkorchid;
    line-height:25px;
    margin-left: 20px;
    }
    #guize p:nth-of-type(3){
    font-size: 18px;
    color:hotpink;
    line-height:25px;
    margin-left: 20px;
    }
    #guize p:nth-of-type(4){
    font-size: 18px;
    color:lightseagreen;
    line-height:25px;
    margin-left: 20px;
    }
    #guize p:nth-of-type(5){
    font-size: 18px;
    color:fuchsia;
    line-height:25px;
    margin-left: 20px;
    }
    #guize p:nth-of-type(6){
    font-size: 22px;
    position: absolute;
    right: 5px;
    top: -20px;
    cursor: pointer;
    }
    #guize p:nth-of-type(6):hover{
    color: red;
    }
    #shuoming{
    600px;
    height:200px;
    margin-left:400px;
    margin-top:180px;
    background-color:#ffd9cc;
    border:1px solid #ffd9cc;
    border-radius: 5px;
    box-shadow: 2px 2px 2px ;
    display: none;
    }
    #shuoming p{
    font-size: 18px;
    color:orchid;
    margin-top: 30px;
    }
    #shuoming p:nth-of-type(2){
    margin-left: 250px;
    }
    #shuoming p:nth-of-type(3){
    76px;
    height:30px;
    background-color: lightcoral;
    color: #090909;
    border-radius: 3px;
    margin-left: 250px;
    cursor: pointer;
    }
    #shuoming p:nth-of-type(3):hover{
    background-color:#30363a;
    color: chocolate;
    }
    </style>
    <body>

    <div id="pauseoff">
    <button id="start" onclick="continuestart()">开始游戏</button>
    <br/>
    <button id="outgame" onclick="outgame()">退出游戏</button>
    <br/>
    <button id="alloutgame" onclick="alloutgame()">结束游戏</button>
    </div>
    <img src="sucai/ui/Pause.png" alt=""id="Pause" onclick="pause()"/>
    <img src="sucai/skill.gif" alt="" id="dazhao"/>
    <div id="playfenshu">
    <img src="sucai/ui/RunnerGame.gif" alt="fen"/>
    <p>当前分数:<span id="thisfenshu"></span></p>
    </div>
    <div id="xueliang">
    <img src="sucai/ui/1.png" alt="xue" id="xue"/>
    <img src="sucai/num/1.gif" alt="" id="gk"/>
    <div id="zhuangtai">
    <img src="sucai/dragon/small/move.gif" alt="zt" id="zt" />
    </div>
    <div id="xue1"></div>
    <div id="xue2"></div>
    <div id="xue3"></div>
    <div id="xue4"></div>
    <div id="lan1"></div>
    <div id="lan2"></div>
    <div id="lan3"></div>
    <div id="lan4"></div>
    <div id="exp1"></div>
    <div id="exp2"></div>
    <div id="exp3"></div>
    </div>
    <div id="jifen">
    <img src="sucai/ui/tipBg.png" alt=""/>
    <img src="sucai/ui/tipY.gif" alt=" " id="next" onclick="outgame()"/>
    <p id="guanka">当前的关卡:<span id="thisgk"></span></p>
    <p id="fenshu">您的分数:<span id="thiszf"></span></p>
    <p id="pingjia">评价:<span id =thispj></span></p>
    </div>
    <div id="game">
    <audio src="sucai/help/21.mp3" id="bj" controls autoplay loop></audio>
    <embed src="sucai/help/13.mp3" id="bk">
    <audio src="sucai/help/27.mp3" id="kill"></audio>
    <audio src="sucai/help/17.mp3" id="biu"></audio>
    <audio src="sucai/help/2314.mp3" id="bianshen" ></audio>
    <div id="anniu">
    <p onclick="gamestart()">开始游戏</p>
    <p onclick="guize()">游戏规则</p>
    <p onclick="alloutgame()">结束游戏</p>
    <p onclick="shuoming()">游戏申明</p>
    </div>
    <div id="guize">
    <p>欢迎进入守卫冒险岛,一起来守卫我们的王国吧。</p>
    <p>1.点击“开始游戏”你就可以进入到我们的王国中了,我们的王国正在被攻击,让我们一起来守卫它吧,战斗吧!英雄!</p>
    <p>2.按下键盘的<span><img src="sucai/help/Help.png" alt="h"/></span>你就可以操控英雄。</p>
    <p>3.按下键盘的 <span><img src="sucai/help/Help1.png" alt="l"/></span>你就可以攻击怪物。</p>
    <p>4.按下键盘的 <span><img src="sucai/help/Help2.png" alt="l"/></span>你就可以开启大招。</p>
    <p onclick="qxguize()">X</p>
    </div>
    <div id="shuoming">
    <p>本游戏由国信安 131部 项目4组 赵宇翔 个人制作,其他人不得抄袭。</p>
    <p>谢谢合作。</p>
    <p onclick="qxshuoming()">关闭说明</p>
    </div>
    </div>
    <script src="maoxiandao.js" charset="utf-8"></script>
    <script type="text/javascript">
    //设置游戏开始之前的动态效果
    /*setInterval(readbgmove,200);*/
    //1.返回id节点的一个函数
    function $(id){
    return document.getElementById(id);
    }
    //规则显示
    function guize(){
    $("guize").style.display="block";
    }
    //规则隐藏
    function qxguize(){
    $("guize").style.display="none";
    }
    //说明显示
    function shuoming(){
    $("shuoming").style.display="block";
    }
    //说明隐藏
    function qxshuoming(){
    $("shuoming").style.display="none";
    }
    var timos=$("kill");
    var biubiu=$("biu");
    var bs=$("bianshen")
    /**
    * 下面放的是各种数组
    */
    var guaiwu1arr=[];
    var guaiwu2arr=[];
    var guaiwu3arr=[];
    var guaiwubossarr=[];
    var play1zidanarr=[];
    //下面是各种需要的全局变量
    var play1;
    var play1zidan;
    var blooul;
    var lefttn=false;
    var toptn=false;
    var bottomtn=false;
    var righttn=false;
    var shoolt=false;
    var thisfenshu=0;
    var guanka=1;
    var pj="c";
    var lanliang=4;
    var dazhaoj
    //这里放的使各种定时器的变量
    var greatguiwu1,moveguaiwu1d,greatguaiwu2,moveguaiwu2d,greatguaiwu3,moveguaiwu3d,greatguaiwuboss,moveguaiwubossd,moveplay1d;
    var moveplay1zidand,moveshooltd,movebloould,zidanpengzhuangd,shoushid,play1pengzhuangd,playdeadd,xiaguand,xuetiaod,bianshend;
    var lanliangd
    function gamestart(){
    //加载进入游戏界面
    $("pauseoff").style.display="none";
    $("dazhao").style.display="none";
    $("game").style.backgroundImage="url(sucai/bg.jpg)";
    $("anniu").style.display="none";
    $("xueliang").style.display="block"
    $("playfenshu").style.display="block";
    $("Pause").style.display="block";
    $("bk").style.display="block";
    $("thisfenshu").innerText=thisfenshu;
    greatguiwu1=setInterval(grearguaiwu1,2000);//创建怪物1
    moveguaiwu1d=setInterval(moveguaiwu1,50);//怪物一的移动方法
    greatguaiwu3=setInterval(grearguaiwu3,3000);//创建怪物3
    moveguaiwu3d=setInterval(moveguaiwu3,60);//怪物3的移动
    moveplay1d=setInterval(moveplay1,10);//玩家移动
    moveplay1zidand=setInterval(moveplay1zidan,10);//玩家子弹的移动
    moveshooltd=setInterval(moveshoolt,100);//玩家移动发射
    movebloould=setInterval(moveblooul,10);//玩家血条移动
    zidanpengzhuangd=setInterval(zidanpengzhuang,10);//子弹和怪物的碰撞
    shoushid=setInterval(shoushi,600);//收集尸体
    play1pengzhuangd=setInterval(playpengzhuang,600);//玩家和怪物的碰撞
    playdeadd=setInterval(playdead,100);//玩家是否死亡
    xiaguand=setInterval(xiaguan,10000);//检测是否进行下一关
    xuetiaod=setInterval(xuetiao,1000);//检测玩家的血量是否减少
    bianshend=setInterval(srcb,600)//检测玩家积分进行变身
    // 这里放的是大BOSS的定时器 等需要的时候调用
    // greatguiwuboss=setInterval(grearguaiwuboss,1000);
    // moveguaiwubossd=setInterval(moveguaiwuboss,60);
    greatplay1();//创建玩家到游戏
    playblooul();//创建玩家血条到游戏
    }
    function gameover(){
    window.clearInterval(greatguiwu1);
    window.clearInterval(movebloould);
    window.clearInterval(moveguaiwu1d);
    window.clearInterval(greatguaiwu2);
    window.clearInterval(moveguaiwu2d);
    window.clearInterval(greatguaiwu3);
    window.clearInterval(moveguaiwu3d);
    window.clearInterval(moveplay1d);
    window.clearInterval(moveplay1zidand);
    window.clearInterval(zidanpengzhuangd);
    window.clearInterval(shoushid);
    window.clearInterval(play1pengzhuangd);
    window.clearInterval(playdeadd);
    window.clearInterval(greatguaiwuboss);
    window.clearInterval(moveguaiwubossd);
    window.clearInterval(xiaguand);
    }
    //创建第一种怪物到加载后的页面上
    function grearguaiwu1(){
    var y = parseInt(Math.random() * 521);
    var gauiwu1=new gauiwu1prototype("sucai/enemy/plane/move.gif",0,y,3,2,59,41);
    guaiwu1arr.push(gauiwu1);
    }
    //让第一种怪物在网页中移动起来
    function moveguaiwu1(){
    for(var i=0;i<guaiwu1arr.length;i++){
    if(parseInt(guaiwu1arr[i].imgNode.style.right)>1100){
    game.removeChild(guaiwu1arr[i].imgNode);
    guaiwu1arr.splice(i,1);
    i--;
    }else{
    guaiwu1arr[i].move();
    }
    }
    }

    //创建第二种怪物到加载后的页面上
    function grearguaiwu2(){
    var y = parseInt(Math.random() * 521);
    var gauiwu2=new gauiwu1prototype("sucai/enemy/ghost/move.gif",0,y,2,5);
    guaiwu2arr.push(gauiwu2);
    }
    //让第二种怪物在网页中移动起来
    function moveguaiwu2(){
    for(var i=0;i<guaiwu2arr.length;i++){
    if(parseInt(guaiwu2arr[i].imgNode.style.right)>1100){
    game.removeChild(guaiwu2arr[i].imgNode);
    guaiwu2arr.splice(i,1);
    i--;
    }else{
    guaiwu2arr[i].move();
    }
    }
    }

    //创建第三种怪物到加载后的页面上
    function grearguaiwu3(){
    var y = parseInt(Math.random() * 561);
    var gauiwu3=new gauiwu1prototype("sucai/enemy/bird/move.gif",0,y,3,2);
    guaiwu3arr.push(gauiwu3);
    }
    //让第三种怪物在网页中移动起来
    function moveguaiwu3(){
    for(var i=0;i<guaiwu3arr.length;i++){
    if(parseInt(guaiwu3arr[i].imgNode.style.right)>1100){
    game.removeChild(guaiwu3arr[i].imgNode);
    guaiwu3arr.splice(i,1);
    i--;
    }else{
    guaiwu3arr[i].move();
    }
    }
    }
    //创建怪物boss到加载后的页面上
    function grearguaiwuboss(){
    var y = parseInt(Math.random() * 580);
    var gauiwuboss=new gauiwu1prototype("sucai/enemy/boss/move.gif",0,y,1,15);
    guaiwubossarr.push(gauiwuboss);
    }
    //让第怪物boss在网页中移动起来
    function moveguaiwuboss(){
    for(var i=0;i<guaiwubossarr.length;i++){
    if(parseInt(guaiwubossarr[i].imgNode.style.right)>1100){
    game.removeChild(guaiwubossarr[i].imgNode);
    guaiwubossarr.splice(i,1);
    i--;
    }else{
    guaiwubossarr[i].move();
    }
    }
    }
    //创建玩家到加载后的页面上
    function greatplay1(){

    play1=new play1prototype("sucai/dragon/small/move.gif",1100,280,5,7,57,52);

    }
    //让玩家在网页中移动起来1.监听网页的按键
    //玩家按下按键时的监听与判断
    document.body.onkeydown=function() {
    var e = window.event || arguments[0];
    // console.log(e.keyCode);
    if (e.keyCode == 37) {
    lefttn = true;
    }
    if (e.keyCode == 38) {
    toptn = true;
    }
    if (e.keyCode == 39) {
    righttn = true;
    }
    if (e.keyCode == 40) {
    bottomtn = true;
    }
    if (e.keyCode == 32) {
    shoolt = true;
    biubiu.currentTime = 0;
    biubiu.play();
    play1.shoolt();
    if(thisfenshu<30){
    play1.imgNode.src="sucai/dragon/small/magicmissile.gif";
    }
    if(thisfenshu>30){
    play1.imgNode.src="sucai/dragon/middle/magicmissile.gif";
    }
    if(thisfenshu>100){
    play1.imgNode.src="sucai/dragon/large/magicmissile.gif";
    }
    if(thisfenshu>150){
    play1.imgNode.src="sucai/dragon/big/magicmissile.gif";
    }


    }
    //玩家按下大招并判断蓝量的多少,
    if(e.keyCode==13){
    lanliang-=1;
    dazhaoj();
    if(lanliang==3){
    $("lan4").style.display="none";
    }
    if(lanliang==2){
    $("lan3").style.display="none";
    }
    if(lanliang==1){
    $("lan2").style.display="none";
    }
    if(lanliang==0){
    $("lan1").style.display="none";
    }
    if(lanliang<0){
    $("dazhao").src="";
    $("game").removeChild("kill");
    }
    timos.currentTime = 0;
    timos.play();
    }
    }
    //玩家松开按键时的监听与判断
    document.body.onkeyup = function () {
    var e = window.event || arguments[0];
    // console.log(e.keyCode);
    if (e.keyCode == 37) {
    lefttn = false;
    }
    if (e.keyCode == 38) {
    toptn = false;
    }
    if (e.keyCode == 39) {
    righttn = false;
    }
    if (e.keyCode == 40) {
    bottomtn = false;
    }
    if(e.keyCode==32){
    shoolt = false;
    setTimeout(srcb,500)

    }
    }
    //玩家发射子弹变身的函数
    function srcb(){
    if(thisfenshu<30){
    play1.imgNode.src="sucai/dragon/small/move.gif";
    $("zt").src="sucai/dragon/small/move.gif";
    for(var i=0;i<play1zidanarr.length;i++){
    play1zidanarr[i].imgNode.src="sucai/dragon/small/att.gif"
    }
    }
    if(thisfenshu>30){
    play1.imgNode.src="sucai/dragon/middle/move.gif";
    $("zt").src="sucai/dragon/middle/move.gif";
    for(var i=0;i<play1zidanarr.length;i++){
    play1zidanarr[i].imgNode.src="sucai/dragon/middle/att.gif"
    }
    // bianshen.shoolt();
    // bianshen.play();
    }
    if(thisfenshu>100){
    play1.imgNode.src="sucai/dragon/large/move.gif";
    $("zt").src="sucai/dragon/large/move.gif";
    for(var i=0;i<play1zidanarr.length;i++){
    play1zidanarr[i].imgNode.src="sucai/dragon/large/att.gif"
    }
    }
    if(thisfenshu>150){
    play1.imgNode.src="sucai/dragon/big/move.gif";
    $("zt").src="sucai/dragon/big/move.gif";
    }
    }
    // 给玩家添加按下移动按键后玩家的移动方法
    function moveplay1() {
    if (lefttn) {
    play1.moveleft();
    }
    if (toptn) {
    play1.movetop();
    }
    if (righttn) {
    play1.moveright();
    }
    if (bottomtn) {
    play1.movebottom();
    }
    }
    //子弹移动的方法
    function moveplay1zidan(){
    for(var i= 0;i<play1zidanarr.length;i++){
    if(parseInt(play1zidanarr[i].imgNode.style.right)<0){
    $("game").removeChild(play1zidanarr[i].imgNode);
    play1zidanarr.splice(i,1);
    i--;
    }else{
    play1zidanarr[i].move();
    }

    }
    }
    //飞机在移动时发射子弹的方法
    function moveshoolt(){
    if(shoolt==true){
    play1.shoolt();
    biubiu.play();
    }
    }
    //给玩家创建一个显示头部的血条
    function playblooul(){
    var x=1105;
    var y=270;
    blooul=new playbloouprototype("sucai/ui/boom/boom7.png",x,y,5);
    }
    //给玩家的血条添加移动的方法
    function moveblooul(){
    if (lefttn) {
    blooul.moveleft();
    }
    if (toptn) {
    blooul.movetop();
    }
    if (righttn) {
    blooul.moveright();
    }
    if (bottomtn) {
    blooul.movebottom();
    }
    }
    function zidanpengzhuang(){
    var play1zidanright,play1zidantop,guaiwu1right,guaiwu1top,guaiwu2right,guaiwu2top;
    var guaiwu3right,guaiwu3top,bossarrright,bossarrtop,play1right,play1top;
    play1right=parseInt(play1.imgNode.style.right);
    play1top=parseInt(play1.imgNode.style.top);
    for(var i=0;i<play1zidanarr.length;i++){
    play1zidanright=parseInt(play1zidanarr[i].imgNode.style.right);
    play1zidantop=parseInt(play1zidanarr[i].imgNode.style.top);
    for(var j=0;j<guaiwu1arr.length;j++){
    guaiwu1right=parseInt(guaiwu1arr[j].imgNode.style.right);
    guaiwu1top=parseInt(guaiwu1arr[j].imgNode.style.top);
    if(guaiwu1arr[j].isdead==false){
    if(play1zidanright+30<=guaiwu1right+59&&play1zidanright>=guaiwu1right&&play1zidantop+21>=guaiwu1top&&play1zidantop+21<=guaiwu1top+62){
    $("game").removeChild(play1zidanarr[i].imgNode);
    play1zidanarr.splice(i,1);
    i--;

    guaiwu1arr[j].bloou-=1;
    if(guaiwu1arr[j].bloou<0){
    thisfenshu+=1;
    guaiwu1arr[j].isdead=true;
    guaiwu1arr[j].imgNode.src="sucai/enemy/plane/die.gif"
    }
    }
    }
    for(var n= 0;n<guaiwu3arr.length;n++){
    guaiwu3right=parseInt(guaiwu3arr[n].imgNode.style.right);
    guaiwu3top=parseInt(guaiwu3arr[n].imgNode.style.top);
    if(guaiwu3arr[n].isdead==false){
    if(play1zidanright+30<=guaiwu3right+59&&play1zidanright>=guaiwu3right&&play1zidantop+21>=guaiwu3top&&play1zidantop+21<=guaiwu3top+62){
    $("game").removeChild(play1zidanarr[i].imgNode);
    play1zidanarr.splice(i,1);
    i--;

    guaiwu3arr[n].bloou-=1;
    if(guaiwu3arr[n].bloou<0){
    thisfenshu+=3;
    guaiwu3arr[n].isdead=true;
    guaiwu3arr[n].imgNode.src="sucai/enemy/bird/die.gif"
    }
    }
    }
    for(var k=0;k<guaiwu2arr.length;k++){
    guaiwu2right=parseInt(guaiwu2arr[k].imgNode.style.right);
    guaiwu2top=parseInt(guaiwu2arr[k].imgNode.style.top);
    if(guaiwu2arr[k].isdead==false){
    if(play1zidanright+30<=guaiwu2right+59&&play1zidanright>=guaiwu2right&&play1zidantop+21>=guaiwu2top&&play1zidantop+21<=guaiwu2top+62){
    $("game").removeChild(play1zidanarr[i].imgNode);
    play1zidanarr.splice(i,1);
    i--;

    guaiwu2arr[k].bloou-=1;
    if(guaiwu2arr[k].bloou<0){
    thisfenshu+=5;
    guaiwu2arr[k].isdead=true;
    guaiwu2arr[k].imgNode.src="sucai/enemy/ghost/die.gif"
    }
    }
    }
    for(var m= 0;m<guaiwubossarr.length;m++){
    bossarrright=parseInt(guaiwubossarr[m].imgNode.style.right);
    bossarrtop=parseInt(guaiwubossarr[m].imgNode.style.top);

    if(guaiwubossarr[m].isdead==false){
    if(play1zidanright+30<=bossarrright+59&&play1zidanright>=bossarrright&&play1zidantop+21>=bossarrtop&&play1zidantop+21<=bossarrtop+62){
    $("game").removeChild(play1zidanarr[i].imgNode);
    play1zidanarr.splice(i,1);
    i--;

    guaiwubossarr[m].bloou-=1;
    if(guaiwubossarr[m].bloou<0){
    thisfenshu+=10;
    guaiwubossarr[m].isdead=true;
    guaiwubossarr[m].imgNode.src="sucai/enemy/boss/die.gif"
    }
    }
    }
    }


    }
    }
    }
    }
    }
    /**
    * 玩家和怪物的碰撞事件
    * 判断玩家本身是否和怪物碰撞,如果发生碰撞,怪物死亡,玩家血量-1;
    */
    function playpengzhuang(){
    var guaiwu1right,guaiwu1top,guaiwu2right,guaiwu2top;
    var guaiwu3right,guaiwu3top,bossarrright,bossarrtop,play1right,play1top;
    play1right=parseInt(play1.imgNode.style.right);
    play1top=parseInt(play1.imgNode.style.top);
    for(var j=0;j<guaiwu1arr.length;j++){
    guaiwu1right=parseInt(guaiwu1arr[j].imgNode.style.right);
    guaiwu1top=parseInt(guaiwu1arr[j].imgNode.style.top);
    if(play1.isdead==false){
    if(play1right>guaiwu1right&&play1right-118<guaiwu1right-59&&play1top>=guaiwu1top-52&&play1top+52<=guaiwu1top+93){
    play1.bloou-=1;
    guaiwu1arr[j].isdead=true;
    if(guaiwu1arr[j].isdead==true){
    play1.bloou=play1.bloou;
    console.log(play1.bloou)
    guaiwu1arr[j].imgNode.src="sucai/enemy/plane/die.gif";
    }

    }
    }
    }
    for(var n= 0;n<guaiwu3arr.length;n++){
    guaiwu3right=parseInt(guaiwu3arr[n].imgNode.style.right);
    guaiwu3top=parseInt(guaiwu3arr[n].imgNode.style.top);

    if(play1.isdead==false){
    if(play1right>guaiwu3right&&play1right-118<guaiwu3right-59&&play1top>=guaiwu3top-52&&play1top+52<=guaiwu3top+93){
    play1.bloou-=1;
    guaiwu3arr[n].isdead=true;
    if(guaiwu3arr[n].isdead==true){
    play1.bloou=play1.bloou;
    console.log(play1.bloou)
    guaiwu3arr[n].imgNode.src="sucai/enemy/bird/die.gif";
    }

    }
    }

    }
    for(var k=0;k<guaiwu2arr.length;k++){
    guaiwu2right=parseInt(guaiwu2arr[k].imgNode.style.right);
    guaiwu2top=parseInt(guaiwu2arr[k].imgNode.style.top);
    if(play1.isdead==false){
    if(play1right>guaiwu2right&&play1right-118<guaiwu2right-59&&play1top>=guaiwu2top-52&&play1top+52<=guaiwu2top+93){
    play1.bloou-=1;
    guaiwu2arr[k].isdead=true;
    if(guaiwu2arr[k].isdead==true){
    play1.bloou=play1.bloou;
    console.log(play1.bloou)
    guaiwu2arr[k].imgNode.src="sucai/enemy/ghost/die.gif";
    }

    }
    }
    }
    for(var m= 0;m<guaiwubossarr.length;m++){
    bossarrright=parseInt(guaiwubossarr[m].imgNode.style.right);
    bossarrtop=parseInt(guaiwubossarr[m].imgNode.style.top);

    if(play1.isdead==false){
    if(play1right>bossarrright&&play1right-118<bossarrright-59&&play1top>=bossarrtop-52&&play1top+52<=bossarrtop+93){
    play1.bloou-=1;
    guaiwu2arr[k].isdead=true;
    if(guaiwu2arr[k].isdead==true){
    play1.bloou=play1.bloou;
    console.log(play1.bloou)
    guaiwu2arr[k].imgNode.src="sucai/enemy/ghost/die.gif";
    }

    }
    }

    }



    }
    //判断玩家血量是否小于0,如果小于1 收掉所有尸体
    function playdead(){
    if(play1.bloou<1){
    for(var j=0;j<guaiwu1arr.length;j++){
    if(guaiwu1arr[j].isdead==false){
    guaiwu1arr[j].isdead=true;
    }

    }
    for(var n= 0;n<guaiwu3arr.length;n++){
    if( guaiwu3arr[n].isdead==false){
    guaiwu3arr[n].isdead=true;
    }
    }
    for(var k=0;k<guaiwu2arr.length;k++){
    if( guaiwu2arr[k].isdead==false){
    guaiwu2arr[k].isdead=true;
    }
    }
    for(var m= 0;m<guaiwubossarr.length;m++){
    if( guaiwubossarr[m].isdead==false)
    guaiwubossarr[m].isdead=true;
    }
    play1.imgNode.src="sucai/dragon/small/hit.gif";
    play1.isdead=true;
    $("game").innerHTML="" ;
    gameover();
    $("jifen").style.display="block";
    $("thiszf").innerText=thisfenshu;
    $("thisgk").innerText=guanka;
    $("thispj").innerText=pj;
    var shiti=$("game").getElementsByTagName("img");
    for(var i=0;i<shiti.length;i++){
    $("game").removeChild(shiti[i]);
    }
    }

    }
    //判断当怪物死后收掉怪物的尸体
    function shoushi(){
    for(var i=0;i<guaiwu1arr.length;i++){
    if(guaiwu1arr[i].isdead==true){
    $("game").removeChild(guaiwu1arr[i].imgNode);
    guaiwu1arr.splice(i,1);
    i--;
    $("thisfenshu").innerText=thisfenshu;
    }
    }
    for(var n=0;n<guaiwu3arr.length;n++){
    if(guaiwu3arr[n].isdead==true){
    $("game").removeChild(guaiwu3arr[n].imgNode);
    guaiwu3arr.splice(n,1);
    n--;
    $("thisfenshu").innerText=thisfenshu;
    }
    }
    for(var k=0;k<guaiwu2arr.length;k++){
    if(guaiwu2arr[k].isdead==true){
    $("game").removeChild(guaiwu2arr[k].imgNode);
    guaiwu2arr.splice(k,1);
    k--;
    $("thisfenshu").innerText=thisfenshu;

    }
    }
    for(var m= 0;m<guaiwubossarr.length;m++) {
    if (guaiwubossarr[m].isdead == true) {
    $("game").removeChild(guaiwubossarr[m].imgNode);
    guaiwubossarr.splice(m, 1);
    m--;
    $("thisfenshu").innerText=thisfenshu;
    }
    }

    if(play1.isdead==true){
    $("game").removeChild(play1.imgNode);
    $("thisfenshu").innerText=thisfenshu;
    }
    }
    //进入第下一关;
    function xiaguan(){
    if(thisfenshu>30){
    // 这里放的是蝙蝠的定时器
    greatguaiwu2=setInterval(grearguaiwu2,10000);
    moveguaiwu2d=setInterval(moveguaiwu2,120);
    guanka=2;
    pj="B";
    $("gk").src="sucai/num/2.gif";
    $("exp1").style.display="block";
    // play1.imgNode.src="sucai/dragon/middle/move.gif";
    // play1zidan.imgNode.src="sucai/dragon/middle/att.gif";
    if(thisfenshu>100){
    // 这里放的是大BOSS的定时器
    greatguaiwuboss=setInterval(grearguaiwuboss,50000);
    moveguaiwubossd=setInterval(moveguaiwuboss,150);
    guanka=3;
    pj="A";
    $("gk").src="sucai/num/3.gif";
    $("exp2").style.display="block";
    }
    if(thisfenshu>150){
    greatguiwu1=setInterval(grearguaiwu1,1500);
    moveguaiwu1d=setInterval(moveguaiwu1,100);
    guanka=4;
    pj="S";
    $("gk").src="sucai/num/4.gif";
    $("exp3").style.display="block";
    }
    if(thisfenshu>249){
    greatguaiwu3=setInterval(grearguaiwu3,2000);//创建怪物3
    moveguaiwu3d=setInterval(moveguaiwu3,80);//怪物3的移动
    guanka=5;
    pj="SS";
    $("gk").src="sucai/num/5.gif";
    }
    if(thisfenshu>500){
    greatguaiwu2=setInterval(grearguaiwu2,9000);
    moveguaiwu2d=setInterval(moveguaiwu2,100);
    guanka=6;
    pj="SSS";
    $("gk").src="sucai/num/6.gif";
    }
    if(thisfenshu>1500){
    greatguaiwu3=setInterval(grearguaiwu3,1800);//创建怪物3
    moveguaiwu3d=setInterval(moveguaiwu3,60);//怪物3的移动
    guanka=7;
    pj="SSSS";
    $("gk").src="sucai/num/7.gif";
    }

    }
    }
    //玩家的血条减少
    function xuetiao(){
    switch (play1.bloou){
    case 0:
    blooul.imgNode.src="sucai/ui/boom/boom0.png";
    $("xue1").style.display="none";
    break;
    case 1:
    blooul.imgNode.src="sucai/ui/boom/boom1.png";
    break;
    case 2:
    blooul.imgNode.src="sucai/ui/boom/boom2.png";
    $("xue2").style.display="none";
    break;
    case 3:
    blooul.imgNode.src="sucai/ui/boom/boom3.png";
    $("xue3").style.display="none";
    break;
    case 4:
    blooul.imgNode.src="sucai/ui/boom/boom4.png";
    break;
    case 5:
    blooul.imgNode.src="sucai/ui/boom/boom5.png";
    $("xue4").style.display="none";
    break;
    case 6:
    blooul.imgNode.src="sucai/ui/boom/boom6.png";
    break;
    case 7:
    blooul.imgNode.src="sucai/ui/boom/boom7.png";

    break;
    }
    }
    //玩家按下大招的方法
    function dazhaoj() {
    $("dazhao").style.display="block";
    $("dazhao").style.display="block";
    for(var j=0;j<guaiwu1arr.length;j++){
    if(guaiwu1arr[j].isdead==false){
    guaiwu1arr[j].isdead=true;
    thisfenshu+=2;
    }
    }
    for(var n= 0;n<guaiwu3arr.length;n++){
    if( guaiwu3arr[n].isdead==false)
    guaiwu3arr[n].isdead=true;
    thisfenshu+=3;
    }
    for(var k=0;k<guaiwu2arr.length;k++){
    if(guaiwu2arr[k].isdead==false){
    guaiwu2arr[k].isdead=true;
    thisfenshu+=5;
    }
    }
    for(var m= 0;m<guaiwubossarr.length;m++){
    if(guaiwubossarr[m].isdead==false)
    guaiwubossarr[m].isdead=true;
    thisfenshu+=10;
    }
    setTimeout(qinchudazhao,1500);
    }
    //清除大招的方法
    function qinchudazhao(){
    $("dazhao").style.display="none";
    }
    //暂停游戏的方法
    function pause(){
    $("pauseoff").style.display="block";
    gameover();
    }
    //重新开始游戏地方法
    function continuestart(){
    //加载进入游戏界面
    $("pauseoff").style.display="none";
    $("dazhao").style.display="none";
    $("game").style.backgroundImage="url(sucai/bg.jpg)";
    $("anniu").style.display="none";
    $("xueliang").style.display="block"
    $("playfenshu").style.display="block";
    $("Pause").style.display="block";
    $("thisfenshu").innerText=thisfenshu;
    greatguiwu1=setInterval(grearguaiwu1,2000);//创建怪物1
    moveguaiwu1d=setInterval(moveguaiwu1,50);//怪物一的移动方法
    greatguaiwu3=setInterval(grearguaiwu3,3000);//创建怪物3
    moveguaiwu3d=setInterval(moveguaiwu3,60);//怪物3的移动
    moveplay1d=setInterval(moveplay1,10);//玩家移动
    moveplay1zidand=setInterval(moveplay1zidan,10);//玩家子弹的移动
    moveshooltd=setInterval(moveshoolt,100);//玩家移动发射
    movebloould=setInterval(moveblooul,10);//玩家血条移动
    zidanpengzhuangd=setInterval(zidanpengzhuang,10);//子弹和怪物的碰撞
    shoushid=setInterval(shoushi,600);//收集尸体
    play1pengzhuangd=setInterval(playpengzhuang,600);//玩家和怪物的碰撞
    playdeadd=setInterval(playdead,100);//玩家是否死亡
    xiaguand=setInterval(xiaguan,3000);//检测是否进行下一关
    xuetiaod=setInterval(xuetiao,1000);//检测玩家的血量是否减少
    bianshend=setInterval(srcb,600)//检测玩家积分进行变身
    }
    //退出当前游戏的方法
    function outgame(){
    location.reload()
    }
    //推出整个游戏页面
    function alloutgame(){
    window.close()
    }



    //这里是所需要的JS原型

    /**玩家的原型属性:
    * 1.@param imgsrc 玩家图片的地址.
    * 2.玩家的生成地址 x y.
    * 3.玩家移动的速度 sudu.
    * 4.玩家的血量 bloou.
    * 5.玩家的创建方法 creat().
    */
    var game=document.getElementById("game");
    function play1prototype(imgsrc,x,y,sudu,bloou,width,height){
    this.img=imgsrc;
    this.imgNode=document.createElement("img");
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
    this.isdead=false;
    this.sudu=sudu;
    this.bloou=bloou;
    this.movebottom=function(){
    if(parseInt( this.imgNode.style.top)<540){
    this.imgNode.style.top=parseInt( this.imgNode.style.top)+this.sudu+"px";
    }

    }
    this.movetop=function(){
    if(parseInt( this.imgNode.style.top)>0){
    this.imgNode.style.top=parseInt( this.imgNode.style.top)-this.sudu+"px";
    }
    }
    this.moveleft=function(){
    //console.log(this.imgNode.style.left);
    if(parseInt( this.imgNode.style.right)<1150){
    this.imgNode.style.right=parseInt( this.imgNode.style.right)+this.sudu+"px";
    }

    }
    this.moveright=function(){
    if(parseInt( this.imgNode.style.right)>0){
    this.imgNode.style.right=parseInt( this.imgNode.style.right)-this.sudu+"px";
    }
    }
    this.creat=function(){
    this.imgNode.src= this.img;
    this.imgNode.style.position="absolute";
    this.imgNode.style.top=this.y+"px";
    this.imgNode.style.right=this.x+"px";
    game.appendChild(this.imgNode);
    }
    this.shoolt=function(){
    var x=parseInt(this.imgNode.style.right)-35;
    var y=parseInt(this.imgNode.style.top)+15;
    //console.log(x)
    play1zidan=new playzidanprototype("sucai/dragon/small/att.gif",x,y,5);
    play1zidanarr.push(play1zidan);
    }
    this.creat();
    }



    /**创建玩家子弹的原型
    *
    * @param imgsrc 子弹的地址
    * @param x 子弹产生的X轴
    * @param y 子弹产生的Y轴
    * @param sudu 子弹移动的速度
    */

    function playzidanprototype(imgsrc,x,y,sudu){
    this.img=imgsrc;
    this.imgNode=document.createElement("img");
    this.x=x;
    this.y=y;
    this.sudu=sudu;
    this.move=function(){
    this.imgNode.style.right=parseInt(this.imgNode.style.right)-this.sudu+"px";
    }
    this.creat=function(){
    this.imgNode.src=this.img;
    this.imgNode.style.position="absolute";
    this.imgNode.style.top=y+"px";
    this.imgNode.style.right=x+"px";
    game.appendChild(this.imgNode);
    }
    this.creat();
    }


    /**创建玩家血条的原型
    * 1.血条的图片地址SRC
    * 2.血条的x
    * 3血条的Y
    * 4.血条的创建
    */
    function playbloouprototype(imgsrc,x,y,sudu){
    this.imgsrc=imgsrc;
    this.imgNode=document.createElement("img");
    this.x=x;
    this.y=y;
    this.sudu=sudu;
    this.creat=function(){
    this.imgNode.src=this.imgsrc;
    this.imgNode.style.position="absolute";
    this.imgNode.style.top=y+"px";
    this.imgNode.style.right=x+"px";
    game.appendChild(this.imgNode);
    }
    this.movebottom=function(){
    if(parseInt( this.imgNode.style.top)<540){
    this.imgNode.style.top=parseInt( this.imgNode.style.top)+this.sudu+"px";
    }

    }
    this.movetop=function(){
    if(parseInt( this.imgNode.style.top)>-10){
    this.imgNode.style.top=parseInt( this.imgNode.style.top)-this.sudu+"px";
    }
    }
    this.moveleft=function(){
    //console.log(this.imgNode.style.left);
    if(parseInt( this.imgNode.style.right)<1160){
    this.imgNode.style.right=parseInt( this.imgNode.style.right)+this.sudu+"px";
    }

    }
    this.moveright=function(){
    if(parseInt( this.imgNode.style.right)>10){
    this.imgNode.style.right=parseInt( this.imgNode.style.right)-this.sudu+"px";
    }
    }
    this.creat();
    }


    //进入游戏第一件事,创建怪物的原型//
    /**怪物的原型属性:
    * 1.@param imgsrc 怪物图片的地址.
    * 2.怪物的生成地址 x y.
    * 3.怪物移动的速度 sudu.
    * 4.怪物的血量 bloou.
    * 5.怪物的创建方法 creat().
    */

    function gauiwu1prototype(imgsrc,x,y,sudu,bloou,width,height){
    this.img=imgsrc;
    this.imgNode=document.createElement("img");
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
    this.isdead=false;
    this.sudu=sudu;
    this.bloou=bloou;
    this.move=function(){
    this.imgNode.style.right=parseInt( this.imgNode.style.right)+this.sudu+"px";
    };
    this.creat=function(){
    this.imgNode.src= this.img;
    this.imgNode.style.position="absolute";
    this.imgNode.style.top=this.y+"px";
    this.imgNode.style.right=this.x+"px";
    game.appendChild(this.imgNode);
    }
    this.creat();
    }



    </script>
    </body>
    </html>
  • 相关阅读:
    Myeclipse安装svn插件
    Hudson+Maven+Svn搭建持续集成环境
    svn merge和branch分析
    Linux下安装subversion1.6.5和apache2
    C语言中,为什么字符串可以赋值给字符指针变量
    Loadrunner C 编程_1
    oracle解决多表关联分组查询问题
    学习英语
    使用 JMeter 完成常用的压力测试 [转]
    Jmeter零起点学习
  • 原文地址:https://www.cnblogs.com/doubolexiang/p/6710257.html
Copyright © 2011-2022 走看看