Skip to content

Commit

Permalink
重构 js
Browse files Browse the repository at this point in the history
  • Loading branch information
@TakWolf
TakWolf committed Jan 23, 2025
1 parent a1cebac commit 6e53ed6
Show file tree
Hide file tree
Showing 8 changed files with 193 additions and 288 deletions.
3 changes: 1 addition & 2 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,7 @@ <h1 class="title">Nyan Cat Everywhere</h1>

<script>
function go(id) {
let input = document.getElementById('target-url')
window.open(id + '.html#' + input.value)
window.open(id + '.html#' + document.getElementById('target-url').value)
}
</script>

Expand Down
47 changes: 19 additions & 28 deletions www/js/include.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,26 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function() {
/**
* create an iframe and load target url at hash
* like 'https://nyan.takwolf.com#https://blog.takwolf.com'
*/

let include = document.createElement('iframe')
include.style.position = 'fixed'
include.style.left = '0'
include.style.top = '0'
include.style.width = '100%'
include.style.height = '100%'
include.frameBorder = '0'
const include = document.createElement('iframe')
include.style.position = 'fixed'
include.style.left = '0'
include.style.top = '0'
include.style.width = '100%'
include.style.height = '100%'
include.frameBorder = '0'
if (document.body.hasChildNodes()) {
document.body.insertBefore(include, document.body.firstChild)
} else {
document.body.appendChild(include)
}

// make sure that iframe is the first element in body
if (document.body.hasChildNodes()) {
document.body.insertBefore(include, document.body.firstChild)
function loadUrl() {
if (window.location.hash === '') {
include.src = document.referrer
} else {
document.body.appendChild(include)
include.src = window.location.hash.substring(1)
}

// listen to the hash url change to load the page
function loadUrl() {
if (window.location.hash === '') {
include.src = document.referrer
} else {
include.src = window.location.hash.substring(1)
}
}
loadUrl()
window.addEventListener('hashchange', loadUrl, false)
})()
}
loadUrl()
window.addEventListener('hashchange', loadUrl, false)
144 changes: 62 additions & 82 deletions www/js/nyancat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,98 +13,78 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function() {
// return a int random num
function getRandomNum(min, max) {
let range = max - min
let rand = Math.random()
return(min + Math.round(rand * range))
}

// cat class
function Cat() {
// reset position xy and speed
this.reset = function() {
this.img.width = getRandomNum(100, 200)
this.x = -this.img.width
this.y = getRandomNum(0, window.innerHeight - 100)
this.img.style.left = this.x + 'px'
this.img.style.top = this.y + 'px'
this.speed = getRandomNum(1, 5)
}
function randomNum(min, max) {
return Math.random() * (max - min) + min
}

this.img = document.createElement('img')
this.img.src = 'img/nyancat.gif'
this.img.style.position = 'fixed'
this.waiting = true // ture is not display
document.body.appendChild(this.img)
this.reset()
class Cat {
constructor() {
this.image = new Image()
this.image.src = 'img/nyancat.gif'
this.image.style.position = 'fixed'
document.body.appendChild(this.image)

// this should call in loop update callback
this.update = function(dt) {
if (this.waiting) {
if (getRandomNum(0, 180) === 0) { // about 3 seconds
this.waiting = false
this.reset()
}
} else {
this.x += this.speed
this.img.style.left = this.x + 'px'
if (this.x > window.innerWidth + this.img.width) {
this.waiting = true
}
}
}
this.waiting = true
this.reset()
this.draw()
}

// cat array used to manage
let cats = []
reset() {
this.image.width = Math.round(randomNum(100, 200))
this.x = -this.image.width
this.y = randomNum(0, window.innerHeight)
this.speed = randomNum(50, 200)
}

// load callback
function load() {
// init cats
for (let n = 0; n < 20; n++) {
cats[n] = new Cat()
update(dt) {
if (this.waiting) {
if (randomNum(0, 180) <= 1) {
this.waiting = false
}
} else {
this.x += this.speed * dt
if (this.x > window.innerWidth + this.image.width) {
this.waiting = true
this.reset()
}
}
// play bgm
let bgm = document.createElement('audio')
bgm.autoplay = true
bgm.loop = true
let src1 = document.createElement('source')
src1.src = 'bgm/nyancat.mp3'
src1.type = 'audio/mpeg'
bgm.appendChild(src1)
let src2 = document.createElement('source')
src2.src = 'bgm/nyancat.ogg'
src2.type = 'audio/ogg'
bgm.appendChild(src2)
document.body.appendChild(bgm)
}

// update callback
function update(dt) {
cats.forEach(function (cat) {
cat.update(dt)
})
draw() {
this.image.style.left = `${this.x - this.image.width / 2}px`
this.image.style.top = `${this.y - this.image.height / 2}px`
}
}

// start loop engine
function start() {
// make a fps loop frame
let fps = 60
let lastTime = new Date().getTime()
let loop = function() {
let nowTime = new Date().getTime()
let deltaTime = nowTime - lastTime
if (deltaTime - 1000 / fps >= 0) {
lastTime = nowTime
update(deltaTime / 1000)
}
const cats = []
for (let i = 0; i < 30; i++) {
cats.push(new Cat())
}

const fps = 60
let lastTime = new Date().getTime()
window.setInterval(() => {
const nowTime = new Date().getTime()
const deltaTime = nowTime - lastTime
if (deltaTime - 1000 / fps >= 0) {
lastTime = nowTime
for (const cat of cats) {
cat.update(deltaTime / 1000)
cat.draw()
}
// load callback
load()
// start loop as soon as possible
window.setInterval(loop, 1)
}
start()
})()
}, 1)

const bgm = new Audio()
bgm.autoplay = true
bgm.loop = true
const mp3Src = document.createElement('source')
mp3Src.src = 'bgm/nyancat.mp3'
mp3Src.type = 'audio/mpeg'
bgm.appendChild(mp3Src)
const oggSrc = document.createElement('source')
oggSrc.src = 'bgm/nyancat.ogg'
oggSrc.type = 'audio/ogg'
bgm.appendChild(oggSrc)
document.body.appendChild(bgm)
145 changes: 56 additions & 89 deletions www/js/sakura.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,107 +13,74 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function() {
// return a int random num
function getRandomNum(min, max) {
let range = max - min
let rand = Math.random()
return(min + Math.round(rand * range))
}

// sakura class
function Sakura() {
this.img = document.createElement('img')
this.img.src = 'img/sakura.png'
this.img.style.position = 'fixed'
this.img.height = getRandomNum(32, 48)
this.x = getRandomNum(-this.img.height, window.innerWidth + window.innerHeight)
this.y = -this.img.height
this.moveSpeed = getRandomNum(1, 3)
function randomNum(min, max) {
return Math.random() * (max - min) + min
}

class Sakura {
constructor() {
this.image = new Image()
this.image.height = Math.round(randomNum(32, 48))
this.image.src = 'img/sakura.png'
this.image.style.position = 'fixed'
this.image.style.opacity = '0.8'
document.body.appendChild(this.image)

this.x = randomNum(-this.image.height, window.innerWidth + window.innerHeight)
this.y = -this.image.height
this.moveSpeed = randomNum(50, 120)
this.angle = 0
this.turn = 0
this.shaft = getRandomNum(0, 1) === 0 ? 'x' : 'y'
this.rotateSpeed = getRandomNum(-100, 100) / 100 * 4
this.overturnSpeed = getRandomNum(-100, 100) / 100 * 8
this.img.style.left = this.x + 'px'
this.img.style.top = this.y + 'px'
this.img.style.opacity = 0.8.toString()
document.body.appendChild(this.img)
this.shaft = randomNum(0, 1) < 0.5 ? 'x' : 'y'
this.rotateSpeed = randomNum(-180, 180)
this.overturnSpeed = randomNum(-360, 360)
}

// this should call in loop update callback
this.update = function(dt) {
this.x -= this.moveSpeed
this.y += this.moveSpeed
this.img.style.left = this.x + 'px'
this.img.style.top = this.y + 'px'
this.angle += this.rotateSpeed
this.turn += this.overturnSpeed
if (this.shaft === 'x') {
this.img.style.transform = 'rotateX(' + this.turn + 'deg) rotate(' + this.angle + 'deg)'
} else {
this.img.style.transform = 'rotateY(' + this.turn + 'deg) rotate(' + this.angle + 'deg)'
}
}
update(dt) {
this.x -= this.moveSpeed * dt
this.y += this.moveSpeed * dt
this.angle += this.rotateSpeed * dt
this.turn += this.overturnSpeed * dt
}

// out of window will remove from array and body
this.isOutOfWindow = function() {
return this.y > window.innerHeight + this.img.height || this.x < -this.img.height
draw() {
this.image.style.left = `${this.x}px`
this.image.style.top = `${this.y}px`
if (this.shaft === 'x') {
this.image.style.transform = `rotateX(${this.turn}deg) rotate(${this.angle}deg)`
} else {
this.image.style.transform = `rotateY(${this.turn}deg) rotate(${this.angle}deg)`
}
}

// remove obj from body
this.delete = function() {
document.body.removeChild(this.img)
checkDelete() {
if (this.y > window.innerHeight + this.image.height || this.x < -this.image.height) {
document.body.removeChild(this.image)
return true
} else {
return false
}
}
}

// sakura array used to manage
let sakuras = []
let sakuras = []

// load callback
function load() {
// nothing to do
}

// update callback
function update(dt) {
// create sakura random
if (getRandomNum(0, 5) === 0) {
const fps = 60
let lastTime = new Date().getTime()
window.setInterval(() => {
const nowTime = new Date().getTime()
const deltaTime = nowTime - lastTime
if (deltaTime - 1000 / fps >= 0) {
lastTime = nowTime
if (randomNum(0, 20) <= 1) {
sakuras.push(new Sakura())
}
// update sakura array
sakuras.forEach(function (sakura) {
sakura.update(dt)
})
// delete sakura
sakuras = sakuras.filter(function (sakura) {
if (sakura.isOutOfWindow()) {
sakura.delete()
return false
} else {
return true
}
})
// debug now array length
console.debug('sakura count : ' + sakuras.length)
}

// start loop engine
function start() {
// make a fps loop frame
let fps = 60
let lastTime = new Date().getTime()
let loop = function() {
let nowTime = new Date().getTime()
let deltaTime = nowTime - lastTime
if (deltaTime - 1000 / fps >= 0) {
lastTime = nowTime
update(deltaTime / 1000)
}
for (const sakura of sakuras) {
sakura.update(deltaTime / 1000)
sakura.draw()
}
// load callback
load()
// start loop as soon as possible
window.setInterval(loop, 1)
sakuras = sakuras.filter(sakura => !sakura.checkDelete())
console.debug('sakura count : ' + sakuras.length)
}
start()
})()
}, 1)
Loading

0 comments on commit 6e53ed6

Please sign in to comment.