文档章节

好玩的Canvas射箭小游戏

小婧大神
 小婧大神
发布于 2017/04/21 16:44
字数 1182
阅读 3
收藏 0

<!DOCTYPE html>

<html>

<head>

         <title>Canvas射箭小游戏</title>

</head>

<style type="text/css">

         body{

                   margin:0;

                   background:#222;

 

                   margin:20px;

         }

         svg{

                   width:100%;

                   height:100%;

                   position:fixed;

                   top:0;

                   left:0;

         }

         span{

                   color:white;

                   font-family:sans-serif;

                   opacity:.3;

         }

</style>

<scriptsrc="http://demo.mycodes.net/youxi/canvas_shejian/js/TweenMax.min.js"></script>

<script src="http://demo.mycodes.net/youxi/canvas_shejian/js/MorphSVGPlugin.min.js"></script>

 

<body>

         <svgid="game" xmlns="http://www.w3.org/2000/svg"viewBox="0 0 1000 400" overflow="visible">

                   <linearGradientid="ArcGradient" >

                            <stopoffset="0"  stop-color="#fff"stop-opacity=".2"/>

                            <stopoffset="50%" stop-color="#fff"stop-opacity="0"/>

                   </linearGradient>

                   <pathid="arc" fill="none" stroke="url(#ArcGradient)"stroke-width="4" d="M100,250c250-400,550-400,800,0"  pointer-events="none"/>

                   <defs>

                            <gid="arrow">

                                     <linex2="60" fill="none" stroke="#888"stroke-width="2" />

                                     <polygonfill="#fdfdfd" points="64 0 58 2 56 0 58 -2" />

                                     <polygonfill="#88ce02" points="2 -3 -4 -3 -1 0 -4 3 2 3 5 0" />

                            </g>

                   </defs>

                   <gid="target">

                            <pathfill="#FFF"d="M924.2,274.2c-21.5,21.5-45.9,19.9-52,3.2c-4.4-12.1,2.4-29.2,14.2-41c11.8-11.8,29-18.6,41-14.2C944.1,228.3,945.7,252.8,924.2,274.2z" />

                            <pathfill="#F4531C"d="M915.8,265.8c-14.1,14.1-30.8,14.6-36,4.1c-4.1-8.3,0.5-21.3,9.7-30.5s22.2-13.8,30.5-9.7C930.4,235,929.9,251.7,915.8,265.8z" />

                            <pathfill="#FFF"d="M908.9,258.9c-8,8-17.9,9.2-21.6,3.5c-3.2-4.9-0.5-13.4,5.6-19.5c6.1-6.1,14.6-8.8,19.5-5.6C918.1,241,916.9,250.9,908.9,258.9z" />

                            <pathfill="#F4531C" d="M903.2,253.2c-2.9,2.9-6.7,3.6-8.3,1.7c-1.5-1.8-0.6-5.4,2-8c2.6-2.6,6.2-3.6,8-2C906.8,246.5,906.1,250.2,903.2,253.2z" />

                   </g>

                   <gid="bow" fill="none" stroke-linecap="round"vector-effect="non-scaling-stroke"pointer-events="none">

                            <polylinefill="none" stroke="#ddd" stroke-linecap="round"points="88,200 88,250 88,300"/>

                            <pathfill="none" stroke="#88ce02" stroke-width="3"stroke-linecap="round" d="M88,300c0-10.1,12-25.1,12-50s-12-39.9-12-50"/>

                   </g>

                   <gclass="arrow-angle"><use x="100" y="250"xlink:href="#arrow"/></g>

                   <clipPathid="mask">

                            <polygonopacity=".5" points="0,0 1500,0 1500,200 970,290 950,240 925,220875,280 890,295 920,310 0,350" pointer-events="none"/>

                   </clipPath>

                   <gclass="arrows" clip-path="url(#mask)"  pointer-events="none">

                   </g>

                   <gclass="miss" fill="#aaa" opacity="0"transform="translate(0, 100)">

                            <pathd="M358 194L363 118 386 120 400 153 416 121 440 119 446 203 419 212 416163 401 180 380 160 381 204"/>

                            <pathd="M450 120L458 200 475 192 474 121"/>

                            <pathd="M537 118L487 118 485 160 515 162 509 177 482 171 482 193 529 199 538148 501 146 508 133 537 137"/>

                            <pathd="M540 202L543 178 570 186 569 168 544 167 546 122 590 116 586 142 561140 560 152 586 153 586 205"/>

                            <pathd="M595,215l5-23l31,0l-5,29L595,215z M627,176l13-70l-41-0l-0,70L627,176z"/>

                   </g>

                   <gclass="bullseye" fill="#F4531C" opacity="0">

                            <pathd="M322,159l15-21l-27-13l-32,13l15,71l41-14l7-32L322,159zM292,142h20l3,8l-16,8 L292,142z M321,182l-18,9l-4-18l23-2V182z"/>

                            <pathd="M340 131L359 125 362 169 381 167 386 123 405 129 392 183 351186z"/>

                            <pathd="M413 119L402 188 450 196 454 175 422 175 438 120z"/>

                            <pathd="M432 167L454 169 466 154 451 151 478 115 453 113z"/>

                            <pathd="M524 109L492 112 466 148 487 155 491 172 464 167 463 184 502 191 513143 487 141 496 125 517 126z"/>

                            <pathd="M537 114L512 189 558 199 566 174 533 175 539 162 553 164 558 150 543145 547 134 566 148 575 124z"/>

                            <pathd="M577 118L587 158 570 198 587 204 626 118 606 118 598 141 590112z"/>

                            <pathd="M635 122L599 198 643 207 649 188 624 188 630 170 639 178 645 162 637158 649 143 662 151 670 134z"/>

                            <pathd="M649,220l4-21l28,4l-6,25L649,220zM681,191l40-79l-35-8L659,184L681,191z"/>

                   </g>

                   <gclass="hit" fill="#ffcc00" opacity="0"transform="translate(180, -80) rotate(12) ">

                            <pathd="M383 114L385 195 407 191 406 160 422 155 418 191 436 189 444 112 423119 422 141 407 146 400 113"/>

                            <pathd="M449 185L453 113 477 112 464 186"/>

                            <pathd="M486 113L484 130 506 130 481 188 506 187 520 131 540 135 545119"/>

                            <pathd="M526,195l5-20l22,5l-9,16L526,195zM558,164l32-44l-35-9l-19,51L558,164z"/>

                   </g>

<!--           <linex1= "875", y1= "280", x2= "925", y2="220" stroke="red"/>

 

         <circleclass="point" r="7" fill="purple"opacity=".4"/> -->

</svg>

<span>点击弓然后射箭!</span>

</body>

<scripttype="text/javascript">

         varsvg = document.querySelector("svg");

         varcursor = svg.createSVGPoint();

         vararrows = document.querySelector(".arrows");

         varrandomAngle = 0;

 

// center of target

var target = {

         x:900,

         y:249.5

};

 

// target intersection line segment

var lineSegment = {

         x1:875,

         y1:280,

         x2:925,

         y2:220

};

 

// bow rotation point

var pivot = {

         x:100,

         y:250

};

aim({

         clientX:320,

         clientY:300

});

 

 

 

// set up start drag event

window.addEventListener("mousedown",draw);

 

function draw(e) {

         //pull back arrow

         randomAngle= (Math.random() * Math.PI * 0.03) - 0.015;

         TweenMax.to(".arrow-angleuse", 0.3, {

                   opacity:1

         });

         window.addEventListener("mousemove",aim);

         window.addEventListener("mouseup",loose);

         aim(e);

}

 

 

 

function aim(e) {

         //get mouse position in relation to svg position and scale

         varpoint = getMouseSVG(e);

         point.x= Math.min(point.x, pivot.x - 7);

         point.y= Math.max(point.y, pivot.y + 7);

         vardx = point.x - pivot.x;

         vardy = point.y - pivot.y;

         //Make it more difficult by adding random angle each time

         varangle = Math.atan2(dy, dx) + randomAngle;

         varbowAngle = angle - Math.PI;

         vardistance = Math.min(Math.sqrt((dx * dx) + (dy * dy)), 50);

         varscale = Math.min(Math.max(distance / 30, 1), 2);

         TweenMax.to("#bow",0.3, {

                   scaleX:scale,

                   rotation:bowAngle + "rad",

                   transformOrigin:"right center"

         });

         vararrowX = Math.min(pivot.x - ((1 / scale) * distance), 88);

         TweenMax.to(".arrow-angle",0.3, {

                   rotation:bowAngle + "rad",

                   svgOrigin:"100 250"

         });

         TweenMax.to(".arrow-angleuse", 0.3, {

                   x:-distance

         });

         TweenMax.to("#bowpolyline", 0.3, {

                   attr:{

                            points:"88,200 " + Math.min(pivot.x - ((1 / scale) * distance), 88) +",250 88,300"

                   }

         });

 

         varradius = distance * 9;

         varoffset = {

                   x:(Math.cos(bowAngle) * radius),

                   y:(Math.sin(bowAngle) * radius)

         };

         vararcWidth = offset.x * 3;

 

         TweenMax.to("#arc",0.3, {

                   attr:{

                            d:"M100,250c" + offset.x + "," + offset.y + "," +(arcWidth - offset.x) + "," + (offset.y + 50) + "," +arcWidth + ",50"

                   },

                   autoAlpha:distance/60

         });

 

}

 

function loose() {

         //release arrow

         window.removeEventListener("mousemove",aim);

         window.removeEventListener("mouseup",loose);

 

         TweenMax.to("#bow",0.4, {

                   scaleX:1,

                   transformOrigin:"right center",

                   ease:Elastic.easeOut

         });

         TweenMax.to("#bowpolyline", 0.4, {

                   attr:{

                            points:"88,200 88,250 88,300"

                   },

                   ease:Elastic.easeOut

         });

         //duplicate arrow

         varnewArrow = document.createElementNS("http://www.w3.org/2000/svg", "use");

         newArrow.setAttributeNS('http://www.w3.org/1999/xlink','href', "#arrow");

         arrows.appendChild(newArrow);

        

         //animate arrow along path

         varpath = MorphSVGPlugin.pathDataToBezier("#arc");

         TweenMax.to([newArrow],0.5, {

                   force3D:true,

                   bezier:{

                            type:"cubic",

                            values:path,

                            autoRotate:["x", "y", "rotation"]

                   },

                   onUpdate:hitTest,

                   onUpdateParams:["{self}"],

                   onComplete:onMiss,

                   ease:Linear.easeNone

         });

         TweenMax.to("#arc",0.3, {

                   opacity:0

         });

         //hideprevious arrow

         TweenMax.set(".arrow-angleuse", {

                   opacity:0

         });

}

 

function hitTest(tween) {

         //check for collisions with arrow and target

         vararrow = tween.target[0];

         vartransform = arrow._gsTransform;

         varradians = transform.rotation * Math.PI / 180;

         vararrowSegment = {

                   x1:transform.x,

                   y1:transform.y,

                   x2:(Math.cos(radians) * 60) + transform.x,

                   y2:(Math.sin(radians) * 60) + transform.y

         }

 

         varintersection = getIntersection(arrowSegment, lineSegment);

         if(intersection.segment1 && intersection.segment2) {

                   tween.pause();

                   vardx = intersection.x - target.x;

                   vardy = intersection.y - target.y;

                   vardistance = Math.sqrt((dx * dx) + (dy * dy));

                   varselector = ".hit";

                   if(distance < 7) {

                            selector= ".bullseye"

                   }

                   showMessage(selector);

         }

 

}

 

function onMiss() {

         //Damn!

         showMessage(".miss");

}

 

function showMessage(selector) {

         //handle all text animations by providing selector

         TweenMax.killTweensOf(selector);

         TweenMax.killChildTweensOf(selector);

         TweenMax.set(selector,{

                   autoAlpha:1

         });

         TweenMax.staggerFromTo(selector+ " path", .5, {

                   rotation:-5,

                   scale:0,

                   transformOrigin:"center"

         },{

                   scale:1,

                   ease:Back.easeOut

         },.05);

         TweenMax.staggerTo(selector+ " path", .3, {

                   delay:2,

                   rotation:20,

                   scale:0,

                   ease:Back.easeIn

         },.03);

}

 

 

 

function getMouseSVG(e) {

         //normalize mouse position within svg coordinates

         cursor.x= e.clientX;

         cursor.y= e.clientY;

         returncursor.matrixTransform(svg.getScreenCTM().inverse());

}

 

function getIntersection(segment1,segment2) {

         //find intersection point of two line segments and whether or not the point is oneither line segment

         vardx1 = segment1.x2 - segment1.x1;

         vardy1 = segment1.y2 - segment1.y1;

         vardx2 = segment2.x2 - segment2.x1;

         vardy2 = segment2.y2 - segment2.y1;

         varcx = segment1.x1 - segment2.x1;

         varcy = segment1.y1 - segment2.y1;

         vardenominator = dy2 * dx1 - dx2 * dy1;

         if(denominator == 0) {

                   returnnull;

         }

         varua = (dx2 * cy - dy2 * cx) / denominator;

         varub = (dx1 * cy - dy1 * cx) / denominator;

         return{

                   x:segment1.x1 + ua * dx1,

                   y:segment1.y1 + ua * dy1,

                   segment1:ua >= 0 && ua <= 1,

                   segment2:ub >= 0 && ub <= 1

         };

}

</script>

</html>

找群主分享更多资源,【 WEB前端互动交流群04】

本文转载自:

共有 人打赏支持
小婧大神
粉丝 0
博文 77
码字总数 3758
作品 0
私信 提问
【CF 应用开发大赛】SumOn -- 基于HTML5的游戏

应用名称:SumOn 应用URL地址:http://sumon.cloudfoundry.com/ 投票 应用说明及使用场景: 一个HTML5的游戏,利用算数加法以达到要求的数字,简单来说就是一个算数游戏。娱乐之余可以锻炼算...

jillsion
2013/01/08
0
24
沙盒游戏引擎--Cube Engine

Cube Engine 是基于 canvas 的 3D 引擎,它完全没有用 OpenGL,因此也没有 3D 加速。此项目仅用于学习,不过有些扩展应该会很好玩。。。只要你的电脑够强大。...

孔小菜
2015/08/04
491
0
基于HTML5 Canvas实现小游戏

一、实验介绍 1.1 实验内容 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学。 效果: 本游戏翻译自国外游戏开发高手写的博客,本课程的目的不是教你开发一个好玩的游...

实验楼
07/20
0
0
微信小游戏开发技巧(大会演讲内容整理)丨掘金开发者大会

在一些时间以前,比如2012年之前,做web游戏的人还不是很多(就是用javascript写游戏的人)。 当时也没想那么多,就是为了制作一个「不需要下载,点开就能玩的游戏」,所以就投入到web游戏制...

Sign
09/25
0
0
这个八月,我竟然去了四座城市(三·上海)

深圳 这个八月,我竟然去了四座城市(一·深圳) 杭州 这个八月,我竟然去了四座城市(二·杭州) 先解答下上面一个文章的问题呀 说下到上海来做什么吧,是因为公司有个项目要在上海来做,所以就...

阿小庆
09/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

solr使用规范

0. 目的 规范solr设计、用法,避免bug,提高性能 1. 设计规范 solr的用途是查询,不是存储,建议查询结果尽量都为id主键,而后再拿该id主键到缓存或者db中再查询相关信息,例如:请勿将经销商...

andersChow
13分钟前
1
0
11-《深度拆解JVM》之Java对象的内存布局

一、问题引入 在 Java 程序中,我们拥有多种新建对象的方式。除了最为常见的 new 语句之外,我们还可以通过反射机制、Object.clone 方法、反序列化以及 Unsafe.allocateInstance 方法来新建对...

飞鱼说编程
17分钟前
1
0
Windows Install Docker

win7、win8 win7、win8 等需要利用 docker toolbox 来安装,国内可以使用阿里云的镜像来下载,下载地址:http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ docker toolbox...

linuxprobe16
22分钟前
0
0
混合云环境中扩展Kubernetes的挑战及方案

流量突增时,我们需要扩展应用程序以满足用户需求。本文分享了扩展Kubernetes以及管理混合云环境时可能遇到的挑战,以及如何简单高效地完成Kubernetes扩展。 引 言 假设您的业务是在线的:您...

RancherLabs
30分钟前
1
0
Java集合小抄

Java集合小抄 1. List 1.1 ArrayList 以数组实现。节约空间,但是数组有容量限制。超出限制时会增加50%容量,用System.arraycopy()复制到新的数组。因此最好能给出数组大小的预估值。默认第一...

傅小水water
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部