當前位置：
首頁 >
用javascript打造一个简单的小人互殴系统（实现javascript游戏基本要素：生命值、伤害、移动、闪避等）
發布時間：2025/4/16
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
用javascript打造一个简单的小人互殴系统（实现javascript游戏基本要素：生命值、伤害、移动、闪避等）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個東西，還是和上次那個太陽系模型一樣，是我在在職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 collisionfor(var i=0;i<Basket.length;i++){for(var j=0;j<Men.length;j++){// && Basket[i].x<Men[j].x+30if(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>把上面那些圖片下載下來保存成如上即可，圖片并不重要，可以替換成自己的東西。最后加一張群毆效果圖：
搞定。
總結
以上是生活随笔為你收集整理的用javascript打造一个简单的小人互殴系统（实现javascript游戏基本要素：生命值、伤害、移动、闪避等）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用javascript伪造太阳系模型系统
- 下一篇： 百度网盘javascript加速视频播放