JS realizes the slider movement effect in response to mouse clicks in web games

JS realizes the slider movement effect in response to mouse clicks in web games_javascript skills

WBOY

Release： 2016-05-16 15:36:18

Original

1496 people have browsed it

The example in this article describes the JS implementation of the slider movement effect in response to mouse clicks in web games. Share it with everyone for your reference, the details are as follows:

This is an interesting effect in web games. It can complete the following actions: scrolling, scrolling in 8 directions, obtaining the mouse coordinates and obtaining the up, down, left, and right positions of the object. You can add them by yourself. MoveReady and ScrollReady are commented out. Prevent the effects of continuous mouse clicks from overlapping after uncommenting.

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-web-game-click-move-demo/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页游戏中的一个有趣效果</title>
<style type="text/css">
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,del,em,img,ins,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,tbody,tfoot,tr,th,td{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
body{font:12px/24px "宋体";background:#fff;color:#333;}
ol, ul{list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
table {border-collapse:collapse;border-spacing:0;}
label{cursor:pointer}
input[type="button"]{cursor:pointer}
button{cursor:pointer}
strong{font-weight:normal;}
em{font-style:normal}
a{text-decoration:none;color:#f60}
a:hover{text-decoration:underline;}
.block{width:200px;height:200px;background:#e63;position:absolute;left:50%;top:50%;border:3px solid #fdd;overflow:hidden;}
.moveBlock{width:1900px;height:2728px;background:url("http://files.jb51.net/file_images/article/201510/2015101993654799.jpg") left top;}
</style>
<script type="text/javascript">
var ie = ! -[1, ], myDate = new Date();
function Sin(x,v) {
 var y = Math.round(Math.sin(Math.PI*x/180)*100)/100;
 return ie&#63;y*v*3:y*v;
}
/*返回数组序号*/
Num = function(e, eles) {
 for (var i = 0; i < eles.length; i++) {
 if (eles[i] == e) { return i; }
 }
}
/*字符串判定*/
GetCur = function(Str, cur) {
 var str = new RegExp(cur, "gi")
 return str.test(Str);
}
/*DOM构造*/
var div=function(id){return new HtmlEle.init(id);}
HtmlEle={
 init:function(id){
  this[0]=id==Object&#63;id:document.getElementById(id);
  return this;
 },
 css:function(s){
  for(var i in s){
   this[0].style[i]=s[i];
  }
 },
 Obj:function(){
  var obj=this[0];
  var objTop=obj.offsetTop,objLeft=obj.offsetLeft,objWidth=obj.offsetWidth,objHeight=obj.offsetHeight;
  return {top:objTop,right:objLeft+objWidth,bottom:objTop+objHeight,left:objLeft,width:objWidth,height:objHeight}
 },
 MoveReady:true,
 Move:function(s,point){
  var obj=this[0],n=0,v=s,main=this,v2=90;
  if(this.MoveReady==true){
   //main.MoveReady=false;
   var Top=function(){
    n=n<v2&#63;n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.style.top=P-m+"px"}else{obj.style.top=P-s+"px";clearInterval(myMove);main.MoveReady=true;};
   }
   var Right=function(){
    n=n<v2&#63;n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.style.left=P+m+"px"}else{obj.style.right=P+s+"px";clearInterval(myMove);main.MoveReady=true;};
   }
   var Bottom=function(){
    n=n<v2&#63;n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.style.top=P+m+"px"}else{obj.style.top=P+s+"px";clearInterval(myMove);main.MoveReady=true;};
   }
   var Left=function(){
    n=n<v2&#63;n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.style.left=P-m+"px"}else{obj.style.left=P-s+"px";clearInterval(myMove);main.MoveReady=true;};
   }
   switch(point){
    case "top" : var P=obj.offsetTop,Point=Top;break;
    case "right" : var P=obj.offsetLeft,Point=Right;break;
    case "bottom" : var P=obj.offsetTop,Point=Bottom;break;
    case "left" : var P=obj.offsetLeft,Point=Left;break;
   }
   var myMove=setInterval(Point,5)
  }
 },
 ScrollReady:true,
 Scroll:function(s,point){
  var obj=this[0],n=0,v=s,main=this,v2=90;
  if(this.ScrollReady==true){
   //main.ScrollReady=false;
   var Top=function(){
    n=n<v2&#63;n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.scrollTop=P+m}else{obj.scrollTop=P+s;clearInterval(myMove);main.ScrollReady=true;};
   }
   var Right=function(){
    n=n<v2&#63;n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.scrollLeft=P-m}else{obj.scrollLeft=P-s;clearInterval(myMove);main.ScrollReady=true;};
   }
   var Bottom=function(){
    n=n<v2&#63;n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.scrollTop=P-m}else{obj.scrollTop=P-s;clearInterval(myMove);main.ScrollReady=true;};
   }
   var Left=function(){
    n=n<v2&#63;n+1:n;
    var m=Sin(n,v);
    if(m<Math.abs(s)){obj.scrollLeft=P+m}else{obj.scrollLeft=P+s;clearInterval(myMove);main.ScrollReady=true;};
   }
   switch(point){
    case "top" : var P=obj.scrollTop,Point=Top;break;
    case "right" : var P=obj.scrollLeft,Point=Right;break;
    case "bottom" : var P=obj.scrollTop,Point=Bottom;break;
    case "left" : var P=obj.scrollLeft,Point=Left;break;
   }
   var myMove=setInterval(Point,5)
  }
 },
 Mouse:function(e,f){
  switch(e){
   case "click" : this[0].onclick=f;break;
   case "dbclick" : this[0].ondblclick=f;break;
   case "over" : this[0].onmouseover=f;break;
   case "out" : this[0].onmouseout=f;break;
  }
 },
 MouseSite:function(e){
  var e=e&#63;e:window.event;
  return {x:e.clientX,y:e.clientY}
 }
}
HtmlEle.init.prototype=HtmlEle;
</script>
</head>
<body>
<div class="block" id="moveBlock">
 <div class="moveBlock"></div>
</div>
<script type="text/javascript">
var sBlock=new div("moveBlock");
document.onclick=function(){
 var site=sBlock.MouseSite(arguments[0]),s=200,b=30;
 var objSite=sBlock.Obj();
 if(objSite.left<site.x && objSite.left+objSite.width/2-b>site.x && objSite.top<site.y &&objSite.bottom>site.y)
  sBlock.Scroll(s,"left");
 if(objSite.right>site.x && objSite.right-objSite.width/2+b<site.x && objSite.top<site.y &&objSite.bottom>site.y)
  sBlock.Scroll(s,"right");
 if(objSite.top<site.y && objSite.top+objSite.height/2-b>site.y && objSite.left<site.x && objSite.right>site.x)
  sBlock.Scroll(s,"top");
 if(objSite.bottom>site.y && objSite.bottom-objSite.height/2+b<site.y)
  sBlock.Scroll(s,"bottom");
 if(objSite.left>site.x)
  sBlock.Move(s,"left");
 if(objSite.right<site.x)
  sBlock.Move(s,"right");
 if(objSite.top>site.y)
  sBlock.Move(s,"top");
 if(objSite.bottom<site.y)
  sBlock.Move(s,"bottom");
}
window.onload=function(){sBlock[0].scrollTop=0;sBlock[0].scrollLeft=0;}
</script>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone in JavaScript programming.