Javascirpt打造“互动指针”特效

2022-07-15 80酷酷网 80kuku.com

　　特效|指针

一个很不错的效果，用键盘的箭头键控制一个漂亮的箭头！也许能给你启发，做出一款有趣的小游戏呢

<title>Interactive Arrow</title>

<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>

/*
All Files are Designed & Writen by Windy_sk, you can use it freely but ...
YOU MUST KEEP THIS ITEM !
Email:
*/

var timer = null;
var time_unit = 30;
var A_speed = 10;
var L_speed = 15;
var move_x, move_y;

function ArrowStyle(type,color,color2,focus){
if(color == "") color = "white";
if(color2 == "") color2 = "white";
this.type = type;
this.color = color;
this.color2 = color2;
this.focus = focus;
}

var style_list = new Array();
style_list[style_list.length] = new ArrowStyle("gradient","blue","","");
style_list[style_list.length] = new ArrowStyle("gradient","","blue","");
style_list[style_list.length] = new ArrowStyle("gradient","blue","red","");
style_list[style_list.length] = new ArrowStyle("gradient","red","blue","");
style_list[style_list.length] = new ArrowStyle("gradient","blue","red","50%");
style_list[style_list.length] = new ArrowStyle("gradient","red","blue","-50%");
style_list[style_list.length] = new ArrowStyle("gradientradial","","blue","");
style_list[style_list.length] = new ArrowStyle("gradientradial","blue","","");
style_list[style_list.length] = new ArrowStyle("gradientradial","red","blue","");
style_list[style_list.length] = new ArrowStyle("gradientradial","blue","red","");
style_list[style_list.length] = new ArrowStyle("gradientradial","red","blue","50%");
style_list[style_list.length] = new ArrowStyle("gradientradial","blue","red","-50%");

function ChangeStyle(){
if(style_list.length == 0) return;
var the_style = style_list[GetRandomNum(1,style_list.length) - 1];
fill.type = the_style.type;
fill.color = the_style.color;
fill.color2 = the_style.color2;
fill.focus = the_style.focus;
}

/*
function ChangeStyle(){
fill.type = GetRandomNum(0,1)?"gradient":"gradientradial";
fill.color = GetRandomdColor();
fill.color2 = GetRandomdColor();
fill.focus = GetRandomNum(0,1)?"+":"-" + GetRandomNum(0,100).toString() + "%";
}

function GetRandomdColor(){
var result = "";
var hex  = new Array(6);
hex[0]  = "FF";
hex[1]  = "CC";
hex[2]  = "99";
hex[3]  = "66";
hex[4]  = "33";
hex[5]  = "00";
for(var i=0;i<3;i++){
  result += hex[GetRandomNum(0,5)];
}
return result;
}
*/

function GetRandomNum(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}

document.onkeydown = function(){
angle.Rotation = angle.Rotation % 360;
if(timer!=null) return;
var the_angle = Math.PI * angle.Rotation / 180;
switch(event.keyCode){
  case 37: //left
   timer = setInterval("angle.Rotation -= A_speed",time_unit);
   break;
  case 39: //right
   timer = setInterval("angle.Rotation += A_speed",time_unit);
   break;
  case 40: //down
   the_angle += Math.PI;
  case 38: //up
   move_y = -Math.floor(L_speed * Math.cos(the_angle));
   move_x = +Math.floor(L_speed * Math.sin(the_angle));
   timer = setInterval("MoveIt()",time_unit);
   break;
}
return;
}

document.onkeyup = function(){
if(timer!=null) clearInterval(timer);
timer = null;
}

document.onclick = function(){
ChangeStyle();
}

var webSiteID = 6;window.onload = function(){
setInterval("window.status='Rotation: '+angle.Rotation+'; Top: '+angle.style.top+'; Left: '+angle.style.left",time_unit);
}

</SCRIPT>

</head>
<body scroll="no">

<v:group id="angle" coordorigin="-10,-10" coordsize="20,20">
<v:shape CoordOrig="-10,-10" CoordSize="20,20" Title="Interactive Arrow" FillColor="red" Filled="true" StrokeColor="black" StrokeWeight="1pt">
  <v:Stroke StrokeColor="black" StrokeWeight="1pt" />
  <v:fill id=fill type='gradient' color='blue'/>
  <v:Path v="m 0,-10 l -10,10 l 0,5 l 10,10 x e" />
</v:shape>
</v:group>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]