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

108
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/33.html Normal file
View File

@@ -0,0 +1,108 @@
<!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>
</body>
<script>
// var name = "冯"
// // console.log(name);
// var age = 19
// console.log(age,name);
// var money = 40
// money > 50 ? console.log("去吃好吃的") : console.log("随便痴呆你");
// var ok = 5
// switch (ok) {
// case 0:
// console.log("啥也不说");
// break;
// case 1:
// console.log("普通");
// break;
// case 2:
// console.log("高级");
// break;
// default:
// console.log("buzhid");
// break;
// // }
// for(var i = 1;i < 100;i++)
// // console.log(i);
// var arr = new Array();
// arr[0] = "哈哈哈1"
// arr[1] = "哈哈哈2"
// arr[2] = "哈哈哈3"
// arr[3] = "哈哈哈4"
// console.log(arr);
// var arr = new Array("哈哈哈1","哈哈哈2","哈哈哈3","哈哈哈4");
// var aaa = new Array();
// aaa[0] = "哈哈哈6"
// aaa[1] = "哈哈哈7"
// aaa[2] = "哈哈哈8"
// aaa[3] = "哈哈哈9"
// console.log(
// [
// ...arr,
// ...aaa
// ]
// );
// for (var index = 0; index < aaa.length; index++) {
// arr.push(aaa[index])
// }
// console.log(arr);
// console.log(arr.concat(aaa));
// var obj = {
// name : "冯文焌",
// agr : 18,
// }
// // console.log(obj);
// for (const key in obj) {
// console.log(obj[key]);
// }
// function fff (a,b){
// return(a + b);
// }
// var ss = fff(1 , 3)
// console.log(ss);
//回调函数！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
function asyncfun(sss) {
var num = 1
setTimeout(function () {
num += 100
sss(num)
}, 3000)
}
asyncfun(function(bb){
console.log(bb);
})
// function aa(callback){
// var h = "100块钱"
// callback(h)
// }
// aa(function(bb){
// console.log(bb);
// })
</script>
</html>

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

85
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<style>
span {
border: 1px solid;
margin: 2px;
width: 80px;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<var>
</var>
</body>
<script>
// var c = 3
// if(c < 60){
// console.log("不及格");
// }else if(c >= 60 && c < 70){
// console.log("刚刚积分");
// }else if(c >= 70 && c < 80){
// console.log("可以");
// }else {
// console.log("无敌");
// }
// switch (c) {
// case 1:
// console.log("不及格");
// break;
// case 2:
// console.log("2");
// break;
// case 3:
// console.log("3");
// break;
// default:
// break;
// }
// for (var i= 1; i <= 9; i++) {
// console.log(i);
// }
// var i=102
// do {
// console.log(i);
// i++;
// } while (i < 100);
// for (var i = 1; i <= 9; i++) {
// var aaa = ''
// for (var j = 1; j <= i; j++) {
// // console.log(j + 'x' + i + '=' + j * i);
// aaa += '<span>'+j + 'x' + i + '=' + j * i+' '+'</span>'
// }
// // console.log(aaa);
// document.write(aaa+'</br>')
// }
var aaa = ["打上单撒大所", "大萨达多", "大萨达所大所多"]
var bbb = ["11", "大是多少萨达多", "大萨达11111所大所多"]
for(
var index=0;index < aaa.length;index++ ){
console.log(aaa[index]);
}
// console.log(
// [
// ...aaa,
// ...bbb
// ]
// )
</script>
</html>

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/shuaxin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

38
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/刷新.html Normal file
View File

@@ -0,0 +1,38 @@
<!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>
<style>
body {
height: 100%;
}
img {
width: 40px;
display: flex;
align-items: center;
height: 100%;
margin: auto;
}
.aaa {
width: 100vw;
}
</style>
</head>
<body>
<div class="aaa">
<img src="./shuaxin.png" alt="">
</div>
</body>
<script>
var startY = 0;
</script>
</html>

128
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/css/index.css Normal file
View File

@@ -0,0 +1,128 @@
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
width: 100%;
height: 100vh;
background-image: url("../img/back.png");
background-size: contain;
position: relative;
overflow: hidden;
user-select: none;
}
.ground{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 7rem;
z-index: 50;
}
.ground img{
position: absolute;
width: 100%;
height: 100%;
}
.start{
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%,-50%);
/* 开启弹性盒子，上下排列,水平对齐 */
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.play{
width: 60px;
margin-top: 24px;
cursor: pointer;
}
.back img {
width: 100%;
height: 100vh;
background-size: contain;
}
.color {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
box-sizing: border-box;
}
.color div {
cursor: pointer
}
.nandu{
cursor: pointer;
color: red;
}
.result{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.875rem;
z-index: 555;
}
.pause{
position: absolute;
left: 3.75rem;
top: 3.75rem;
}
.sg{
width: 3.4375rem;
position: absolute;
}
.up{
transform: rotate(-40deg);
}
.down{
transform: rotate(90deg);
}
.bird{
width: 2.125rem;
height: 1.5rem;
position: absolute;
left: 120px;
transition: top linear 0.15s;
}
.bird_yellow{
background-image: url("../img/hn1.png");
}
@keyframes birdShake {
0% {transform: translateY(0rem);}
50% {transform: translateY(10px);}
100% {transform: translateY(0rem);}
}
@keyframes birdMotionYellow {
0% {background: url("../img/hn1.png");}
50% {background: url("../img/hn2.png");}
100% {background: url("../img/hn3.png");}
}
@keyframes birdMotionBlue {
0% {background: url("../img/bn1.png");}
50% {background: url("../img/bn2.png");}
100% {background: url("../img/bn3.png");}
}
@keyframes birdMotionRed {
0% {background: url("../img/rn1.png");}
50% {background: url("../img/rn2.png");}
100% {background: url("../img/rn3.png");}
}
.show{
display: block;
}
.hidden{
display: none;
}

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/atlas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/bn1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/bn2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/bn3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/diban.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/gameover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/hn1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/hn2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/hn3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/night.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/rn1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/rn2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/rn3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/sg_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/sg_t.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/start.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/img/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

292
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/js/index.js Normal file
View File

@@ -0,0 +1,292 @@
class bird {
gameStatus = false
innerHeight = window.innerHeight
innerWidth = window.innerWidth;
//鸟的下落速度
birdDownSpeed = 5;
//鸟点一次上的速度
birdUpSpeed = 40
//地板移动速度
groundSpeed = 5
//水管上下间隙
WaterPipeClearance = 100
//水管水平间隔
WaterPipeLeftRightClearance = 500
// 生成水管的X轴位置
WaterPipeX = 0
// 一秒创建多少个水管
createdWaterPipeXTime = 500
// 总分
TotalScore = 0
constructor() {
this.birdEvent();
this.birdAction();
this.groundAction();
this.resultAction();
this.ChangeColor()
setInterval(() => {
if (this.gameStatus) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime);
}
birdEvent() {
click(".play", () => {
this.changeGameStatus()
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
})
click(".pause", () => {
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
})
}
//运动状态
changeGameStatus() {
if (this.gameStatus) {
$(".start").remove("hidden")
$(".pause").add("hidden")
$(".music").pause()
this.gameStatus = false
} else {
this.ChangeColor()
$(".result").remove("hidden")
$(".bird").style.animation = 'birdMotion 0.48s linear infinite'
$(".start").add("hidden")
$(".pause").remove("hidden")
$(".music").play()
this.gameStatus = true
}
}
//分数
resultAction() {
var TotalScoreArr = String(this.TotalScore).split("")
$(".result").innerHTML = ""
TotalScoreArr.forEach(v => {
$(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
//鸟的移动
birdAction() {
var clickTime = 0, currentTime = 0;
//鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
$(".bird").style.animation += ',birdShake 0.48s linear infinite'
setInterval(() => {
if (this.gameStatus) {
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
}
}, 1000 / 16)
click("body", () => {
if (this.gameStatus) {
clickTime = (new Date()).getTime()
$(".bird").add("up")
$(".bird").remove("down")
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`;
}
})
setInterval(() => {
if (this.gameStatus) {
var currentTime = (new Date()).getTime()
if (currentTime - clickTime > 400) {
$(".bird").remove("up")
$(".bird").add("down")
}
}
}, 300);
}
//地板的移动
groundAction() {
$(".groundOne").style.left = '0px';
$(".groundTwo").style.left = `${this.innerWidth}px`;
setInterval(() => {
$(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
$(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
$(".groundOne").style.left = `${this.innerWidth}px`
}
if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
$(".groundTwo").style.left = `${this.innerWidth}px`
}
this.collisionground($(".bird"), $(".ground"))
}, 1000 / 20);
}
collisionground(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
) {
this.gameOver()
console.log('碰撞成功')
}
}
//水管的图片生成
createdWaterPipe() {
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
if (TopWaterPipeHeight) {
TopWaterPipeHeight = Math.random() * (totalWaterPipeHeight * 0.667)
}
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
if (this.WaterPipeX == 0) {
this.WaterPipeX = this.innerWidth
} else {
this.WaterPipeX += this.WaterPipeLeftRightClearance
}
var cretedImg = (type) => {
var img = document.createElement("img");
img.src = `../水管鸟/img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
img.className = "sg"
img.style = `
${type}: ${type == "top" ? 0 : 112}px;
height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
left: ${this.WaterPipeX}px
`;
return img
}
var TopWaterPipe = cretedImg("top")
var BottomWaterPipe = cretedImg("bottom")
$("body").appendChild(TopWaterPipe)
$("body").appendChild(BottomWaterPipe)
this.WaterPipeMove(TopWaterPipe)
this.WaterPipeMove(BottomWaterPipe)
}
//水管移动
WaterPipeMove(img) {
img.time = setInterval(() => {
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
if (parseInt(img.style.left) <= -55) {
try {
clearInterval(img.time)
$("body").removeChild(img)
} catch (error) { }
} else {
this.collision($(".bird"), img)
}
}, 1000 / 30)
}
/**
* 碰撞检测
* @param {*} el1 鸟
* @param {*} el2 水管
*/
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
) {
console.log('碰撞成功')
this.gameOver()
} else {
console.log('111');
if ( (el2.offsetLeft + el2.offsetWidth) == 107 ) {
this.TotalScore += 0.5
if (!String(this.TotalScore).includes(".")) {
console.log("==========分数=======: ", this.TotalScore);
$(".point").play()
this.resultAction()
}
//换背景图
if (this.TotalScore > 3) {
var night = document.createElement("img")
night.src = "../水管鸟/img/night.png"
$(".back").replaceChild(night, $(".morring"))
function ResumeError() {
return true;
}
window.onerror = ResumeError;
console.log("xixi");
}
}
}
}
//游戏结束
gameOver() {
$(".die").play()
this.changeGameStatus()
_(".sg").forEach(v => {
clearInterval(v.time)
})
var gameOvers = document.createElement("img")
gameOvers.src = "./img/gameover.png"
$(".start").replaceChild(gameOvers, $(".logo"))
click(".play", () => location.reload())
$(".start").removeChild($(".nandu"))
$(".start").removeChild($(".color"))
// $(".nandu").remove("hidden")
}
ChangeColor() {
click(".yellow", () => {
$(".bird").style.animation = "birdMotionYellow 0.4s linear infinite,birdShake 0.48s linear infinite"
})
click(".blue", () => {
$(".bird").style.animation = "birdMotionBlue 0.4s linear infinite,birdShake 0.48s linear infinite"
console.log(2);
})
click(".red", () => {
$(".bird").style.animation = "birdMotionRed 0.4s linear infinite,birdShake 0.48s linear infinite"
console.log(3);
})
}
}
new bird()

31
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/js/utils.js Normal file
View File

@@ -0,0 +1,31 @@
class Util{
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
}
click(className,callback) {
$(className).onclick = () => {
callback()
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject } = new Util()
inject()

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/sounds/LBI利比 - 小城夏天.flac Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/sounds/sfx_die.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/sounds/sfx_hit.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/sounds/sfx_point.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/sounds/sfx_swooshing.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/sounds/sfx_wing.ogg Normal file
View File

Binary file not shown.

57
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/水管鸟.html Normal file
View File

@@ -0,0 +1,57 @@
<!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/index.css">
</head>
<body>
<audio class="music" src="./sounds/LBI利比 - 小城夏天.flac" loop></audio>
<audio class="point" src="./sounds/sfx_point.ogg"></audio>
<audio class="die" src="./sounds/sfx_die.ogg"></audio>
<div class="back">
<img class="morring" src="../水管鸟/img/back.png" alt="">
</div>
<div class="result hidden">
</div>
<img class="pause hidden" src="../水管鸟/img/pause.png" alt="">
<div class="start">
<img class="logo" src="../水管鸟/img/title.png" alt="">
<img class="again hidden" src="./img/start.png" alt="">
<div class="nandu">
<div class="play">普通</div>
<div class="difficulty">困难</div>
</div>
<div class="color">
<div class="yellow">
<img src="./img/hn2.png" alt="">
</div>
<div class="blue">
<img src="./img/bn2.png" alt="">
</div>
<div class="red">
<img src="./img/rn2.png" alt="">
</div>
</div>
</div>
<div class="bird bird_yellow" style="top: 0px;animation: birdMotionYellow 0.48s linear infinite"></div>
<div class="ground">
<img class="groundOne" src="../水管鸟/img/diban.png" alt="">
<img class="groundTwo" src="../水管鸟/img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

26
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/练习js.html Normal file
View File

@@ -0,0 +1,26 @@
<!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>
</body>
<SCript>
function al(callback){
var num = 1
setTimeout(function(){
num += 100;
callback(num)
},3000)
}
al( function(aaa){
console.log("res",aaa);
})
</SCript>
</html>

95
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/侧滑.html Normal file
View File

@@ -0,0 +1,95 @@
<!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>
<style>
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
overflow: hidden;
}
ul li {
height: 45px;
position: relative;
align-items: center;
padding: 15px;
border-bottom: 1px solid black;
display: flex;
transition-duration: 0.3s;
}
.main .action {
display: flex;
align-items: center;
height: 49px;
padding-left: 10px;
position: absolute;
right: -120px;
font-size: 20px;
}
.item {
width: 100%;
}
.item {
height: 100%;
display: flex;
align-items: center;
}
.action .top {
background: #c8c7cd;
}
.action .read {
background: #ff9c00;
}
.action .delete {
background: #ff3a31;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<div class="item">奥特曼1</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">奥特曼2</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">奥特曼3</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
</ul>
</div>
</body>
</html>

54
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/切换变色.html Normal file
View File

@@ -0,0 +1,54 @@
<!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>
<button>点我</button>
<div style="display: block;" class="text"> 我会变色</div>
</body>
<script>
// 定义 button和文字
var button = $("button"), text = $(".text");
// 定义点击事件+if语句
button.onclick = function () {
if (text.style.display == "block") {
text.style.display = "none"
} else {
text.style.display = "block"
text.style.color = `hsl(${math.random() * 360},100%,50%)`
}
}
// 封装调用
function $(className) {
return document.querySelector(className)
}
// console.dir(document.querySelector("button"));
// addEventListener
// document.querySelector("button").addEventListener('click',function(){
// setTimeout(function(){
// alert('hahaha')
// },1000)
// })
// document.querySelector('button').addEventListener('click', button)
// function button() {
// setTimeout(function () {
// alert('hahaha')
// }, 1000
// )
// }
// button( function(){
// onclick('具体')
// } )
</script>
</html>

98
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/右键菜单.html Normal file
View File

@@ -0,0 +1,98 @@
<!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>
<style>
body{
height: 100vh;
}
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 160px;
border-radius: 10px;
box-shadow: 2px 2px 2px #c7b7b7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>上单</li>
<li>打野</li>
<li>中单</li>
<li>射手</li>
<li>辅助</li>
</ul>
</body>
<script>
// 整体里面的右键菜单
$("body").oncontextmenu = function (e) {
// 防止默认值
e.preventDefault();
// 从点击中拿到x,y的值
var { x, y } = e;
// 目前设备的宽和高，显示出来的
var { clientWidth, clientHeight } = document.body;
// 如果当前屏幕的宽-鼠标x的位置<菜单的宽 同时当前屏幕的高-鼠标y的位置<菜单的高
if (clientWidth - x < 152 && clientHeight - y < 160) {
// 定义菜单的位置在y - 200，x - 160的位置
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
// 显示出来
} else if (clientWidth - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
} else if (clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x}px;
display: block;
`
} else {
$("ul").style = `
top: ${y}px;
left: ${x}px;
display: block;
`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>
$("body").oncontextmenu = function(e){
e.preventDefault();
var { x,y } = e;
var { cl}
}

36
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/搜索建议.html Normal file
View File

@@ -0,0 +1,36 @@
<!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>
<input type="text" placeholder="关键字">
</body>
<script>
var arr = ["在干嘛", "在吃饭", "写作业", "写吃饭", "干什么", "是什么", "是吃饭", "玩游戏", "玩什么"]
var aaaa = [];
$("input").oninput = function () {
aaaa = []
console.dir(
$("input").value.length != 0
);
arr.forEach(function (v, i) {
if (v.includes($("input").value)) {
aaaa.push(v)
console.log(aaaa);
}
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

43
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/滚动固定.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>Document</title>
<style>
body{
height: 100000px;
}
.header {
width: 100%;
height: 100px;
background: yellow;
}
.fixed{
position:fixed ;
width: 100%;
top: 0;
left: 0%;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<script>
var header = $(".header")
$("body").onscroll = function(){
// 如果滚动距离大于500
if(document.documentElement.scrollTop > 500){
header.className = "header fixed"
}else{
header.className = "header"
}
}
// 封装
function $(className) {
return document.querySelector(className)
}
</script>
</html>

72
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/激活态转换.html Normal file
View File

@@ -0,0 +1,72 @@
<!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>
<style>
ul,li{
list-style: none;
}
.title{
display: flex;
}
.title li{
margin-right: 20px;
}
.content li{
display: none;
}
.content .active{
display: block;
}
.title .active{
color: blue;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">开始</li>
<li>起步</li>
<li>正常</li>
<li>减速</li>
<li>停止</li>
</ul>
<ul class="content">
<li class="active">开始1</li>
<li>起步2</li>
<li>正常3</li>
<li>减速4</li>
<li>停止5</li>
</ul>
</body>
<script>
var titleLi = _(".title li"), contentLi = _(".content li");
titleLi.forEach(function(v, i) {
v.onclick = function () {
console.log(v)
titleLi.forEach(function(item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

53
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/红包雨.html Normal file
View File

@@ -0,0 +1,53 @@
<!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>
<style>
body {
margin: 0;
padding: 0;
}
img {
width: 80px;
height: 96px;
position: fixed;
top: 0;
}
</style>
</head>
<body>
<!-- <img src="./hb.png" alt=""> -->
</body>
<script>
var { clientWidth, clientHeight } = document.body;
function CreateHB() {
var img = document.createElement("img")
img.src = "./hb.png";
var x = Math.random() * (clientWidth - 80)
console.log('x', x, clientWidth);
img.style.left = `${x}px`;
$('body').appendChild(img)
console.log("./hb.png:", img);
}
// setInterval(() => {
CreateHB()
// },1000
// )
function $(className) {
return document.querySelector(className)
}
</script>
</html>