这个东西,还是和上次那个太阳系模型一样,是我在在职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. react 统一字段验证_如何使用React的受控输入进行即时表单字段验证
  2. Ubuntu 64bit 安装 ulipad4.1
  3. 怕蛇的人如何学Python?
  4. HDLBits 系列(39)求解带有奇校验的串口接收数据的简化电路设计
  5. HDU 4850 Wow! Such String! 【欧拉回路】【一顿乱构造】
  6. 摄像头线性矫正的c语言实现,摄影测量考试试题及详细答案
  7. 【机器学习】一篇白话机器学习概念
  8. linux下测试RTC驱动相关的命令date和hwclock常见用法简介
  9. 从简单的一元线性回归分析入门机器学习
  10. 图像处理之添加图像水印
  11. Mysql安装和常用命令及问题汇总
  12. 实践卡尔曼滤波--小球追踪
  13. fork join框架使用_Java:使用Fork / Join框架的Mergesort
  14. 【转】Task和async/await详解
  15. Android系统性能优化(71)---关于Bitmap图片资源优化的小事
  16. 编译原理-FIRST表-FOLLOW表-LL1表(含python代码)
  17. R语言与优化模型(一):规划问题和运输问题
  18. 第十五章笔记 虚拟机管理
  19. 工业级三维扫描仪关于扫描前喷粉技巧,你了解多少?
  20. 防辐射门行业调研报告 - 市场现状分析与发展前景预测(2021-2027年)

热门文章

  1. 375. Guess Number Higher or Lower II
  2. Webx框架:Spring Schema 和 Spring Ext
  3. Linux Tomcat 简介
  4. C++ 容器 LIST VECTOR erase
  5. List列表 OrderBy
  6. AAC规格分类和下载地址
  7. ASP.NET MVC 2
  8. Android SettingProvider详解
  9. python 下载网页文件_『如何用python把网页上的文本内容保存下来』python爬取网页内容教程...
  10. Javascript数组常见的方法