Browse Source

连点7次进入演示模式

master
song 4 years ago
parent
commit
eab69b17b6
  1. 32
      README.md
  2. 5420
      package-lock.json
  3. 18
      src/classes/count.js
  4. 4
      src/classes/time.js
  5. 1
      src/custom.js
  6. 28
      src/index.js
  7. 57
      src/test.js

32
README.md

@ -1,5 +1,13 @@
# 鸟妈妈回家
# 运行步骤
1. git clone https://dd.tall.wiki/gitea/ccsens_fe/bird-go-home.git
2. 全局安装gulp npm i gulp -g
3. npm i 或者 yarn
4. 运行gulp
5. 运行vscode的live server
6. 部署服务器 dist目录
## 游戏介绍
@ -100,31 +108,16 @@
```js
<script src="libs/1.0.0/createjs.min.js"></script>
<script src="bird.js"></script>
<script src="js/index.js"></script>
<script src="js/custom.js"></script>
<script src="js/classes/bird.js"></script>
<script src="js/classes/count.js"></script>
<script src="js/classes/back.js"></script>
<script src="js/classes/time.js"></script>
<script src="js/classes/level.js"></script>
<script src="js/classes/sound.js"></script>
<script src="js/classes/end.js"></script>
<script src="js/test.js"></script>
<script src="main.js"></script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<body onload="init();" style="margin: 0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:720px">
<canvas id="canvas" width="1280" height="720" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:720px; position: absolute; left: 0px; top: 0px; display: none;">
</div>
</div>
<div id='_preload_div_' style='position:absolute; top:0; left:0; display: inline-block; height:720px; width: 1280px; text-align: center;'> <span style='display: inline-block; height: 100%; vertical-align: middle;'></span> <img src=images/_preloader.gif style='vertical-align: middle; max-height: 100%'/></div>
<div style="position: fixed; top: 0; left: 0; z-index: 999;padding: 20px">
<h3>测试功能区</h3>
<button onclick="Count.of()">开始倒计时</button>
<button onclick="timeInstance.start()">开始游戏</button>
<button>结束游戏</button>
</div>
</body>
```
@ -139,6 +132,7 @@ function handleComplete(evt, comp) {
var ss = comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
// for循环 i=0; 前面需要加 let, 否则编译会报错
for (i = 0; i < ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet({ images: [queue.getResult(ssMetadata[i].name)], frames: ssMetadata[i].frames });
}
@ -183,7 +177,7 @@ let state = 0; // 游戏状态 0->未开始 1->进行中 2->结束
function initStage(lib) {
library = lib;
window.bird = Bird.of(gameOver); // 初始化鸟等
window.main = Main.of(gameOver); // 初始化鸟等
window.timeInstance = Time.of(gameOver); // 初始化游戏时间
// window.soundInstance = Sound.of(); // 初始化音频
Level.of(2); // 游戏难度级别
@ -193,7 +187,7 @@ function initStage(lib) {
// 游戏结束 显示结束得分面板
function gameOver() {
state = 2;
const times = bird.times;
const times = main.times;
const score = parseInt((config.total / config.times) * times);
End.of(score);
}

5420
package-lock.json

File diff suppressed because it is too large

18
src/classes/count.js

@ -9,8 +9,9 @@
* @property {number} default 倒计时值
* @property {number} timer 计时器id
* @property {object} lib 库对象
* @property {function} countEndCallback 结束回调函数
*/
function Count(startTime = Date.now(), defaultCount = config.count || 5) {
function Count(countEndCallback, startTime, defaultCount = config.count || 5) {
this.default = defaultCount;
this.startTime = startTime;
@ -18,16 +19,18 @@ function Count(startTime = Date.now(), defaultCount = config.count || 5) {
this.text = null;
this.timer = null;
this.lib = library;
this.countEndCallback = countEndCallback;
}
/**
* 静态方法 封装new init方法
* 使用时直接调用此方法
* @param {function} countEndCallback 倒计时结束的回调函数
* @param {number} defaultCount 倒计时时长
* @returns
*/
Count.of = function (defaultCount) {
const instance = new Count(defaultCount);
Count.of = function (countEndCallback, startTime = Date.now(), defaultCount) {
const instance = new Count(countEndCallback, startTime, defaultCount);
instance.init();
return instance;
};
@ -64,12 +67,12 @@ Count.prototype.renderContent = function () {
// 更新倒计时文本
Count.prototype.update = function (time) {
if (time <= 0) {
console.log(time);
// 发送倒计时结束的消息
clearInterval(this.timer);
stage.removeChild(this.text);
stage.removeChild(this.modal);
// sendEndCountRequest(); // 发送倒计时结束的消息
this.countEnd();
return;
}
@ -86,3 +89,10 @@ Count.prototype.renderText = function (time) {
this.text = text;
stage.addChild(text);
};
// 结束倒计时 开始游戏
Count.prototype.countEnd = function () {
console.log('结束倒计时: ');
// 执行结束后的回调
this.countEndCallback();
};

4
src/classes/time.js

@ -43,21 +43,23 @@ Time.of = function (endCallback, duration = config.duration || 60, count = confi
// 初始化
Time.prototype.init = function () {
console.log('初始化');
this.renderBg();
this.renderText(this.duration);
};
// 开始游戏 开始倒计时
Time.prototype.start = function (startTime = Date.now()) {
console.log('开始游戏: ');
this.started = true;
state = 1;
this.startTime = startTime;
this.update();
console.log('开始游戏: ', state);
};
// 开始游戏 开始倒计时
Time.prototype.end = function () {
console.log('结束游戏');
this.started = false;
this.timerId && clearTimeout(this.timerId);
this.timerId = null;

1
src/custom.js

@ -21,6 +21,7 @@ function initStage(lib) {
// 游戏结束 显示结束得分面板
function gameOver() {
console.log('显示结束得分面板');
state = 2;
const times = main.times;
const score = parseInt((config.total / config.times) * times);

28
src/index.js

@ -1,8 +1,5 @@
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
// 连点7次开始游戏
startGame();
canvas = document.getElementById('canvas');
anim_container = document.getElementById('animation_container');
dom_overlay_container = document.getElementById('dom_overlay_container');
@ -52,28 +49,3 @@ function handleComplete(evt, comp) {
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
function startGame() {
var count = 0,
timer;
document.onclick = function () {
if (count < 6) {
if (timer) {
clearTimeout(timer);
}
count++;
timer = setTimeout(function () {
count = 0;
}, 300);
} else if (count === 6) {
count = 0;
clearTimeout(timer);
sevenClick();
}
};
function sevenClick() {
console.log('连点7次开始游戏');
timeInstance.start();
main.play();
}
}

57
src/test.js

@ -0,0 +1,57 @@
// window.hash = '#p';
isHash();
// 判断是否在演示模式 能否直接开始游戏
function isHash() {
console.log('window.hash: ', window.hash);
if (window.hash && window.hash === '#p') {
Count.of(countOver);
} else {
// 连点7次触发倒计时
startGame();
}
}
function startGame() {
var count = 0,
timer;
document.onclick = function () {
if (count < 6) {
if (timer) {
clearTimeout(timer);
}
count++;
timer = setTimeout(function () {
count = 0;
}, 300);
} else if (count === 6) {
count = 0;
clearTimeout(timer);
sevenClick();
}
};
}
function sevenClick() {
console.log('连点7次开始游戏');
window.count = Count.of(countOver);
addHash();
}
// 倒计时结束 开始游戏
function countOver() {
timeInstance.start();
}
// 添加hash值
function addHash() {
window.hash = '#p';
}
function test() {
document.addEventListener('click', () => {
main.play();
});
}
test();
Loading…
Cancel
Save