建資網管 賴昱錡
-
三四個很水的專案
whack-a-mole
demo: here
<div class="content">
<div class="row">
<img src="yellow.png" class="cell" title="yellow"/>
</div>
<div class="row">
<img src="yellow.png" class="cell" title="yellow"/>
</div>
<div class="row">
<img src="yellow.png" class="cell" title="yellow"/>
</div>
<div class="control">
<div class="msg">
<span id="time">剩餘時間:0s</span>
<button>遊戲開始</button>
<span id="combo">成績分數:0</span>
</div>
<hr />
<b>遊戲說明</b>
<p>打地鼠遊戲,請點擊紅色圖片獲得分數(滿分 100)</p>
<hr />
</div>
</div>
HTML
body{
margin:0;
display: flex;
justify-content: center;
height:100vh;
text-align: center;
}
.content{
display:flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.cell{
background: yellow;
border:5px solid #6bd1eb;
cursor: pointer;
width:100px;
height:100px;
}
.control{
max-width:350px;
}
.msg{
margin:5px auto;
display: flex;
justify-content: space-around;
line-height: 2rem;
}
button,span{
width:33%;
}
CSS
//初始化
var btn=document.getElementsByTagName("button")[0]; //button
var time=document.getElementById("time"); //find time
var combo=document.getElementById("combo"); //find score
var animal=document.getElementsByClassName("cell");
var flag=0; //game over?
var sec=0,count=0;
var beYellow=new Array(); //到時候會存放所有 red 事件的轉黃定時器,陣列有 100 個位置
btn.addEventListener("click",gamestart); //規劃點選動作
初始化
function gamestart(){
sec=60,count=0,flag=1;
time.textContent=`剩餘時間:${sec}`;
combo.textContent=`成績分數:${count}`;
btn.removeEventListener("click",gamestart);
let start=setInterval(()=>{
if(sec==0){
clearInterval(start);
flag=0;
btn.addEventListener("click",gamestart);
}
else{
sec--;
time.textContent=`剩餘時間:${sec}`;
}
},1000);
for(let i=0;i<100;i++){
let ontime=Math.floor(Math.random()*57000);
let which=Math.floor(Math.random()*9);
let delay=Math.floor(Math.random()*3)+2;
setTimeout(function(){
showit(which,delay,i);
},ontime);
}
}
遊戲開始
function showit(siWhich,siDelay,siId){
if(animal[siWhich].title!="yellow"){
let next=(siWhich+1)%9;
let next=Math.floor(Math.random()*9);
setTimeout(function(){
showit(next,siDelay,siId);
},100);
}
else{
animal[siWhich].src="red.png";
animal[siWhich].style.background="red";
animal[siWhich].title="red";
animal[siWhich].alt=siId;
beYellow[siId]=setTimeout(() => {
animal[siWhich].src="yellow.png";
animal[siWhich].style.background=null;
animal[siWhich].title="yellow";
animal[siWhich].alt=null;
}, siDelay*1000);
}
}
燈號的觸發處理
document.onkeydown=keyboard;
function keyboard(){
if(flag){
switch (event.keyCode) {
case 103: getcount(0);break;
case 104: getcount(1);break;
case 105: getcount(2);break;
case 100: getcount(3);break;
case 101: getcount(4);break;
case 102: getcount(5);break;
case 97: getcount(6);break;
case 98: getcount(7);break;
case 99: getcount(8);break;
}
}
}
keyboard processing
function getcount(who) {
if(animal[who].title=="red"){
animal[who].src="green.png";
animal[who].style.background="green";
animal[who].title="green";
count++;
combo.textContent=`Score:${count}`;
id=animal[who].alt;
clearTimeout(beYellow[id]);
animal[who].alt=null;
setTimeout(() => {
animal[who].src="yellow.png";
animal[who].style.background=null;
animal[who].title="yellow";
}, 1000);
}
}
Score
discord.js
ffmpeg
Record, convert and stream audio and video.
opus encoder
download yt video
const { Client } = require('discord.js');
const ytdl = require('ytdl-core');
const { token } = require('./token.json');
const { prefix } = require('./config.json');
const client = new Client();
class Music {
constructor() {
this.queue = {};
this.connection = {};
this.dispatcher = {};
}
async join(msg) {
if (msg.member.voice.channel !== null) {
this.connection[msg.guild.id] = await msg.member.voice.channel.join();
} else {
msg.channel.send('Please join a voice channel.');
}
}
async play(msg) {
const guildID = msg.guild.id;
if (!this.connection[guildID]) {
msg.channel.send('請先將機器人 `!!join` 加入頻道');
return;
}
if (this.connection[guildID].status === 4) {
msg.channel.send('請先將機器人 `!!join` 重新加入頻道');
return;
}
const musicURL = msg.content.replace(`${prefix}play`, '').trim();
try {
const res = await ytdl.getInfo(musicURL);
const info = res.videoDetails;
if (!this.queue[guildID]) {
this.queue[guildID] = [];
}
this.queue[guildID].push({
name: info.title,
url: musicURL
});
if (this.isPlaying[guildID]) {
msg.channel.send(`歌曲加入隊列:${info.title}`);
} else {
this.isPlaying[guildID] = true;
this.playMusic(msg, guildID, this.queue[guildID][0]);
}
} catch(e) {
console.log(e);
}
}
playMusic(msg, guildID, musicInfo) {
msg.channel.send(`播放音樂:${musicInfo.name}`);
this.dispatcher[guildID] = this.connection[guildID].play(ytdl(musicInfo.url, { filter: 'audioonly' }));
this.dispatcher[guildID].setVolume(0.5);
this.queue[guildID].shift();
this.dispatcher[guildID].on('finish', () => {
if (this.queue[guildID].length > 0) {
this.playMusic(msg, guildID, this.queue[guildID][0]);
} else {
this.isPlaying[guildID] = false;
msg.channel.send('目前沒有音樂了,請加入音樂 :D');
}
});
}
resume(msg) {
if (this.dispatcher[msg.guild.id]) {
msg.channel.send('恢復播放');
this.dispatcher[msg.guild.id].resume();
}
}
pause(msg) {
if (this.dispatcher[msg.guild.id]) {
msg.channel.send('暫停播放');
this.dispatcher[msg.guild.id].pause();
}
}
skip(msg) {
if (this.dispatcher[msg.guild.id]) {
msg.channel.send('跳過目前歌曲');
this.dispatcher[msg.guild.id].end();
}
}
nowQueue(msg) {
if (this.queue[msg.guild.id] && this.queue[msg.guild.id].length > 0) {
const queueString = this.queue[msg.guild.id].map((item, index) => `[${index+1}] ${item.name}`).join();
msg.channel.send(queueString);
} else {
msg.channel.send('目前隊列中沒有歌曲');
}
}
leave(msg) {
if (this.connection[msg.guild.id] && this.connection[msg.guild.id].status === 0) {
if (this.queue.hasOwnProperty(msg.guild.id)) {
delete this.queue[msg.guild.id];
this.isPlaying[msg.guild.id] = false;
}
this.connection[msg.guild.id].disconnect();
} else {
msg.channel.send('機器人未加入任何頻道');
}
}
}
const music = new Music();
client.on('message', async (msg) => {
if (!msg.guild) return;
if (msg.content === `${prefix}join`) {
// 機器人加入語音頻道
music.join(msg);
}
if (msg.content.indexOf(`${prefix}play`) > -1) {
// 如果使用者在語音頻道中
if (msg.member.voice.channel) {
// 播放音樂
await music.play(msg);
} else {
// 如果使用者不在任何一個語音頻道
msg.reply('你必須先加入語音頻道');
}
}
if (msg.content === `${prefix}resume`) {
// 恢復音樂
music.resume(msg);
}
if (msg.content === `${prefix}pause`) {
music.pause(msg);
}
if (msg.content === `${prefix}skip`) {
music.skip(msg);
}
if (msg.content === `${prefix}queue`) {
music.nowQueue(msg);
}
if (msg.content === `${prefix}leave`) {
music.leave(msg);
}
});
client.on('ready', () => {
console.log(`Logged in as ${client.user.tag}!`);
});
client.login(token);
code
demo:
https://expectlai.github.io/
{# Blogroll #}
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<br>
<div class="links-of-blogroll-title">
<!-- 設定你要的fa fa icon-->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
<!--{% set posts = site.posts.sort('-date') %}-->
{% set posts = site.posts.sort('-date').toArray() %}
{% for post in posts.slice('0', '5') %}
<li class='pull-left' style="white-space:normal; text-align:left" >
<time title="{{ __('post.created') }}" itemprop="dateCreated datePublished" datetime="{{ moment(post.date).format() }}">
{{ date(post.date, 'MM/DD') }}
</time>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}">{{ post.title }}</a>
<br>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
add recent posts to sidebar
// sidebar.njk
gitalk:
enable: true
github_id: # GitHub 作者帳號
repo: richardlaiiiii.github.io # 你的 Repo 名稱,通常就是網域
client_id: xxxxxxxx # 剛剛申請的 Client ID
client_secret: xxxxxxxx # 剛剛申請的 Client Secret
admin_user: hsiangfeng # 管理者的帳號
distraction_free_mode: true # 無干擾模式
language: zh-TW ## 語系
Github-gitalk
Some CSS (?
//bg custom image
body {
background:url(/images/bg.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
background-position:50% 50%;
}
// link style
.post-body p a{
color: #00c3ff;
border-bottom: none;
border-bottom: 1px solid #00c3ff;
&:hover {
color: #0044ff; //游標移到上方時
border-bottom: none;
border-bottom: 1px solid #0044ff;
}
}
比discord.js好實作很多的東西
Github Repo
可能很水 但比較少人在弄 (? 的功能
using googletrans
pixiv.cat api
@bot.command()
async def pix(ctx, *,args):
msg = str(args)
res = requests.get(f'https://pixiv.cat/{msg[-8:]}.jpg')
if int(res.status_code) == 200:
await ctx.send(f'https://pixiv.cat/{msg[-8:]}.jpg')
elif int(res.status_code) == 404:
x = 1
while int(requests.get(f'https://pixiv.cat/{msg[-8:]}-{x}.jpg').status_code) == 200:
await ctx.send(f'https://pixiv.cat/{msg[-8:]}-{x}.jpg')
x+=1
@bot.command()
async def translate(ctx, *,args):
translator = Translator()
r=args.split(' ',1)
translation = translator.translate(str(r[1]), dest=str(r[0]))
s=str(translation.text)
s=s.capitalize()
await ctx.send(s)
Some games