用javascript打造一个简单的小人互殴系统（实现javascript游戏基本要素：生命值、伤害、移动、闪避等）

于 2021-02-11 10:35:48 发布
阅读量617 收藏 7
点赞数
分类专栏： HTML/HTML5 Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinolzeng/article/details/113788748
版权

这个东西，还是和上次那个太阳系模型一样，是我在在职MBA课堂上无聊时随便做的，图片是随便弄的，因为是闹着玩的，所以并没有使用html5或者svg。

简单说，这个东西给人物加了碰撞检测和血条、伤害计算等等一些游戏里面最基本的元素，每个小人会随机选择场上的另一个小人为目标向它发射攻击的球球，球球如果命中敌方，敌方就会受到伤害，血量为零就挂了。每个小人都会在画面里面随机移动，至少不能傻站着挨打吧。

没考虑那些什么复杂的闪避了，毕竟只是我随手之作，之所以发到CSDN上面仅作备忘之用，当然，也许可以给无意间搜到我这篇文章的人一点帮助。

<html>
<style type="text/css">
    p{margin:0;padding:0}
</style>
<body style="width:100%;height:100%;margin:0;padding:0;background-color:rgb(220,220,220);overflow:hidden;">
<div style="position:absolute;z-index:400;right:0;bottom:0;">
<div id="sumMen" style="width:100px;"></div>
<div id="sumBasket" style="width:100px;"></div>

</div>
</body>
<script>
var names = [
'Adam','Alex',
'Bob','Bruce',
'Carl','Colin',
'David','Dennis',
'Edward','Edgar',
'Franklin','Fred',
'Gabriel','George',
'Hunk','Henry',
'Ivan','Issac',
'Jack','Jerry',
'Ken','Kevin',
'Leo','Luke',
'Mary','Marks',
'Neil','Nicholas',
'Oliver','Oscar',
'Peter','Philip',
'Quentin','Queen',
'Randy','Rex',
'Sam','Simon',
'Tom','Tyler',
'Uno','Ub',
'Van','Vincent',
'Wesley','William',
'Xio','Xar',
'Yell','Yeti',
'Zero','Zeg'
];
var w = window.innerWidth;
var h = window.innerHeight;

var Basket = [];
var Men = [];
var Man = function(){
    var man = this;
    man.name = names[Math.floor(Math.random()*names.length)];
    man.index = Math.floor(Math.random()*(6-1+1))+1;
    man.x = Math.random()*(w-35);
    man.y =Math.random()*(h-90);

    man.HP = 50;
    man.maxHP = man.HP;

    man.sx = (Math.random()>0.5?-1:1) * Math.floor(Math.random()*2+0.5);
    man.sy = (Math.random()>0.5?-1:1) * Math.floor(Math.random()*2+0.5);

    man.cx = man.x + 10;
    man.cy = man.y + 30;

    man.shell = document.createElement("div");
    man.shell.style = 'width:30px;position:absolute;left:'+ man.x + ";top:" + man.y + ";";

    man.blood_bgbar = document.createElement("div");
    man.blood_bgbar.style = 'position:absolute;top:0;left:0;background-color:gray;width:30px;height:10px;';
    man.shell.appendChild(man.blood_bgbar);

    man.blood_bar = document.createElement("div");
    man.blood_bar.style = 'position:absolute;top:0;left:0;background-color:springgreen;width:30px;height:10px;';
    man.shell.appendChild(man.blood_bar);

    man.image = document.createElement("img");
    man.image.style = "position:absolute;top:15px;";
    man.image_anchor = this.index + ".png";
    man.image.src = this.image_anchor;
    man.shell.appendChild(man.image);

    man.attack = Math.random()*2;

    man.froze = document.createElement("div");
    man.froze.style = 'position:absolute;top:80;left:0;background-color:skyblue;width:30px;height:3px;';
    man.shell.appendChild(man.froze);

    man.label = document.createElement("div");
    man.label.style = 'position:absolute;top:83;left:0;text-align:center;font-size:10px;width:30px;';
    man.label.innerText = man.name;
    man.shell.appendChild(man.label);

    man.loadingtime = 0;
    man.canshoot = true;
    man.frozetime = Math.floor(Math.random()*1500)+1000;
    man.shootspeed = Math.floor(Math.random()*4+2);

    document.body.appendChild(this.shell);

    man.shoot = function(t){
        man.loadingtime += t;
        man.froze.style.width = (man.loadingtime/man.frozetime)*30 + "px";
        if(man.loadingtime>=man.frozetime){
            man.canshoot = true;
            man.loadingtime -= man.frozetime;
        }
        if(Men.length==1) return;
        if(!man.canshoot) return;
        var enemy;
        while(true){
            enemy = Men[Math.floor(Math.random()*Men.length)];
            if(enemy!=man){
                break;
            }
        }
        var ball = document.createElement("div");
        ball.x = man.cx;
        ball.y = man.cy;
        ball.speed = man.shootspeed;
        ball.style = "width:10px;height:10px;background-color:RoyalBlue;border-radius:10px;position:absolute;left:" + ball.x + ";top:" + ball.y + ";";
        ball.living = true;
        ball.angle = Math.atan2((enemy.cy-ball.y),(enemy.cx-ball.x));
        ball.sx = ball.speed * Math.cos(ball.angle);
        ball.sy = ball.speed * Math.sin(ball.angle);
        ball.master = man;
        document.body.appendChild(ball);
        Basket.push(ball);
        man.canshoot = false;
    }
    man.walk = function(t){
        if(Math.random()<0.1) man.sx = (Math.random()>0.5?-1:1) * Math.floor(Math.random()*2+0.5);
        if(Math.random()<0.1) man.sy = (Math.random()>0.5?-1:1) * Math.floor(Math.random()*2+0.5);
        //man.sy = (Math.random()>0.5?-1:1) * Math.floor(Math.random()*2+0.5);
        man.x += man.sx * t /10;
        man.y += man.sy * t /10;
        man.shell.style.left = man.x;
        man.shell.style.top = man.y;
        man.cx = man.x + 10;
        man.cy = man.y + 30;
        if(man.x < 0) { man.x = 0; man.sx = -man.sx; }
        if(man.x > w-35 ) { man.x = w-35; man.sx = -man.sx; }
        if(man.y < 0) { man.y = 0; man.sy = -man.sy;}
        if(man.y > h-85) { man.y = h-90; man.sy = -man.sy; }
    }
    man.hurt = function(){
        man.image.src = "hurt.png";
        man.HP -= 1+man.attack;
        man.blood_bar.style.width = man.HP/man.maxHP*30 + "px";
        setTimeout(function(){
            man.image.src = man.image_anchor;
        },300);
    }
}

function init(){
    for(var i=0;i<1000;i++){
        Men.push(new Man());
    }
}

function id(x){return document.getElementById(x);}

var sumBasket = id("sumBasket");
var sumMen = id("sumMen");

var starttime = new Date();
var endtime = new Date();
var lerp = endtime - starttime;
function raf(){
    endtime = new Date();
    lerp =  endtime - starttime;
    for(var i=0;i<Men.length;i++){
        Men[i].walk(lerp);
        Men[i].shoot(lerp);
    }
    //check collision
    for(var i=0;i<Basket.length;i++){
        for(var j=0;j<Men.length;j++){
        // &&  Basket[i].x<Men[j].x+30
            if(Basket[i].master!=Men[j] && Basket[i].x < Men[j].x+30 && Basket[i].x > Men[j].x &&  Basket[i].y>Men[j].y  &&  Basket[i].y<Men[j].y+85){
                Basket[i].living = false;
                Men[j].hurt();
            }
        }
    }


    for(var i=0;i<Basket.length;i++){
        Basket[i].x += Basket[i].sx * lerp / 10;
        Basket[i].y += Basket[i].sy * lerp / 10;
        Basket[i].style.left =  Basket[i].x;
        Basket[i].style.top =  Basket[i].y;
        if(Basket[i].x<-10 || Basket[i].x>w+10 || Basket[i].y<-10 || Basket[i].y>h+10 || Basket[i].living==false){
            document.body.removeChild(Basket[i]);
            delete Basket[i];
        }
    }
    var temp = [];
    for(var i=0;i<Basket.length;i++){
        if(Basket[i]!==undefined){
            temp.push(Basket[i]);
        }
    }
     Basket = temp;


    for(var j=0;j<Men.length;j++){
        if(Men[j].HP <= 0){
            document.body.removeChild(Men[j].shell);
            delete Men[j];

            if(Men.length<=10){
                 for(var i=0;i<Math.random()*2000+1;i++){
                 Men.push(new Man())}
            }
            //if(Math.random()*250>Men.length){
            //    Men.push(new Man());
            //}
        }
    }
    var temp = [];
    for(var i=0;i<Men.length;i++){
        if(Men[i]!==undefined){
            temp.push(Men[i]);
        }
    }
    Men = temp;

    requestAnimationFrame(raf);
    starttime = endtime;

    sumMen.innerText = "人数："+ Men.length;
    sumBasket.innerText = "子弹数：" + Basket.length;

}

init();
requestAnimationFrame(raf);
</script>
</html>

把上面那些图片下载下来保存成如上即可，图片并不重要，可以替换成自己的东西。最后加一张群殴效果图：

搞定。

sinolzeng
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值