commit
3603c14d65
13 changed files with 3687 additions and 0 deletions
@ -0,0 +1,85 @@
@@ -0,0 +1,85 @@
|
||||
body { |
||||
margin: 0; |
||||
padding: 0; |
||||
background: #ffc0cb; |
||||
font-size: 20px; |
||||
font-family: '微软雅黑', '宋体', sans-serif; |
||||
color: #000000; |
||||
overflow: auto |
||||
} |
||||
|
||||
a { |
||||
color: #000; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
#main { |
||||
width: 100%; |
||||
} |
||||
|
||||
#wrap { |
||||
position: relative; |
||||
margin: 0 auto; |
||||
width: 1100px; |
||||
height: 680px; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
#text { |
||||
width: 400px; |
||||
height: 425px; |
||||
left: 60px; |
||||
top: 80px; |
||||
position: absolute; |
||||
} |
||||
|
||||
#code { |
||||
display: none; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
#clock-box { |
||||
position: absolute; |
||||
left: 60px; |
||||
top: 550px; |
||||
font-size: 28px; |
||||
display: none; |
||||
} |
||||
|
||||
#clock-box a { |
||||
font-size: 28px; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
#clock { |
||||
margin-left: 48px; |
||||
} |
||||
|
||||
#clock .digit { |
||||
font-size: 64px; |
||||
} |
||||
|
||||
#canvas { |
||||
margin: 0 auto; |
||||
width: 1100px; |
||||
height: 680px; |
||||
} |
||||
|
||||
#error { |
||||
margin: 0 auto; |
||||
text-align: center; |
||||
margin-top: 60px; |
||||
display: none; |
||||
} |
||||
|
||||
.hand { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.say { |
||||
margin-left: 5px; |
||||
} |
||||
|
||||
.space { |
||||
margin-right: 150px; |
||||
} |
@ -0,0 +1,60 @@
@@ -0,0 +1,60 @@
|
||||
/* |
||||
* http://love.hackerzhou.me
|
||||
*/ |
||||
|
||||
// variables
|
||||
var $win = $(window); |
||||
var clientWidth = $win.width(); |
||||
var clientHeight = $win.height(); |
||||
|
||||
$(window).resize(function() { |
||||
var newWidth = $win.width(); |
||||
var newHeight = $win.height(); |
||||
if (newWidth != clientWidth && newHeight != clientHeight) { |
||||
location.replace(location); |
||||
} |
||||
}); |
||||
|
||||
(function($) { |
||||
$.fn.typewriter = function() { |
||||
this.each(function() { |
||||
var $ele = $(this), str = $ele.html(), progress = 0; |
||||
$ele.html(''); |
||||
var timer = setInterval(function() { |
||||
var current = str.substr(progress, 1); |
||||
if (current == '<') { |
||||
progress = str.indexOf('>', progress) + 1; |
||||
} else { |
||||
progress++; |
||||
} |
||||
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : '')); |
||||
if (progress >= str.length) { |
||||
clearInterval(timer); |
||||
} |
||||
}, 75); |
||||
}); |
||||
return this; |
||||
}; |
||||
})(jQuery); |
||||
|
||||
function timeElapse(date){ |
||||
var current = Date(); |
||||
var seconds = (Date.parse(current) - Date.parse(date)) / 1000; |
||||
var days = Math.floor(seconds / (3600 * 24)); |
||||
seconds = seconds % (3600 * 24); |
||||
var hours = Math.floor(seconds / 3600); |
||||
if (hours < 10) { |
||||
hours = "0" + hours; |
||||
} |
||||
seconds = seconds % 3600; |
||||
var minutes = Math.floor(seconds / 60); |
||||
if (minutes < 10) { |
||||
minutes = "0" + minutes; |
||||
} |
||||
seconds = seconds % 60; |
||||
if (seconds < 10) { |
||||
seconds = "0" + seconds; |
||||
} |
||||
var result = "第 <span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span> 小时 <span class=\"digit\">" + minutes + "</span> 分钟 <span class=\"digit\">" + seconds + "</span> 秒";
|
||||
$("#clock").html(result); |
||||
} |
File diff suppressed because one or more lines are too long
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
(function(){var m=function(j){if(j.length<=1)return null;for(var f=[],h=1;h<j.length;h++)f.push(j[h]);return f},n=function(j,f){for(var h=[],k=0;k<j.length;k++)h.push(j[k]);for(;h.length<f;)h.push(void 0);return h},l=function(j){if(!j.modules["async-powerpack"]){if(!j.modules.async)throw Error('Missing essential components, please initialize "jscex-async" module first.');var f=j.Async,h=f.Task,k=f.CanceledError;f.sleep=function(a,b){return h.create(function(c){b&&b.isCancellationRequested&&c.complete("failure", |
||||
new k);var e,d;b&&(d=function(){clearTimeout(e);c.complete("failure",new k)});e=setTimeout(function(){b&&b.unregister(d);c.complete("success")},a);b&&b.register(d)})};f.onEvent=function(a,b,c){return h.create(function(e){c&&c.isCancellationRequested&&e.complete("failure",new k);var d=function(){a.removeEventListener?a.removeEventListener(b,g):a.removeListener?a.removeListener(b,g):a.detachEvent(b,g)},g,i;c&&(i=function(){d();e.complete("failure",new k)});g=function(a){c&&c.unregister(i);d();e.complete("success", |
||||
a)};a.addEventListener?a.addEventListener(b,g):a.addListener?a.addListener(b,g):a.attachEvent(b,g);c&&c.register(i)})};h.whenAll=function(){var a={},b;if(arguments.length==1){var c=arguments[0];h.isTask(c)?(a[0]=c,b=!0):(a=c,b=Object.prototype.toString.call(a)==="[object Array]")}else{for(c=0;c<arguments.length;c++)a[c]=arguments[c];b=!0}return h.create(function(e){var d={},g;for(g in a)if(a.hasOwnProperty(g)){var i=a[g];h.isTask(i)&&(d[i.id]=g)}for(var c in d)i=a[d[c]],i.status=="ready"&&i.start(); |
||||
for(c in d)if(i=a[d[c]],i.error){e.complete("failure",i.error);return}var f=b?[]:{},j=function(b){if(b.error){for(var c in d)a[d[c]].removeEventListener("complete",j);e.complete("failure",b.error)}else f[d[b.id]]=b.result,delete d[b.id],k--,k==0&&e.complete("success",f)},k=0;for(c in d)g=d[c],i=a[g],i.status=="succeeded"?(f[g]=i.result,delete d[i.id]):(k++,i.addEventListener("complete",j));k==0&&e.complete("success",f)})};h.whenAny=function(){var a={};if(arguments.length==1){var b=arguments[0];h.isTask(b)? |
||||
a[0]=b:a=b}else for(b=0;b<arguments.length;b++)a[b]=arguments[b];return h.create(function(b){var e={},d;for(d in a)if(a.hasOwnProperty(d)){var g=a[d];h.isTask(g)&&(e[g.id]=d)}for(var i in e)g=a[e[i]],g.status=="ready"&&g.start();for(i in e)if(d=e[i],g=a[d],g.error||g.status=="succeeded"){b.complete("success",{key:d,task:g});return}var f=function(d){for(var g in e)a[e[g]].removeEventListener("complete",f);b.complete("success",{key:e[d.id],task:d})};for(i in e)a[e[i]].addEventListener("complete",f)})}; |
||||
if(!f.Jscexify)f.Jscexify={};f=f.Jscexify;f.fromStandard=function(a){var b=m(arguments);return function(){var c=this,e=n(arguments,a.length-1);return h.create(function(d){e.push(function(a,c){if(a)d.complete("failure",a);else if(b){for(var e={},f=0;f<b.length;f++)e[b[f]]=arguments[f+1];return d.complete("success",e)}else d.complete("success",c)});a.apply(c,e)})}};f.fromCallback=function(a){var b=m(arguments);return function(){var c=this,e=n(arguments,a.length-1);return h.create(function(d){e.push(function(a){if(b){for(var c= |
||||
{},e=0;e<b.length;e++)c[b[e]]=arguments[e];d.complete("success",c)}else d.complete("success",a)});a.apply(c,e)})}};j.modules["async-powerpack"]=!0}},o=typeof define==="function"&&!define.amd,p=typeof require==="function"&&typeof define==="function"&&define.amd;if(typeof require==="function"&&typeof module!=="undefined"&&module.exports)module.exports.init=l;else if(o)define("jscex-async-powerpack",["jscex-async"],function(j,f,h){h.exports.init=l});else if(p)define("jscex-async-powerpack",["jscex-async"], |
||||
function(){return{init:l}});else{if(typeof Jscex==="undefined")throw Error('Missing the root object, please load "jscex" module first.');l(Jscex)}})(); |
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
(function(){var k=function(){};k.prototype={isCancellation:!0,message:"The task has been cancelled."};typeof __jscex__async__taskIdSeed==="undefined"&&(__jscex__async__taskIdSeed=0);var l=function(b){return typeof b.start==="function"&&typeof b.addEventListener==="function"&&typeof b.removeEventListener==="function"&&typeof b.complete==="function"},j=function(b){if(!b.modules.async){var d=function(){};d.prototype={register:function(a){this.isCancellationRequested&&a();if(!this._handlers)this._handlers= |
||||
[];this._handlers.push(a)},unregister:function(a){this._handlers&&(a=this._handlers.indexOf(a),a>=0&&this._handlers.splice(a,1))},cancel:function(){if(!this.isCancellationRequested){this.isCancellationRequested=!0;var a=this._handlers;delete this._handlers;for(var f=0;f<a.length;f++)try{a[f]()}catch(c){b.logger.warn("[WARNING] Cancellation handler threw an error: "+c)}}},throwIfCancellationRequested:function(){if(this.isCancellationRequested)throw new k;}};var e=function(a){this.id=++__jscex__async__taskIdSeed; |
||||
this._delegate=a;this._listeners={};this.status="ready"};e.prototype={start:function(){if(this.status!="ready")throw Error('Task can only be started in "ready" status.');this.status="running";this._delegate(this)},complete:function(a,f){if(this.status!="running")throw Error('The "complete" method can only be called in "running" status.');var c=this._listeners;delete this._listeners;if(a=="success")this.result=f,this.status="succeeded",this._notify("success",c.success);else if(a=="failure")this.error= |
||||
f,this.status=f.isCancellation?"canceled":"faulted",this._notify("failure",c.failure);else throw Error("Unsupported type: "+a);this._notify("complete",c.complete);this.error&&!c.failure&&!c.complete&&b.logger.warn("[WARNING] An unhandled error occurred: "+this.error)},_notify:function(a,f){if(f)for(var c=0;c<f.length;c++)try{f[c](this)}catch(i){b.logger.warn("[WARNING] The task's "+a+" listener threw an error: "+i)}},addEventListener:function(a,b){this._listeners&&(this._listeners[a]||(this._listeners[a]= |
||||
[]),this._listeners[a].push(b))},removeEventListener:function(a,b){if(this._listeners){var c=this._listeners[a];if(c){var i=c.indexOf(b);i>=0&&c.splice(i,1)}}}};e.create=function(a){return new e(a)};e.isTask=l;var h=function(){};h.prototype={Start:function(a,b){return e.create(function(c){b.next(a,function(a,b){if(a=="normal"||a=="return")c.complete("success",b);else if(a=="throw")c.complete("failure",b);else throw Error("Unsupported type: "+a);})})},Bind:function(a,b){return{next:function(c,e){var d= |
||||
function(a){if(a.error)e("throw",a.error);else{var d;try{d=b.call(c,a.result)}catch(h){e("throw",h);return}d.next(c,e)}};a.status=="ready"?(a.addEventListener("complete",d),a.start()):a.status=="running"?a.addEventListener("complete",d):d(a)}}}};for(var g in b.BuilderBase.prototype)h.prototype[g]=b.BuilderBase.prototype[g];if(!b.Async)b.Async={};g=b.Async;g.CancellationToken=d;g.CanceledError=k;g.Task=e;g.AsyncBuilder=h;if(!b.builders)b.builders={};b.binders.async="$await";b.builders.async=new h; |
||||
b.modules.async=!0}},m=typeof define==="function"&&!define.amd,n=typeof require==="function"&&typeof define==="function"&&define.amd;if(typeof require==="function"&&typeof module!=="undefined"&&module.exports)module.exports.init=function(b){if(!b.modules.builderbase){if(typeof __dirname==="string")try{require.paths.unshift(__dirname)}catch(d){try{module.paths.unshift(__dirname)}catch(e){}}require("jscex-builderbase").init(b)}j(b)};else if(m)define("jscex-async",["jscex-builderbase"],function(b,d, |
||||
e){e.exports.init=function(d){d.modules.builderbase||b("jscex-builderbase").init(d);j(d)}});else if(n)define("jscex-async",["jscex-builderbase"],function(b){return{init:function(d){d.modules.builderbase||b.init(d);j(d)}}});else{if(typeof Jscex==="undefined")throw Error('Missing the root object, please load "jscex" module first.');if(!Jscex.modules.builderbase)throw Error('Missing essential components, please initialize "builderbase" module first.');j(Jscex)}})(); |
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
(function(){var j=function(){};j.prototype={Loop:function(b,c,a,d){return{next:function(e,i){var f=function(b){a.next(e,function(a,e){if(a=="normal"||a=="continue")g(b);else if(a=="throw"||a=="return")i(a,e);else if(a=="break")i("normal");else throw Error('Invalid type for "Loop": '+a);})},g=function(a){try{c&&!a&&c.call(e),!b||b.call(e)?f(!1):i("normal")}catch(d){i("throw",d)}};d?f(!0):g(!0)}}},Delay:function(b){return{next:function(c,a){try{b.call(c).next(c,a)}catch(d){a("throw",d)}}}},Combine:function(b, |
||||
c){return{next:function(a,d){b.next(a,function(b,i,f){if(b=="normal")try{c.next(a,d)}catch(g){d("throw",g)}else d(b,i,f)})}}},Return:function(b){return{next:function(c,a){a("return",b)}}},Normal:function(){return{next:function(b,c){c("normal")}}},Break:function(){return{next:function(b,c){c("break")}}},Continue:function(){return{next:function(b,c){c("continue")}}},Throw:function(b){return{next:function(c,a){a("throw",b)}}},Try:function(b,c,a){return{next:function(d,e){b.next(d,function(b,f,g){if(b!= |
||||
"throw"||!c)a?a.next(d,function(a,c,d){a=="normal"?e(b,f,g):e(a,c,d)}):e(b,f,g);else if(c){var h;try{h=c.call(d,f)}catch(j){a?a.next(d,function(a,b,c){a=="normal"?e("throw",j):e(a,b,c)}):e("throw",j)}h&&h.next(d,function(b,c,f){b=="throw"?a?a.next(d,function(a,d,g){a=="normal"?e(b,c,f):e(a,d,g)}):e(b,c,f):a?a.next(d,function(a,d,g){a=="normal"?e(b,c,f):e(a,d,g)}):e(b,c,f)})}else a.next(d,function(a,c,d){a=="normal"?e(b,f,g):e(a,c,d)})})}}}};var h=function(b){if(!b.modules)b.modules={};if(!b.modules.builderbase)b.modules.builderbase= |
||||
!0,b.BuilderBase=j},k=typeof define==="function"&&!define.amd,l=typeof require==="function"&&typeof define==="function"&&define.amd;if(typeof require==="function"&&typeof module!=="undefined"&&module.exports)module.exports.init=h;else if(k)define("jscex-builderbase",function(b,c,a){a.exports.init=h});else if(l)define("jscex-builderbase",function(){return{init:h}});else{if(typeof Jscex==="undefined")throw Error('Missing the root object, please load "jscex" module first.');h(Jscex)}})(); |
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
(function(){var b={DEBUG:1,INFO:2,WARN:3,ERROR:4},d=function(){this.level=b.WARN};d.prototype={log:function(a){try{console.log(a)}catch(b){}},debug:function(a){this.level<=b.DEBUG&&this.log(a)},info:function(a){this.level<=b.INFO&&this.log(a)},warn:function(a){this.level<=b.WARN&&this.log(a)},error:function(a){this.level<=b.ERROR&&this.log(a)}};var e=function(a){var b=[],c;for(c in a)b.push(c);return b},c=function(a){a._forInKeys=e;a.Logging={Logger:d,Level:b};a.logger=new d;a.modules={};a.binders= |
||||
{};a.builders={}},f=typeof define==="function"&&!define.amd,g=typeof require==="function"&&typeof define==="function"&&define.amd;typeof require==="function"&&typeof module!=="undefined"&&module.exports?c(module.exports):f?define("jscex",function(a,b,d){c(d.exports)}):g?define("jscex",function(){var a={};c(a);return a}):(typeof Jscex=="undefined"&&(Jscex={}),c(Jscex))})(); |
After Width: | Height: | Size: 5.9 KiB |
@ -0,0 +1,537 @@
@@ -0,0 +1,537 @@
|
||||
(function(window){ |
||||
|
||||
function random(min, max) { |
||||
return min + Math.floor(Math.random() * (max - min + 1)); |
||||
} |
||||
|
||||
function bezier(cp, t) {
|
||||
var p1 = cp[0].mul((1 - t) * (1 - t)); |
||||
var p2 = cp[1].mul(2 * t * (1 - t)); |
||||
var p3 = cp[2].mul(t * t);
|
||||
return p1.add(p2).add(p3); |
||||
}
|
||||
|
||||
function inheart(x, y, r) { |
||||
// x^2+(y-(x^2)^(1/3))^2 = 1
|
||||
// http://www.wolframalpha.com/input/?i=x%5E2%2B%28y-%28x%5E2%29%5E%281%2F3%29%29%5E2+%3D+1
|
||||
var z = ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) * ((x / r) * (x / r) + (y / r) * (y / r) - 1) - (x / r) * (x / r) * (y / r) * (y / r) * (y / r); |
||||
return z < 0; |
||||
} |
||||
|
||||
Point = function(x, y) { |
||||
this.x = x || 0; |
||||
this.y = y || 0; |
||||
} |
||||
Point.prototype = { |
||||
clone: function() { |
||||
return new Point(this.x, this.y); |
||||
}, |
||||
add: function(o) { |
||||
p = this.clone(); |
||||
p.x += o.x; |
||||
p.y += o.y; |
||||
return p; |
||||
}, |
||||
sub: function(o) { |
||||
p = this.clone(); |
||||
p.x -= o.x; |
||||
p.y -= o.y; |
||||
return p; |
||||
}, |
||||
div: function(n) { |
||||
p = this.clone(); |
||||
p.x /= n; |
||||
p.y /= n; |
||||
return p; |
||||
}, |
||||
mul: function(n) { |
||||
p = this.clone(); |
||||
p.x *= n; |
||||
p.y *= n; |
||||
return p; |
||||
} |
||||
} |
||||
|
||||
Heart = function() { |
||||
// x = 16 sin^3 t
|
||||
// y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t
|
||||
// http://www.wolframalpha.com/input/?i=x+%3D+16+sin%5E3+t%2C+y+%3D+(13+cos+t+-+5+cos+2t+-+2+cos+3t+-+cos+4t)
|
||||
var points = [], x, y, t; |
||||
for (var i = 10; i < 30; i += 0.2) { |
||||
t = i / Math.PI; |
||||
x = 16 * Math.pow(Math.sin(t), 3); |
||||
y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); |
||||
points.push(new Point(x, y)); |
||||
} |
||||
this.points = points; |
||||
this.length = points.length; |
||||
} |
||||
Heart.prototype = { |
||||
get: function(i, scale) { |
||||
return this.points[i].mul(scale || 1); |
||||
} |
||||
} |
||||
|
||||
Seed = function(tree, point, scale, color) { |
||||
this.tree = tree; |
||||
|
||||
var scale = scale || 1 |
||||
var color = color || '#FF0000'; |
||||
|
||||
this.heart = { |
||||
point : point, |
||||
scale : scale, |
||||
color : color, |
||||
figure : new Heart(), |
||||
} |
||||
|
||||
this.cirle = { |
||||
point : point, |
||||
scale : scale, |
||||
color : color, |
||||
radius : 5, |
||||
} |
||||
} |
||||
Seed.prototype = { |
||||
draw: function() { |
||||
this.drawHeart(); |
||||
this.drawText(); |
||||
}, |
||||
addPosition: function(x, y) { |
||||
this.cirle.point = this.cirle.point.add(new Point(x, y)); |
||||
}, |
||||
canMove: function() { |
||||
return this.cirle.point.y < (this.tree.height + 20);
|
||||
}, |
||||
move: function(x, y) { |
||||
this.clear(); |
||||
this.drawCirle(); |
||||
this.addPosition(x, y); |
||||
}, |
||||
canScale: function() { |
||||
return this.heart.scale > 0.2; |
||||
}, |
||||
setHeartScale: function(scale) { |
||||
this.heart.scale *= scale; |
||||
}, |
||||
scale: function(scale) { |
||||
this.clear(); |
||||
this.drawCirle(); |
||||
this.drawHeart(); |
||||
this.setHeartScale(scale); |
||||
}, |
||||
drawHeart: function() { |
||||
var ctx = this.tree.ctx, heart = this.heart; |
||||
var point = heart.point, color = heart.color,
|
||||
scale = heart.scale; |
||||
ctx.save(); |
||||
ctx.fillStyle = color; |
||||
ctx.translate(point.x, point.y); |
||||
ctx.beginPath(); |
||||
ctx.moveTo(0, 0); |
||||
for (var i = 0; i < heart.figure.length; i++) { |
||||
var p = heart.figure.get(i, scale); |
||||
ctx.lineTo(p.x, -p.y); |
||||
} |
||||
ctx.closePath(); |
||||
ctx.fill(); |
||||
ctx.restore(); |
||||
}, |
||||
drawCirle: function() { |
||||
var ctx = this.tree.ctx, cirle = this.cirle; |
||||
var point = cirle.point, color = cirle.color,
|
||||
scale = cirle.scale, radius = cirle.radius; |
||||
ctx.save(); |
||||
ctx.fillStyle = color; |
||||
ctx.translate(point.x, point.y); |
||||
ctx.scale(scale, scale); |
||||
ctx.beginPath(); |
||||
ctx.moveTo(0, 0); |
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI); |
||||
ctx.closePath(); |
||||
ctx.fill(); |
||||
ctx.restore(); |
||||
}, |
||||
drawText: function() { |
||||
var ctx = this.tree.ctx, heart = this.heart; |
||||
var point = heart.point, color = heart.color,
|
||||
scale = heart.scale; |
||||
ctx.save(); |
||||
ctx.strokeStyle = color; |
||||
ctx.fillStyle = color; |
||||
ctx.translate(point.x, point.y); |
||||
ctx.scale(scale, scale); |
||||
ctx.moveTo(0, 0); |
||||
ctx.lineTo(15, 15); |
||||
ctx.lineTo(60, 15); |
||||
ctx.stroke(); |
||||
|
||||
ctx.moveTo(0, 0); |
||||
ctx.scale(0.75, 0.75); |
||||
ctx.font = "12px 微软雅黑,Verdana"; // 字号肿么没有用? (ˉ(∞)ˉ)
|
||||
ctx.fillText("click here", 23, 16); |
||||
ctx.restore(); |
||||
}, |
||||
clear: function() { |
||||
var ctx = this.tree.ctx, cirle = this.cirle; |
||||
var point = cirle.point, scale = cirle.scale, radius = 26; |
||||
var w = h = (radius * scale); |
||||
ctx.clearRect(point.x - w, point.y - h, 4 * w, 4 * h); |
||||
}, |
||||
hover: function(x, y) { |
||||
var ctx = this.tree.ctx; |
||||
var pixel = ctx.getImageData(x, y, 1, 1); |
||||
return pixel.data[3] == 255 |
||||
} |
||||
} |
||||
|
||||
Footer = function(tree, width, height, speed) { |
||||
this.tree = tree; |
||||
this.point = new Point(tree.seed.heart.point.x, tree.height - height / 2); |
||||
this.width = width; |
||||
this.height = height; |
||||
this.speed = speed || 2; |
||||
this.length = 0; |
||||
} |
||||
Footer.prototype = { |
||||
draw: function() { |
||||
var ctx = this.tree.ctx, point = this.point; |
||||
var len = this.length / 2; |
||||
|
||||
ctx.save(); |
||||
ctx.strokeStyle = 'rgb(35, 31, 32)'; |
||||
ctx.lineWidth = this.height; |
||||
ctx.lineCap = 'round'; |
||||
ctx.lineJoin = 'round'; |
||||
ctx.translate(point.x, point.y); |
||||
ctx.beginPath(); |
||||
ctx.moveTo(0, 0); |
||||
ctx.lineTo(len, 0); |
||||
ctx.lineTo(-len, 0); |
||||
ctx.stroke(); |
||||
ctx.restore(); |
||||
|
||||
if (this.length < this.width) { |
||||
this.length += this.speed; |
||||
} |
||||
} |
||||
} |
||||
|
||||
Tree = function(canvas, width, height, opt) { |
||||
this.canvas = canvas; |
||||
this.ctx = canvas.getContext('2d'); |
||||
this.width = width; |
||||
this.height = height; |
||||
this.opt = opt || {}; |
||||
|
||||
this.record = {}; |
||||
|
||||
this.initSeed(); |
||||
this.initFooter(); |
||||
this.initBranch(); |
||||
this.initBloom(); |
||||
} |
||||
Tree.prototype = { |
||||
initSeed: function() { |
||||
var seed = this.opt.seed || {}; |
||||
var x = seed.x || this.width / 2; |
||||
var y = seed.y || this.height / 2; |
||||
var point = new Point(x, y); |
||||
var color = seed.color || '#FF0000'; |
||||
var scale = seed.scale || 1; |
||||
|
||||
this.seed = new Seed(this, point, scale, color); |
||||
}, |
||||
|
||||
initFooter: function() { |
||||
var footer = this.opt.footer || {}; |
||||
var width = footer.width || this.width; |
||||
var height = footer.height || 5; |
||||
var speed = footer.speed || 2; |
||||
this.footer = new Footer(this, width, height, speed); |
||||
}, |
||||
|
||||
initBranch: function() { |
||||
var branchs = this.opt.branch || [] |
||||
this.branchs = []; |
||||
this.addBranchs(branchs); |
||||
}, |
||||
|
||||
initBloom: function() { |
||||
var bloom = this.opt.bloom || {}; |
||||
var cache = [], |
||||
num = bloom.num || 500,
|
||||
width = bloom.width || this.width, |
||||
height = bloom.height || this.height, |
||||
figure = this.seed.heart.figure; |
||||
var r = 240, x, y; |
||||
for (var i = 0; i < num; i++) { |
||||
cache.push(this.createBloom(width, height, r, figure)); |
||||
} |
||||
this.blooms = []; |
||||
this.bloomsCache = cache; |
||||
}, |
||||
|
||||
toDataURL: function(type) { |
||||
return this.canvas.toDataURL(type); |
||||
}, |
||||
|
||||
draw: function(k) { |
||||
var s = this, ctx = s.ctx; |
||||
var rec = s.record[k]; |
||||
if (!rec) { |
||||
return ; |
||||
} |
||||
var point = rec.point, |
||||
image = rec.image; |
||||
|
||||
ctx.save(); |
||||
ctx.putImageData(image, point.x, point.y); |
||||
ctx.restore(); |
||||
}, |
||||
|
||||
addBranch: function(branch) { |
||||
this.branchs.push(branch); |
||||
}, |
||||
|
||||
addBranchs: function(branchs){ |
||||
var s = this, b, p1, p2, p3, r, l, c; |
||||
for (var i = 0; i < branchs.length; i++) { |
||||
b = branchs[i]; |
||||
p1 = new Point(b[0], b[1]); |
||||
p2 = new Point(b[2], b[3]); |
||||
p3 = new Point(b[4], b[5]); |
||||
r = b[6]; |
||||
l = b[7]; |
||||
c = b[8] |
||||
s.addBranch(new Branch(s, p1, p2, p3, r, l, c));
|
||||
} |
||||
}, |
||||
|
||||
removeBranch: function(branch) { |
||||
var branchs = this.branchs; |
||||
for (var i = 0; i < branchs.length; i++) { |
||||
if (branchs[i] === branch) { |
||||
branchs.splice(i, 1); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
canGrow: function() { |
||||
return !!this.branchs.length; |
||||
}, |
||||
grow: function() { |
||||
var branchs = this.branchs; |
||||
for (var i = 0; i < branchs.length; i++) { |
||||
var branch = branchs[i]; |
||||
if (branch) { |
||||
branch.grow(); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
addBloom: function (bloom) { |
||||
this.blooms.push(bloom); |
||||
}, |
||||
|
||||
removeBloom: function (bloom) { |
||||
var blooms = this.blooms; |
||||
for (var i = 0; i < blooms.length; i++) { |
||||
if (blooms[i] === bloom) { |
||||
blooms.splice(i, 1); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
createBloom: function(width, height, radius, figure, color, alpha, angle, scale, place, speed) { |
||||
var x, y; |
||||
while (true) { |
||||
x = random(20, width - 20); |
||||
y = random(20, height - 20); |
||||
if (inheart(x - width / 2, height - (height - 40) / 2 - y, radius)) { |
||||
return new Bloom(this, new Point(x, y), figure, color, alpha, angle, scale, place, speed); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
canFlower: function() { |
||||
return !!this.blooms.length; |
||||
},
|
||||
flower: function(num) { |
||||
var s = this, blooms = s.bloomsCache.splice(0, num); |
||||
for (var i = 0; i < blooms.length; i++) { |
||||
s.addBloom(blooms[i]); |
||||
} |
||||
blooms = s.blooms; |
||||
for (var j = 0; j < blooms.length; j++) { |
||||
blooms[j].flower(); |
||||
} |
||||
}, |
||||
|
||||
snapshot: function(k, x, y, width, height) { |
||||
var ctx = this.ctx; |
||||
var image = ctx.getImageData(x, y, width, height);
|
||||
this.record[k] = { |
||||
image: image, |
||||
point: new Point(x, y), |
||||
width: width, |
||||
height: height |
||||
} |
||||
}, |
||||
setSpeed: function(k, speed) { |
||||
this.record[k || "move"].speed = speed; |
||||
}, |
||||
move: function(k, x, y) { |
||||
var s = this, ctx = s.ctx; |
||||
var rec = s.record[k || "move"]; |
||||
var point = rec.point, |
||||
image = rec.image, |
||||
speed = rec.speed || 10, |
||||
width = rec.width, |
||||
height = rec.height;
|
||||
|
||||
i = point.x + speed < x ? point.x + speed : x; |
||||
j = point.y + speed < y ? point.y + speed : y;
|
||||
|
||||
ctx.save(); |
||||
ctx.clearRect(point.x, point.y, width, height); |
||||
ctx.putImageData(image, i, j); |
||||
ctx.restore(); |
||||
|
||||
rec.point = new Point(i, j); |
||||
rec.speed = speed * 0.95; |
||||
|
||||
if (rec.speed < 2) { |
||||
rec.speed = 2; |
||||
} |
||||
return i < x || j < y; |
||||
}, |
||||
|
||||
jump: function() { |
||||
var s = this, blooms = s.blooms; |
||||
if (blooms.length) { |
||||
for (var i = 0; i < blooms.length; i++) { |
||||
blooms[i].jump(); |
||||
} |
||||
}
|
||||
if ((blooms.length && blooms.length < 3) || !blooms.length) { |
||||
var bloom = this.opt.bloom || {}, |
||||
width = bloom.width || this.width, |
||||
height = bloom.height || this.height, |
||||
figure = this.seed.heart.figure; |
||||
var r = 240, x, y; |
||||
for (var i = 0; i < random(1,2); i++) { |
||||
blooms.push(this.createBloom(width / 2 + width, height, r, figure, null, 1, null, 1, new Point(random(-100,600), 720), random(200,300))); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
Branch = function(tree, point1, point2, point3, radius, length, branchs) { |
||||
this.tree = tree; |
||||
this.point1 = point1; |
||||
this.point2 = point2; |
||||
this.point3 = point3; |
||||
this.radius = radius; |
||||
this.length = length || 100;
|
||||
this.len = 0; |
||||
this.t = 1 / (this.length - 1);
|
||||
this.branchs = branchs || []; |
||||
} |
||||
|
||||
Branch.prototype = { |
||||
grow: function() { |
||||
var s = this, p;
|
||||
if (s.len <= s.length) { |
||||
p = bezier([s.point1, s.point2, s.point3], s.len * s.t); |
||||
s.draw(p); |
||||
s.len += 1; |
||||
s.radius *= 0.97; |
||||
} else { |
||||
s.tree.removeBranch(s); |
||||
s.tree.addBranchs(s.branchs); |
||||
} |
||||
}, |
||||
draw: function(p) { |
||||
var s = this; |
||||
var ctx = s.tree.ctx; |
||||
ctx.save(); |
||||
ctx.beginPath(); |
||||
//深黑色 rgb(35, 31, 32);
|
||||
//RGB(0,139,139)
|
||||
// RGB(102,205,170)
|
||||
// RGB(34,139,34)
|
||||
ctx.fillStyle = 'RGB(0,128,128)'; |
||||
ctx.shadowColor = '#22b822'; |
||||
ctx.shadowBlur = 2; |
||||
ctx.moveTo(p.x, p.y); |
||||
ctx.arc(p.x, p.y, s.radius, 0, 2 * Math.PI); |
||||
ctx.closePath(); |
||||
ctx.fill(); |
||||
ctx.restore(); |
||||
} |
||||
} |
||||
|
||||
Bloom = function(tree, point, figure, color, alpha, angle, scale, place, speed) { |
||||
this.tree = tree; |
||||
this.point = point; |
||||
this.color = color || 'rgb(255,' + random(0, 255) + ',' + random(0, 255) + ')'; |
||||
this.alpha = alpha || random(0.3, 1); |
||||
this.angle = angle || random(0, 360); |
||||
this.scale = scale || 0.1; |
||||
this.place = place; |
||||
this.speed = speed; |
||||
|
||||
this.figure = figure; |
||||
} |
||||
Bloom.prototype = { |
||||
setFigure: function(figure) { |
||||
this.figure = figure; |
||||
}, |
||||
flower: function() { |
||||
var s = this; |
||||
s.draw(); |
||||
s.scale += 0.1; |
||||
if (s.scale > 1) { |
||||
s.tree.removeBloom(s); |
||||
} |
||||
}, |
||||
draw: function() { |
||||
var s = this, ctx = s.tree.ctx, figure = s.figure; |
||||
|
||||
ctx.save(); |
||||
ctx.fillStyle = s.color; |
||||
ctx.globalAlpha = s.alpha; |
||||
ctx.translate(s.point.x, s.point.y); |
||||
ctx.scale(s.scale, s.scale); |
||||
ctx.rotate(s.angle); |
||||
ctx.beginPath(); |
||||
ctx.moveTo(0, 0); |
||||
for (var i = 0; i < figure.length; i++) { |
||||
var p = figure.get(i); |
||||
ctx.lineTo(p.x, -p.y); |
||||
} |
||||
ctx.closePath(); |
||||
ctx.fill(); |
||||
ctx.restore(); |
||||
}, |
||||
jump: function() { |
||||
var s = this, height = s.tree.height; |
||||
|
||||
if (s.point.x < -20 || s.point.y > height + 20) { |
||||
s.tree.removeBloom(s); |
||||
} else { |
||||
s.draw(); |
||||
s.point = s.place.sub(s.point).div(s.speed).add(s.point); |
||||
s.angle += 0.05; |
||||
s.speed -= 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
window.random = random; |
||||
window.bezier = bezier; |
||||
window.Point = Point; |
||||
window.Tree = Tree; |
||||
|
||||
})(window); |
@ -0,0 +1,221 @@
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
||||
<title>Love Story</title> |
||||
<link rel="icon" type="image/x-icon" href="https://i.loli.net/2021/06/03/lFg2V4WUcmkB98G.png"> |
||||
<meta name="language" content="zh-CN"> |
||||
<link type="text/css" rel="stylesheet" href="./Love_files/default.css"> |
||||
<script type="text/javascript" src="./Love_files/jquery.min.js"></script> |
||||
<script type="text/javascript" src="./Love_files/jscex.min.js"></script> |
||||
<script type="text/javascript" src="./Love_files/jscex-parser.js"></script> |
||||
<script type="text/javascript" src="./Love_files/jscex-jit.js"></script> |
||||
<script type="text/javascript" src="./Love_files/jscex-builderbase.min.js"></script> |
||||
<script type="text/javascript" src="./Love_files/jscex-async.min.js"></script> |
||||
<script type="text/javascript" src="./Love_files/jscex-async-powerpack.min.js"></script> |
||||
<script type="text/javascript" src="./Love_files/functions.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="./Love_files/love.js" charset="utf-8"></script> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
<div id="main"> |
||||
<div id="error">亲,您使用的浏览器无法支持即将显示的内容,请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器~</div> |
||||
<div id="wrap"> |
||||
<div id="text"> |
||||
<div id="code"> |
||||
<span class="say">一定要爱你</span><br><br> |
||||
<span class="say">我知道你是一个天真善良温柔的女孩</span><br> |
||||
<span class="say">真的希望自己能够配上你</span><br> |
||||
<span class="say">如果你能给我机会让我好好的爱你</span><br> |
||||
<span class="say">真的只想真心真意对你说</span><br> |
||||
<br> |
||||
<span class="say">我爱你一定爱到花都开了 鸟儿把歌唱</span><br> |
||||
<span class="say">爱到牛郎织女为我们点头</span><br> |
||||
<span class="say">爱到花儿绽放鸟儿成群 把我们环绕</span><br> |
||||
<span class="say">爱到每道彩虹映出你的美</span><br> |
||||
<br> |
||||
<span class="say">我爱你一定爱到海枯石烂 永远不后悔</span><br> |
||||
<span class="say">爱到来生来世也会说无悔</span><br> |
||||
<span class="say">就把这首动听的歌唱给心爱的女孩</span><br> |
||||
<span class="say">真的希望你能给我个机会</span><br> |
||||
<span class="say">让我去爱你</span><br> |
||||
<br> |
||||
<span class="say"><span class="space"></span> -- 你的,太阳。</span> |
||||
</div> |
||||
</div> |
||||
<div id="clock-box"> |
||||
<a href="javascript:void(0)" style="color: red;">犇犇</a> 和 <a href="javascript:void(0)" style="color: red;">绒绒</a> 在一起的 |
||||
<div id="clock"></div> |
||||
</div> |
||||
<canvas id="canvas" width="1100" height="680"></canvas> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
<script> |
||||
(function () { |
||||
var canvas = $('#canvas'); |
||||
|
||||
if (!canvas[0].getContext) { |
||||
$("#error").show(); |
||||
return false; |
||||
} |
||||
|
||||
var width = canvas.width(); |
||||
var height = canvas.height(); |
||||
|
||||
canvas.attr("width", width); |
||||
canvas.attr("height", height); |
||||
|
||||
var opts = { |
||||
seed: { |
||||
x: width / 2 - 20, |
||||
color: "rgb(190, 26, 37)", |
||||
scale: 2 |
||||
}, |
||||
branch: [ |
||||
[535, 680, 570, 250, 500, 200, 30, 100, [ |
||||
[540, 500, 455, 417, 340, 400, 13, 100, [ |
||||
[450, 435, 434, 430, 394, 395, 2, 40] |
||||
]], |
||||
[550, 445, 600, 356, 680, 345, 12, 100, [ |
||||
[578, 400, 648, 409, 661, 426, 3, 80] |
||||
]], |
||||
[539, 281, 537, 248, 534, 217, 3, 40], |
||||
[546, 397, 413, 247, 328, 244, 9, 80, [ |
||||
[427, 286, 383, 253, 371, 205, 2, 40], |
||||
[498, 345, 435, 315, 395, 330, 4, 60] |
||||
]], |
||||
[546, 357, 608, 252, 678, 221, 6, 100, [ |
||||
[590, 293, 646, 277, 648, 271, 2, 80] |
||||
]] |
||||
]] |
||||
], |
||||
bloom: { |
||||
num: 700, |
||||
width: 1080, |
||||
height: 650, |
||||
}, |
||||
footer: { |
||||
width: 1200, |
||||
height: 5, |
||||
speed: 10, |
||||
} |
||||
} |
||||
|
||||
var tree = new Tree(canvas[0], width, height, opts); |
||||
var seed = tree.seed; |
||||
var foot = tree.footer; |
||||
var hold = 1; |
||||
|
||||
canvas.click(function (e) { |
||||
var offset = canvas.offset(), x, y; |
||||
x = e.pageX - offset.left; |
||||
y = e.pageY - offset.top; |
||||
if (seed.hover(x, y)) { |
||||
hold = 0; |
||||
canvas.unbind("click"); |
||||
canvas.unbind("mousemove"); |
||||
canvas.removeClass('hand'); |
||||
} |
||||
}).mousemove(function (e) { |
||||
var offset = canvas.offset(), x, y; |
||||
x = e.pageX - offset.left; |
||||
y = e.pageY - offset.top; |
||||
canvas.toggleClass('hand', seed.hover(x, y)); |
||||
}); |
||||
|
||||
var seedAnimate = eval(Jscex.compile("async", function () { |
||||
seed.draw(); |
||||
while (hold) { |
||||
$await(Jscex.Async.sleep(10)); |
||||
} |
||||
while (seed.canScale()) { |
||||
seed.scale(0.95); |
||||
$await(Jscex.Async.sleep(10)); |
||||
} |
||||
while (seed.canMove()) { |
||||
seed.move(0, 2); |
||||
foot.draw(); |
||||
$await(Jscex.Async.sleep(10)); |
||||
} |
||||
})); |
||||
|
||||
var growAnimate = eval(Jscex.compile("async", function () { |
||||
do { |
||||
tree.grow(); |
||||
$await(Jscex.Async.sleep(10)); |
||||
} while (tree.canGrow()); |
||||
})); |
||||
|
||||
var flowAnimate = eval(Jscex.compile("async", function () { |
||||
do { |
||||
tree.flower(2); |
||||
$await(Jscex.Async.sleep(10)); |
||||
} while (tree.canFlower()); |
||||
})); |
||||
|
||||
var moveAnimate = eval(Jscex.compile("async", function () { |
||||
tree.snapshot("p1", 240, 0, 610, 680); |
||||
while (tree.move("p1", 500, 0)) { |
||||
foot.draw(); |
||||
$await(Jscex.Async.sleep(10)); |
||||
} |
||||
foot.draw(); |
||||
tree.snapshot("p2", 500, 0, 610, 680); |
||||
|
||||
// 会有闪烁不得意这样做, (>﹏<) |
||||
canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")"); |
||||
canvas.css("background", "#ffc0cb"); |
||||
$await(Jscex.Async.sleep(300)); |
||||
canvas.css("background", "none"); |
||||
})); |
||||
|
||||
var jumpAnimate = eval(Jscex.compile("async", function () { |
||||
var ctx = tree.ctx; |
||||
while (true) { |
||||
tree.ctx.clearRect(0, 0, width, height); |
||||
tree.jump(); |
||||
foot.draw(); |
||||
$await(Jscex.Async.sleep(25)); |
||||
} |
||||
})); |
||||
|
||||
var textAnimate = eval(Jscex.compile("async", function () { |
||||
var together = new Date(); |
||||
together.setFullYear(2017, 02, 19); |
||||
together.setHours(0); |
||||
together.setMinutes(0); |
||||
together.setSeconds(0); |
||||
together.setMilliseconds(0); |
||||
|
||||
$("#code").show().typewriter(); |
||||
$("#clock-box").fadeIn(500); |
||||
while (true) { |
||||
timeElapse(together); |
||||
$await(Jscex.Async.sleep(1000)); |
||||
} |
||||
})); |
||||
|
||||
var runAsync = eval(Jscex.compile("async", function () { |
||||
$await(seedAnimate()); |
||||
$await(growAnimate()); |
||||
$await(flowAnimate()); |
||||
$await(moveAnimate()); |
||||
|
||||
textAnimate().start(); |
||||
|
||||
$await(jumpAnimate()); |
||||
})); |
||||
|
||||
runAsync().start(); |
||||
})(); |
||||
</script> |
||||
|
||||
|
||||
|
||||
</body> |
||||
|
||||
</html> |
Binary file not shown.
Loading…
Reference in new issue