JS模仿横版游戏中的精灵控制

类似《返校》和《无尽梦魇》的那种。

 

基本算法:

主要是解决精灵匀速直线运动的问题。

 

效果:

 

代码:


<div class="stage">
  <div class="sence">
    <div class="sprite"></div>
  </div>
</div>


<style>
.stage{width: 100%; overflow: hidden; position: relative; }
.sence{width: 1024px; height: 350px; background:url(../assets/images/background.jpg)}
.sprite{width: 20px;height: 50px; background: #f4f74a; position: absolute;}
</style>

<script>

var sprite = document.querySelector(".sprite");

var from  = {x:20,  y:280};
var to    = {x:200, y:270};
var timer;

sprite.style.left = from.x+'px';
sprite.style.top  = from.y+'px';

function move(selector, from, to){
  //偏移量,两条直角边长
  var offset  = {x:0,y:0};
  offset.x    = to.x - from.x;
  offset.y    = to.y - from.y;
  
  //实际距离
  var distance  = Math.pow(offset.x,2) + Math.pow(offset.y,2);
  distance      = Math.sqrt(distance);
  console.log(distance);

  //速度 p/s 速度比等于直角三角形边长比
  var v   = 1; //斜边速度
  var vX  = (offset.x * v)/distance;  //x轴上速度
  var vY  = (offset.y * v)/distance;  //Y轴上速度

  timer = setInterval(function(){
    var left = parseFloat(selector.style.left) + vX;
    var top  = parseFloat(selector.style.top) + vY;

    //判断是否移动结束
    if(Math.round(left) == to.x && Math.round(top) == to.y){
      from.x = to.x;
      from.y = to.y;
      to     = {x:0,y:0};
      clearInterval(timer);
    }

    selector.style.left = left.toString() + "px";
    selector.style.top  = top.toString() + "px";
  },5);
};

function getClientCoordinate(event){
  clearInterval(timer);

  var from = {};
  from.x = parseFloat(sprite.style.left);
  from.y = parseFloat(sprite.style.top);

  var to = {};
  to.x = event.touches[0].clientX;
  to.y = event.touches[0].clientY;

  console.log("touch: ", from, to);
  move(sprite, from, to);
}
document.addEventListener("touchstart", getClientCoordinate);

</script>


 

 

修改时间 2018-04-27

真诚赞赏,手留余香
赞赏
随机推荐
Node.js API Mocha 单元测试
PHP curl的GET和POST
javascript获取当前时间
Authorization Schemes 认证模式
Webpack 概念理解 module、chunk 和 bundle 的区别
PM2 日志管理
Photoshop 学习笔记 颜色替换
ThinkPHP5.* 远程代码执行高危漏洞的修复
微信支付错误两个问题的解决:curl出错,错误码:60
Nginx 代理 Node.js 静态文件比较大无法正常显示,关键词 proxy_temp Permission denied