<!DOCTYPE html>

<html>

<head>

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

</head>

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>

<body>

</linearGradient>

<defs>

</g>

</defs>

</g>

</g>

</clipPath>

</g>

</g>

</g>

</g>

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

</svg>

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

</body>

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

var cursor = svg.createSVGPoint();

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

var randomAngle = 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-angle use", 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

var point = getMouseSVG(e);

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

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

var dx = point.x - pivot.x;

var dy = point.y - pivot.y;

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

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

var bowAngle = angle - Math.PI;

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

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

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

scaleX: scale,

rotation: bowAngle + "rad",

transformOrigin: "right center"

});

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

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

rotation: bowAngle + "rad",

svgOrigin: "100 250"

});

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

x: -distance

});

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

attr: {

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

}

});

var radius = distance * 9;

var offset = {

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

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

};

var arcWidth = 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("#bow polyline", 0.4, {

attr: {

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

ease: Elastic.easeOut

});

// duplicate arrow

var newArrow = document.createElementNS("SVG namespace", "use");

newArrow.setAttributeNS('XLink namespace', 'href', "#arrow");

arrows.appendChild(newArrow);

// animate arrow along path

var path = 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

});

//hide previous arrow

TweenMax.set(".arrow-angle use", {

opacity: 0

});

}

function hitTest(tween) {

// check for collisions with arrow and target

var arrow = tween.target[0];

var transform = arrow._gsTransform;

var radians = transform.rotation * Math.PI / 180;

var arrowSegment = {

x1: transform.x,

y1: transform.y,

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

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

}

var intersection = getIntersection(arrowSegment, lineSegment);

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

tween.pause();

var dx = intersection.x - target.x;

var dy = intersection.y - target.y;

var distance = Math.sqrt((dx * dx) + (dy * dy));

var selector = ".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;

return cursor.matrixTransform(svg.getScreenCTM().inverse());

}

function getIntersection(segment1, segment2) {

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

var dx1 = segment1.x2 - segment1.x1;

var dy1 = segment1.y2 - segment1.y1;

var dx2 = segment2.x2 - segment2.x1;

var dy2 = segment2.y2 - segment2.y1;

var cx = segment1.x1 - segment2.x1;

var cy = segment1.y1 - segment2.y1;

var denominator = dy2 * dx1 - dx2 * dy1;

if (denominator == 0) {

return null;

}

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

var ub = (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前端25群】群号618237474

转载于:https://my.oschina.net/u/3388416/blog/883568

好玩的Canvas射箭小游戏相关推荐

html5射箭游戏,好玩的Canvas射箭小游戏
Canvas射箭小游戏 body{ margin:0; background:#222; margin:20px; } svg{ width:100%; height:100%; position:f ...
比“跳一跳”好玩100倍的小游戏
比"跳一跳"好玩100倍,小游戏前段时间,微信小程序悄然上线了一批由第三方开发的小游戏.除了以跳一跳为代表的首批上线小游戏以外,我们现在还有更多的选择了!那些跳上3000分,解锁 ...
基于HTML5canvars的小游戏,利用HTML5实现Canvas激流勇进小游戏代码
特效描述:利用HTML5实现 Canvas 激流勇进小游戏代码.利用HTML5实现Canvas激流勇进小游戏代码代码结构 1. 引入JS 2. HTML代码进入游戏游戏玩法:使用左键.右键和上 ...
final-期末大作业-制作AR射箭小游戏（Unity AR配置详细教程）
要求大作业要求: 制作一款特定技术应用小游戏,并提交技术报告. 内容(请参考以下技术主题,但不限于这些主题): 运用手机拍若干全景图,贴到天空盒或球型天空,做一个简单校园漫游功能. 粒子系统效果制作 ...
Unity3D学习之射箭小游戏
一.了解基础知识对于射箭小游戏来说,新增加了物理引擎的运用.物理引擎主要包括三个方面:Rigidbody.Collide.PhysicMaterial.其中,Collider是最基本的触发物理的条件 ...
基于HTML5canvars的小游戏,HTML5之canvas简单射箭小游戏
最近折腾一个自己个人主页,无奈履历太渣,能放在首页的东西不多,于是想给自己的个人主页上添加一个小游戏.遂参考了各种教程,使用HTML5的canvas元素做了一个相当原始的东西出来,效果如图~ QQ截图 ...
游戏自审自查报告_开发的射箭小游戏上线了,分享一下我在开发过程中遇到的问题...
利用业余时间开发的微信小游戏-射箭救人质上线了,主要玩法就是操作弓箭射断绳子把人救下来就可以了.图片资源是我找一个朋友做的.开发过程不算太顺利.磕磕绊绊做了12关.希望大家支持下.谢谢. 分享一下我在 ...
香肠派对电脑版_6款好玩的吃鸡小游戏，和平精英、香肠派对、迷你攻势、、、...
沐沐带你发现好游戏! 只有你想不到, 没有我找不到的好游戏! 「良心好游戏推荐」搜罗了好玩的微信小游戏大全, 模拟经营游戏.恐怖游戏.消除游戏.休闲游戏.益智游戏.解密游戏.烧脑游戏.解谜游戏大全. ...
好玩的微信互动小游戏有哪些？微信小程序游戏倾情推荐？
经常在微信朋友圈或者微信群里看到朋友闲的物料在玩各种微信互动小游戏,那哪些游戏好玩适合打发时间呢,在这里我推荐自己玩的两款不错的微信互动小游戏,方便你随时在线玩,玩法简单.画面精致,绝对是居家必备打发 ...
一个简单的canvas射击小游戏
本人初学前端技术,在HTML5的背景下,逐渐感受到前端技术的越来越强大与完善.web开发者已经不再是简简单单的制作网页name简单了. 近日看见网络上许多H5小游戏,非常感兴趣,于是临时抱佛脚,学习了 ...

好玩的Canvas射箭小游戏

<!DOCTYPE html>

好玩的Canvas射箭小游戏相关推荐

最新文章

热门文章