<html>
<head>
<title>電流急急棒</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="background-color:#d3d3d3"></canvas>
<script src="demo.js"></script>
<script>
</script>
</body>
</html>
/* globals createjs */
// 宣告====================================
// 初始 -------
var cjs = createjs;
var canvas = document.getElementById( "canvas" );
var stage = new createjs.Stage( canvas );
var iWinW = window.innerWidth;
var iWinH = window.innerHeight;
var container;
var shapeCircle;
var ptLeft;
var ptRight;
createjs.Touch.enable(stage);
// target 圓 -------
var iWidthCircle = 20; // 圓半徑
var sColorCircle = "gold";
// Obstruct 障礙物 -------
// Line 線 -------
var sColorLine = "#666";
var iWidthLine = 140; // 線的寬度
var iDotY = iWinW * 0.6; // y軸距離
var iMapLen = 10; // 關卡節點
var iMapH; // 關卡總長
var saveDot = 2; // 緩衝長度
// 動畫 -------
var iSpf = 60; // fps
var iSpeedLine = 7; //移動速度
// ====================================
// 載入畫面 ================
if (iWinW >= 768){
iWidthCircle = 30;
iWidthLine = 250;
iDotY = iWinW * 0.4;
iSpeedLine = 10;
}
canvas.width = iWinW ;
canvas.height = iWinH - 5;
fnMessage("rule");
// ================
// 初始 - 產生元素 ====================================
function init(){
// 加入元素 -----------
var iMap = [];
for (var i=0; i<iMapLen; i++){
iMap.push(fnRandomColor(-1,1));
}
fnDrawTarget();
fnDrawLine();
container = new createjs.Container();
container.addChild( oLine, shapeCircle );
stage.addChild(container);
fnEventLis();
// init - 畫圓 ========================
function fnDrawTarget(){
shapeCircle = new cjs.Shape();
shapeCircle.graphics
.beginFill( sColorCircle )
.drawCircle( 0, 0, iWidthCircle )
.endFill();
stage.enableMouseOver();
shapeCircle.cursor = "pointer";
shapeCircle.cache(-iWidthCircle, -iWidthCircle, iWidthCircle*2, iWidthCircle*2);
shapeCircle.x = iWinW/2;
shapeCircle.y = iWidthCircle*2 ;
}
// init - 畫線 =====================
function fnDrawLine(){
oLine = fnCreateLine();
oLine.x = iWinW/2;
oLine.y = -iDotY;
iMapH = oLine.getBounds().height;
// 產生線 ========================
function fnCreateLine() {
var shape = new createjs.Shape();
// 滑鼠點下
function LineStart( x , y) {
lastPt = new createjs.Point(x , y);
oldMidPt = lastPt.clone();
}
// 滑鼠移動
function LineDot(x, y) {
// 取得按下時和目前滑鼠座標的一半值。
x = (iWinW/2) * x;
var nowMidPt = new createjs.Point(
lastPt.x + x >> 1,
lastPt.y + y >> 1
);
// 畫線
shape.graphics
.setStrokeStyle(iWidthLine, 'round', 'round')
.beginStroke(sColorLine)
.moveTo( oldMidPt.x, oldMidPt.y )
.curveTo(lastPt.x, lastPt.y, nowMidPt.x, nowMidPt.y);
lastPt.x = x;
lastPt.y = y;
oldMidPt.x = nowMidPt.x;
oldMidPt.y = nowMidPt.y;
}
// 畫起始點 -----------
LineStart(0, 0);
LineDot(0, iDotY*saveDot);
// 畫接下來每一點
for (var i=saveDot+1, len=iMap.length; i<len; i++){
y = i * iDotY;
LineDot(iMap[i], y);
}
// cache
shape.cache(-iWinW/2 , iWidthLine, iWinW, iMap.length*iDotY);
return shape;
}
}
// init - 監聽 ========================
function fnEventLis(){
// 監聽事件 - 滑鼠按下 ------------
var isMouseDown;
var handleMouseDown = function ( event ) {
isMouseDown = true;
fnMoveCircle();
};
// 監聽事件 - 滑鼠移動 ------------
var handleMouseMove = function ( event ) {
if ( !isMouseDown ) {
return;
}
// 更新最後一個點的位置
fnMoveCircle();
};
// 監聽事件 - 滑鼠點開 ------------
var handleMouseUp = function ( event ) {
isMouseDown = false;
};
// 綁定監聽動作
stage.addEventListener( "stagemousedown", handleMouseDown );
stage.addEventListener( "stagemousemove", handleMouseMove );
stage.addEventListener( "stagemouseup", handleMouseUp );
}
cjs.Ticker.timingMode = cjs.Ticker.RAF_SYNCHED;
cjs.Ticker.setFPS( iSpf );
cjs.Ticker.addEventListener( 'tick', tickHandler );
console.log("start");
}
// 移動動畫 ========================
function fnMoveLine(target){
target.y -= iSpeedLine;
}
function fnMoveCircle(){
TweenMax.to( shapeCircle, 0.3, {x:stage.mouseX, y:stage.mouseY, ease:Back.easeOut});
}
// 碰撞檢測 ========================
function fnHit(){
ptLeft = shapeCircle.localToLocal(-iWidthCircle,-iWidthCircle,oLine);
ptRight = shapeCircle.localToLocal(iWidthCircle,iWidthCircle,oLine);
if (oLine.hitTest(ptRight.x, ptRight.y) && oLine.hitTest(ptLeft.x, ptLeft.y)) {
oLine.alpha = 1;
}else{
fnMessage("fail");
oLine.alpha = 0.3;
}
}
// tickHandler ========================
var tickHandler = function () {
var winScroll = oLine.y - iDotY;
if ( winScroll > -iMapH + iWinH ){
fnMoveLine(oLine);
fnHit();
}else {
fnMessage("success");
}
stage.update();
};
// 訊息 - 判斷有無過關 ========================
function fnMessage(result){
switch(result){
// 規則說明 ------------
case "rule":
swal({
title: "規則說明",
text: "按住滑鼠拖曳圓球,讓球維持在軌道內",
confirmButtonText: "OK 我了解",
confirmButtonColor: "#666",
closeOnCancel: false
},init);
break;
// 成功 ------------
case "success":
createjs.Ticker.removeEventListener('tick',tickHandler);
swal({
title: "過關!!!",
text: "再玩一次?",
confirmButtonText: "好主意",
closeOnCancel: false
},fnRestart);
break;
// 失敗 ------------
case "fail":
createjs.Ticker.removeEventListener('tick',tickHandler);
swal({
title: "Oops!",
text: "碰到了,要再試一次嗎?",
closeOnCancel: false
},fnRestart);
break;
}
function fnRestart(){
container.removeAllChildren();
init();
}
}
// random範圍整數
function fnRandomColor(min, max) {
var x = Math.random() * (max - min) + min;
return x.toFixed(1);
}
Output
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |