这个东西,还是和上次那个太阳系模型一样,是我在在职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游戏基本要素:生命值、伤害、移动、闪避等)相关推荐

  1. 用CSS和JS打造一个简单的图片编辑器

    用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先 ...

  2. python程序30行_30行Python代码,打造一个简单的微信群聊助手,简单方便

    大家都知道,最近代码君迷上了Python,一直在研究这门语言,还是那句话,人生苦短,我学Python,今天代码君要教大家一个黑科技,30行代码实现自己定制的微信群聊助手,这个助手有什么用呐,就是用来活 ...

  3. HTML+JavaScript实现一个简单抽奖功能

    HTML+JavaScript实现一个简单抽奖功能 emmm,闲的蛋疼,没事做,软考也不想复习 为什么会做这个东西呢,纯属好玩,闲的 其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答 当 ...

  4. html+css+javaScript实现一个简单的注册界面

    html+css+javaScript实现一个简单的注册界面 自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...

  5. clistctrl控件最后插入在后面_用图表控件做一个简单的员工信息查询系统

    前几天在上课的时候有同学说在做人员的信息查询的时候,经常的要去做查找搜索很麻烦,能不能做一个简单的人员信息查询系统,只需要选择人员的编号就可以查询到这个员工的信息.其实要实现这个同学的需求在EXCEL ...

  6. 设计一个简单分页存储管理系统_【系统架构】如何设计一个简单灵活的收银系统?看这里!(1)...

    在电商项目中,收银系统是一个不可或缺的功能,因为你不仅要通过它来进行收款.退款,而且也要通过它进行财务的对账.报税等.因此,如何设计一个简单灵活的收银系统,对于开发电商项目来说非常重要. 那如何设计一 ...

  7. 安卓 spinner下拉框 做模糊查询_用图表控件做一个简单的员工信息查询系统

    前几天在上课的时候有同学说在做人员的信息查询的时候,经常的要去做查找搜索很麻烦,能不能做一个简单的人员信息查询系统,只需要选择人员的编号就可以查询到这个员工的信息.其实要实现这个同学的需求在EXCEL ...

  8. java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署

    java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 本源 ...

  9. 支付退款流程设计_【系统架构】如何设计一个简单灵活的收银系统?看这里!(1)...

    在电商项目中,收银系统是一个不可或缺的功能,因为你不仅要通过它来进行收款.退款,而且也要通过它进行财务的对账.报税等.因此,如何设计一个简单灵活的收银系统,对于开发电商项目来说非常重要. 那如何设计一 ...

最新文章

  1. Hadoop简介(1):什么是Map/Reduce
  2. 人工智能时代的用户体验设计与创新
  3. html2canvas图片不能正常截取,html2canvas关于图片不能正常截取
  4. 创建一个追踪摄像机(2)
  5. 闲置服务器装win10系统,求高手帮看一下我这台闲置的老主机还能装win10或者win8.1吗?...
  6. ubuntu grub 操作
  7. c语言把一段编码注释,C语言编码规范——着重注意点整理
  8. 【less-11】基于SQLI的POST字符型SQL注入
  9. 关于SQL中的两个问题的理解
  10. Flink SQL 实战:HBase 的结合应用
  11. 最好用的HDR图像处理器——Photomatix Pro新功能介绍及使用教程
  12. Word 关闭拼写检查 (去掉Word中拼写检查的所有红色和绿色的浪线)
  13. 使用 Anaconda 安装 Pytorch
  14. 【Laravel系列6.3】框架启动与服务容器源码
  15. 北京十大律师事务所(排名涉及刑事、拆迁婚姻)
  16. 免费好用的流程图软件yed
  17. tipask 不能正常解析
  18. oracle 加索引 %3e=,impdp create index parallel-数据泵并行创建索引
  19. 零基础 · 传说之下同人游戏制作教程
  20. 多台linux服务器ssh相互无密码访问

热门文章

  1. openssl 使用命令
  2. SpringMVC框架介绍
  3. 菜单与工具条的同步 APP_STANDARD.SYNCHRONIZE
  4. DIV+CSS中标签ul ol li dl dt dd用法
  5. 拖动无标题栏的窗体,需要处理的三个事件
  6. helm滚动更新mysql_kubernetes使用helm滚动更新
  7. 三步搭建Spring Cloud 服务注册
  8. node项目发送邮件失败
  9. 仅仅用几行python代码偷偷复制U盘文件
  10. Linux集群架构(下)——DR模式、keepalived+LVS