search

Home  >  Article  >  Web Front-end  >  JS realizes the slider movement effect in response to mouse clicks in web games_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 15:36:181462browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery implements ctrl enter (carriage return) to submit the form_jqueryNext article：jQuery implements ctrl enter (carriage return) to submit the form_jquery

Related articles

See more