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

68
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/html/game.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: #98d8fe url("../img/back.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}
.people {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
}
span {
}
.leftPeople {
transform: rotateY(180deg) !important;
}
.apple {
width: 40px;
height: 40px;
transition: top 0.1s ease;
}
.boom {
width: 60px;
transition: top 0.1s ease;
}
.fraction {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<!--得分-->
<div class="fraction">0分</div>
<!--爆炸音效-->
<audio class="bombAudio" src="../img/bomb.mp3" hidden></audio>
<audio class="appleAudio" src="../img/apple.mp3" hidden></audio>
<!--人物-->
<img class="people" src="../img/pepop.png"/>
<button onclick="ease">简单</button>
<button onclick="difficulty">困难</button>
<button onclick="veryharld">地狱</button>
</body>
<script src="../js/game.js"></script>
</html>

BIN
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/img/apple.mp3 Normal file
View File

Binary file not shown.

BIN
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/img/apple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/img/bomb.mp3 Normal file
View File

Binary file not shown.

BIN
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/img/bombimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/img/boom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/img/pepop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 KiB

164
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/js/game.js Normal file
View File

@@ -0,0 +1,164 @@
var body = document.querySelector("body");
var people = document.querySelector(".people");
var bombAudio = document.querySelector(".bombAudio");
var appleAudio = document.querySelector(".appleAudio");
// 屏幕的宽度
var screenWidth = document.body.clientWidth;
var screenHeight = document.body.clientHeight;
var fraction = 0;
var gameProbability = 0.4;
var bmobSpeed = 80;
var appleOffset = 20;
function createdEle(type) {
var Img = document.createElement("img");
Img.src = type == 1 ? '../img/apple.png' : '../img/boom.png';
Img.className = type == 1 ? 'apple' : 'boom';
// 56 84
// 元素的宽度
var SpanWidth = type == 1 ? 40 : 60;
var SpanLeft = Math.random() * (screenWidth - SpanWidth)
if (SpanLeft <= SpanWidth) {
SpanLeft = 0
}
Img.style = `
position: absolute;
left: ${SpanLeft}px;
top: ${type == 1 ? -56 : -84}px;
`;
body.appendChild(Img);
animation(type, Img)
}
function animation(type, span) {
// 苹果🍎
if (type == 1) {
var appleInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
// 判断苹果是否超过苹果最大高度，如果超过，删除苹果并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(appleInterval)
} else {
JudgingCollision(span, appleInterval)
}
},60)
// 炸弹💣
} else {
var boomInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + 20}px`;
//判断炸弹是否超过苹果最大高度，如果超过，删除炸弹并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(boomInterval)
} else {
JudgingCollision(span, boomInterval)
}
},bmobSpeed)
}
}
/**
* 判断是否碰撞
* @constructor
*/
function JudgingCollision(span, timeout) {
var people = document.querySelector(".people");
var peopleX1 = parseInt(people.style.left);
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
var peopleX3 = people.offsetTop;
var peopleX4 = people.offsetTop + people.clientHeight;
var spanX1 = parseInt(span.style.left);
var spanX2 = parseInt(span.style.left) + span.clientWidth;
var spanX3 = parseInt(span.style.top);
var spanX4 = parseInt(span.style.top) + span.clientHeight;
// 碰撞检测
if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
// 没碰上
}else{
if (span.className == "apple") {
fraction += 10;
// 如果分数超过100分，
if (fraction >= 100) {
// 降低苹果出现的概率，也就是提高炸弹数量
gameProbability = 0.2;
// 并且加快炸弹的速度
bmobSpeed = 80;
appleOffset = 40;
}
document.querySelector(".fraction").innerText = `${fraction}分`;
appleAudio.play()
body.removeChild(span)
clearInterval(timeout)
} else {
fraction -= 20;
document.querySelector(".fraction").innerText = `${fraction}分`;
bombAudio.play();
if (fraction <= 0) {
clearInterval(timeout)
confirm("游戏失败")
location.reload()
} else {
span.src = "../img/bombimg.png"
clearInterval(timeout)
setTimeout(function (){
body.removeChild(span)
},100)
}
}
}
}
function init () {
var probability = Number(Math.random().toFixed(1))
if (probability <= gameProbability) {
createdEle(1)
} else {
createdEle(2)
}
}
setInterval(function (){
init();
},200)
body.onmousemove = function (e) {
if (e.x <= 100) {
people.style.left = `0px`;
} else {
people.style.left = `${e.x - 100}px`;
}
// 判断人物向右移动
if (parseInt(people.style.left) > screenWidth / 2) {
people.className = 'people'
// 判断人物向左移动 添加类名 leftPeople，使用css3的水平镜像翻转人物
} else {
people.className = 'people leftPeople'
}
}
function ease(){
// // 降低苹果出现的概率，也就是提高炸弹数量
// gameProbability = 0.8;
// // 并且加快炸弹的速度
// bmobSpeed = 10;
// appleOffset = 40;
document.getElementById("ease")
}
// 接到一个苹果加10分
// 接到炸弹减20
// 默认0分
// 结束条件：分数 < 0
// 任务
// 分数 >100 的时候 炸弹速度加快（），炸弹的数量变多（概率）
//

75
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/js/index2.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
position: relative;
}
span {
transition: all 1s ease;
/* 文本不能被选择 */
user-select: none;
/* transition-delay:1s; */
}
</style>
</head>
<body>
</body>
<script>
//获取body的内容 并将下标初始化
var body = document.querySelector("body"), index = 0;
console.log(body);
//在body上写一个onclike事件
//Event 对象代表事件的状态
body.onmousemove = function(event){
//获得点击事件的xy坐标
var x = event.x , y = event.y
//定义一个数组并将输入存入span中
//createElement() 方法通过指定名称创建一个元素
var Text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"]
var span = document.createElement("span")
//通过Text下标和innerText方法将数组存入span中
span.innerText = Text[index];
span.style = `
color: hsl(${parseInt(Math.random() * 360)},100%,50%,1);
opacity: 1;
position: absolute;
left: ${x - 32}px;
top:${y - 21}px;
`
//通过appendChild方法在body中添加一个span
body.appendChild(span)
//setTimeout该方法用于在指定的毫秒数后调用函数或计算表达式
setTimeout(function(){
span.style.top = `${y - 150}px`
span.style.opacity = 0
},100)
setTimeout(function(){
//移除span
body.removeChild(span)
},1100)
//数组下表超越时初始化
index++
index >= 12 ? index = 0 : ''
}
</script>
</html>

98
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/js/index_tabs.html Normal file
View File

@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.tab1_hover {
color: red;
}
.tab1 {
overflow: hidden;
}
.tab1 li {
float: left;
margin-right: 10px;
}
.tab2_hover {
color: red;
}
.tab2 li {
display: none;
}
.tab2_hover {
display: block !important;
}
</style>
</head>
<body>
<p onclick="test1()">点我显示弹窗1</p>
<div class="test2">
<button>点我显示弹窗2</button>
</div>
<ul class="tab1">
<li class="tab1_hover">tab_a</li>
<li>tab_b</li>
<li>tab_c</li>
<li>tab_d</li>
<li>tab_e</li>
</ul>
<ul class="tab2">
<li class="tab2_hover">taba_content</li>
<li>tabb_content</li>
<li>tabc_content</li>
<li>tabd_content</li>
<li>tabe_content</li>
</ul>
</body>
<script>
function test1() {
alert("123456789")
}
document.querySelector(".test2 button").addEventListener('click', function () {
alert("987654321")
})
//querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
var tabone = document.querySelectorAll(".tab1 li") //创建变量
var tabtow = document.querySelectorAll(".tab2 li")
//用forEach循环输出v和index下表
tabone.forEach(function(v,index){
//v为元素的悬浮事件通过悬浮事件来清空和添加li标签的class属性
v.onmouseover = function(){
//利用forEach的循环将tabone tabtow上下的li的class属性清空
tabone.forEach(function(v,i){
v.className = ""
tabtow[i].className = ""
})
//用每一个元素v的className方法将悬浮事件每一个li的class变为hover
v.className = "tab1_hover"
tabtow[index].className = "tab2_hover"
}
console.log(v,index);
})
</script>
</html>

120
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/js/index_tabs2.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.tab1_hover {
color: red;
}
.tab1 {
overflow: hidden;
}
.tab1 li {
float: left;
margin-right: 10px;
}
.tab2_hover {
color: red;
}
.tab2 li {
display: none;
}
.tab2_hover {
display: block !important;
}
</style>
</head>
<body>
<ul class="tab1">
</ul>
<ul class="tab2">
</ul>
</body>
<script>
var TabsLi = [
{
title: 'taba',
content: [
{ text: 'contenta', id: 1 },
{ text: 'contentb', id: 2 }
]
}, {
title: 'tabb',
content: [{ text: 'contentc', id: 3 }, { text: 'contentd', id: 4 }]
}, {
title: 'tabc',
content: [{ text: 'contente', id: 5 }, { text: 'contentf', id: 6 }]
}, {
title: 'tabd',
content: [{ text: 'contentg', id: 7 }, { text: 'contenth', id: 8 }]
}, {
title: 'tabe',
content: [{ text: 'contenti', id: 9 }, { text: 'contentj', id: 0 }]
}
];
var tabOne = document.querySelector(".tab1");
var tabTow = document.querySelector(".tab2");
function ReaderTitle() {
//在第一个ul下依次增加TabsLi中title的个数
//默认第一个添加tab1_hover
//通过v并将TabsLi的title注入进li标签中
TabsLi.forEach(function (v, i) {
tabOne.innerHTML += `<li class="${i == 0 ? 'tab1_hover' : ''}">
${v.title}</li>`
});
ReaderContent();
}
function ReaderContent() {
TabsLi.forEach(function (v, i) {
tabTow.innerHTML += `<li class="${i == 0 ? 'tab2_hover' : ''}">
${v.content.map(function (val, index) {
return `<div class="item">
<a>${val.text}</a>
</div>`
//i忽略大小写g全文查找匹配字符
}).toString().replace(/,/ig, "")
}
</li>`
});
TabsInit();
}
function TabsInit() {
var TabOneLi = document.querySelectorAll(".tab1 li");
var TabTowLi = document.querySelectorAll(".tab2 li");
TabOneLi.forEach(function (v, i) {
v.onmouseover = function () {
TabOneLi.forEach(function (val, index) {
val.className = "";
TabTowLi[index].className = "";
})
v.className = "tab1_hover";
TabTowLi[i].className = "tab2_hover";
}
})
}
ReaderTitle();
</script>
</html>

64
历届学生/18课程/class18_2/项目/练习项目/周志威/js练习/js/searcgh.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="搜索">
<ul></ul>
<!-- <span style="color: red;"></span> -->
</body>
<script>
var Tips = ['abcd', 'bcde', 'adcf', 'hvbdf', 'lopad', 'bezt']
var Inputpp = document.querySelector("input")
var Ul = document.querySelector("ul")
var NewArray = []
//oninput 事件在用户输入时触发。
Inputpp.oninput = function () {
NewArray = []
//value获取到对应的值
//当搜索框有内容时
if (Inputpp.value.length != 0) {
//v为Tips内容
Tips.forEach(function (v) {
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。
//搜索框有内容
//indexof获取用户搜索框输入的值
console.log(v);
if (v.indexOf(Inputpp.value) != -1) {
var InputIndex = v.indexOf(Inputpp.value)
var InputLength = Inputpp.value.length
//substr(start,length)从下标抽取长度
//${v.substr(InputIndex, length)}
var str = `<span style="color: red;">
${v.replace(InputIndex, InputLength)}</span>`
NewArray.push(v.replace(Inputpp.value, str))
}
})
if (NewArray.length == 0) {
Ul.innerHTML = `<li>没有搜索建议</li>`
} else {
Ul.innerHTML = ""
NewArray.forEach(function (v) {
Ul.innerHTML += `<li>${v}</li>`
})
var TipsLi = document.querySelectorAll("ul li")
TipsLi.forEach(function (v) {
v.onclick = function () {
Inputpp.value = v.innerText
Ul.innerHTML = ""
}
})
}
} else {
Ul.innerHTML = ""
}
}
</script>
</html>