bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/css/clear.css Normal file
View File

@@ -0,0 +1,12 @@
body,ul,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
html {
/* font-size: 50px; */
}
body {
font-size: 0;
}

148
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/css/index.css Normal file
View File

@@ -0,0 +1,148 @@
body {
height: 100vh;
background: url("../img/back.png");
background-size: contain;
user-select: none;
}
.diban {
position: fixed;
width: 100%;
height: 112px;
left: 0;
bottom: 0;
background: red;
}
.diban img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
position: fixed;
left: 100px;
width: 34px;
height: 24px;
transition: all linear 0.15s;
z-index: 999;
}
.pipe {
position: fixed;
width: 55px;
z-index: 998;
transition: all linear 0.1s;
}
.pause {
position: fixed;
top: 30px;
left: 30px;
cursor: pointer;
z-index: 999;
}
.score {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
/* .birdDefault {
animation: birdDefault 0.4s linear infinite reverse;
}
.birdBlue {
animation: birdBlue 0.4s linear infinite reverse;
}
.birdRed {
animation: birdRed 0.4s linear infinite reverse;
} */
@keyframes birdShake {
0% {
transform: translateY(0px);
}
33% {
transform: translateY(15px);
}
100% {
transform: translateY(0px);
}
}
@keyframes birdDefault {
0% {
background: url("../img/hn1.png");
}
33% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes birdBlue {
0% {
background: url("../img/hn_blue_1.png");
}
33% {
background: url("../img/hn_blue_2.png");
}
100% {
background: url("../img/hn_blue_3.png");
}
}
@keyframes birdRed {
0% {
background: url("../img/hn_red_1.png");
}
33% {
background: url("../img/hn_red_2.png");
}
100% {
background: url("../img/hn_red_3.png");
}
}
.bird_title {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
text-align: center;
z-index: 999;
}
.bird_list {
display: flex;
align-items: center;
justify-content: space-between;
}
.bird_list img {
cursor: pointer;
}

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/back_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/diban.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/gameover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_blue_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_blue_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_blue_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_red_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_red_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_red_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/sg_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/sg_t.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/start.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

43
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水管鸟</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="bird" style="animation: birdDefault 0.4s linear infinite reverse, birdShake 0.4s linear infinite reverse;"></div>
<img style="display: none;" class="pause" src="./img/pause.png" alt="">
<div class="score" style="display: none;">
<img src="./img/0.png" alt="">
</div>
<div class="bird_title">
<img class="bird_logo" src="./img/title.png" alt="">
<div class="bird_list">
<img src="./img/hn1.png" alt="">
<img src="./img/hn_blue_1.png" alt="">
<img src="./img/hn_red_1.png" alt="">
</div>
<div></div>
<img class="start" src="./img/start.png" alt="">
<img style="display: none;" class="gameover" src="./img/gameover.png" alt="">
<img style="display: none;" class="restart" src="./img/start.png" alt="">
<img style="display: none;" class="reload" src="./img/start.png" alt="">
</div>
<div class="diban">
<img class="di_one" src="./img/diban.png" alt="">
<img class="di_two" src="./img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

265
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/js/index.js Normal file
View File

@@ -0,0 +1,265 @@
class WaterPipeBird {
innerWidth = window.innerWidth;
innerHeight = window.innerHeight;
totalScore = 0;
// 地板的运动速度
dibanMotionSpeed = 10;
// 鸟的默认皮肤
birdTheme = "birdDefault"
// 游戏状态 true 开始， false 未开始
gameStatus = false;
// 每次点击鸟，鸟的上移动距离
birdClickTop = 40
// 下移距离
birdClickDown = 10
// 创建到第几个水管
PipeIndex = 0;
// 上下水管的通过间隙（距离）
PipeGap = 150;
// 水管左右的间距
XPipeWidth = 300
// 水管移动速度
PipeSpeed = 10
IntervalList = []
constructor() {
console.log("构造函数: ");
this.dibanMotion()
this.initBird()
this.startGame()
this.stopGame()
}
dibanMotion() {
$(".di_one").style.left = `0px`;
$(".di_two").style.left = `${this.innerWidth}px`;
// 定义变量提前保存this
// =>
// call bind apply
// 箭头函数因为没有关键词 function，所以this会被解绑
setInterval(() => {
$(".di_one").style.left = `${parseInt(($(".di_one").style.left)) - this.dibanMotionSpeed}px`;
$(".di_two").style.left = `${parseInt(($(".di_two").style.left)) - this.dibanMotionSpeed}px`;
if (parseInt(($(".di_one").style.left)) <= -this.innerWidth) {
$(".di_one").style.left = `${this.innerWidth}px`;
}
if (parseInt(($(".di_two").style.left)) <= -this.innerWidth) {
$(".di_two").style.left = `${this.innerWidth}px`;
}
}, 100)
}
// birdShake 0.4s linear infinite reverse
initBird() {
$(".bird").style.top = `${(this.innerHeight - 112) / 2 - 14}px`;
// 点击切换小鸟的主题
_(".bird_list img").forEach((v, i) => {
v.onclick = () => {
switch (i) {
case 0:
this.birdTheme = "birdDefault"
$(".bird").style.animationName = "birdDefault,birdShake"
break;
case 1:
this.birdTheme = "birdBlue"
$(".bird").style.animationName = "birdBlue,birdShake"
break;
case 2:
this.birdTheme = "birdRed"
$(".bird").style.animationName = "birdRed,birdShake"
break;
default:
break;
}
}
})
}
startGame() {
e(".start", () => {
let clickTime = null;
this.gameStatus = true;
$(".pause").show();
$(".score").show();
$(".bird_title").none();
$(".bird").style.animationName = this.birdTheme
// 下落
this.IntervalList[0] = setInterval(() => {
if (this.gameStatus) {
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdClickDown}px`
this.collision($(".bird"), $(".diban"))
}
}, 1000 / 16)
// 点击开始游戏和控制鸟的上移
e("body", (e) => {
if (this.gameStatus) {
clickTime = new Date().getTime();
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdClickTop}px`
$(".bird").remove("down")
$(".bird").add("up")
}
})
// 下落的样式
this.IntervalList[1] = setInterval(() => {
let currentTime = new Date().getTime();
if (currentTime - clickTime > 300) {
$(".bird").remove("up")
$(".bird").add("down")
}
}, 300)
this.IntervalList[2] = setInterval(() => {
this.CreatedPipe()
}, 500)
})
}
stopGame() {
e(".pause", (e) => {
this.gameStatus = false;
e?.stopPropagation();
this.IntervalList.forEach(v => {
clearInterval(v)
})
_(".pipe").forEach(v => {
clearInterval(v.IntervalId)
})
$(".bird_list").none()
$(".start").none()
$(".bird_title").show()
$(".restart").show()
})
e(".restart", (e) => {
$(".start").onclick()
this.PipeMove(_(".pipe"))
})
}
CreatedPipe() {
let PipeTotalHeight = this.innerHeight - 112 - this.PipeGap;
let TopImgHeight = getRandom(60, PipeTotalHeight - 60)
let BottomImgHeight = PipeTotalHeight - TopImgHeight
let createdImg = (t) => {
let img = document.createElement("img")
img.type = t
img.src = `./img/sg_${t}.png`
img.className = "pipe"
img.style = `
${t == "b" ? 'bottom: 110px;' : 'top: 0px;'}
left: ${this.innerWidth + 55 + (this.PipeIndex * this.XPipeWidth)}px;
height: ${t == "t" ? TopImgHeight : BottomImgHeight}px;
`;
return img
}
let topImg = createdImg("t");
let bottomImg = createdImg("b");
$("body").appendChild(topImg)
$("body").appendChild(bottomImg)
this.PipeMove([topImg, bottomImg])
// this.PipeMove(bottomImg)
this.PipeIndex += 1
}
PipeMove(arr) {
arr.forEach(img => {
img.IntervalId = setInterval(() => {
if (this.gameStatus) {
img.style.left = `${parseInt(img.style.left) - this.PipeSpeed}px`
if (parseInt(img.style.left) <= -55) {
clearInterval(img.IntervalId)
$("body").removeChild(img)
} else {
this.collision($(".bird"), img)
}
}
}, 100)
})
}
collision(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
$(".gameover").show()
$(".bird_logo").none();
$(".pause").onclick()
$(".restart").none();
$(".reload").show()
e(".reload", () => {
location.reload()
})
} else {
if (el2.type == "t") {
if (parseInt(el2.style.left) + el2.offsetWidth == 100) {
this.totalScore += 1
let sco = this.totalScore.toString().split("")
$(".score").innerHTML = ""
sco.forEach(v => {
$(".score").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
}
}
}
}
// var a = function (test) {
// console.log("1: ", test);
// }
// var a = test => console.log("1: ", test);
new WaterPipeBird()

57
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/js/utils.js Normal file
View File

@@ -0,0 +1,57 @@
class Utils {
$(className) {
return document.querySelector(className);
}
_(className) {
return document.querySelectorAll(className);
}
e(className, callback, type = "click",) {
$(`${className}`)[`on${type}`] = (event) => {
callback(event)
}
}
customMethods() {
Element.prototype.add = function(className) {
this.classList.add(className)
}
Element.prototype.remove = function(className) {
this.classList.remove(className)
}
Element.prototype.none = function() {
this.style.display = "none"
}
Element.prototype.show = function() {
this.style.display = "block"
}
Element.prototype.toggle = function() {
if (this.style.display == "none") {
this.style.display = "block"
} else {
this.style.display = "none"
}
}
}
getRandom(min, max) {
const floatRandom = Math.random()
const difference = max - min
const random = Math.round(difference * floatRandom)
const randomWithinRange = random + min
return randomWithinRange
}
}
let { $, _, e, customMethods, getRandom } = new Utils()
customMethods()
// let utils = new Utils()

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_die.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_hit.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_point.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_swooshing.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_wing.ogg Normal file
View File

Binary file not shown.

37
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/test.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="test">
<button>点我</button>
</div>
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
<script>
e(".main", () => {
alert(2)
})
e(".test", (e) => {
e.stopPropagation();
alert(3)
})
e("button", (e) => {
alert(1)
})
</script>
</html>