<script>
function get(url){
let pro = new Promise(function(resolve,reject){
let ajax = new XMLHttpRequset()
ajax.open('GET',url,true)
ajax.send()
ajax.onreadystatechange =()=>{
if(ajax.readyState === 4) {
if(ajax.status === 200) {
resolve(ajax.response)
} else {
reject(ajax.status)
}
}
}
}
return pro
}
get('url').then(res=>{
console.log(res.data)
}).catch(err=>{
console.log(err)
})
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
axios.get('url').then(res=>{
console.log(res.data)
})
async function getList() {
let res = await axios.get('url')
console.log(res.data)
}
getList()
</script>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1804669_5fk1wsyxd3m.css">
<script src="https://at.alicdn.com/t/font_1804669_5fk1wsyxd3m.js"></script>
<script>
//定义总量，当前量
let count = 10
let score = 5
//初始化星星
for(let i =0; i < count; i++) {
//创建i标签
let icon = $('<i/>').addClass('iconfont star')
//前5个实心
if (i < score) icon.addClass('icon-xingxing1')
else icon.addClass('icon-xingxing')
//添加到容器里
$('body').append(icon)
}
//经过离开效果
$('body .star').hover(
function(){
//经过当前星星变成实心
$(this).addClass('icon-xingxing1').removeClass('icon-xingxing')
//经过当前星星时前面的也都变成实心
$(this).prevAll().addClass('icon-xingxing1').removeClass('icon-xingxing')
//后面的空心
$(this).nextAll().addClass('icon-xingxing').removeClass('icon-xingxing1')
//另一种方法
for(let i = 0; i < count; i++){
//将当前经过的星星和前面的变为实心
if(i <= $(this).index())
$('body .star').eq(i).addClass('icon-xingxing1').removeClass('icon-xingxing')
//将当前经过的星星后面的变成空心
else
$('body .star').eq(i).addClass('icon-xingxing').removeClass('icon-xingxing1')
}
}，
//离开时根据score来控制实心
function () {
for (let i = 0; i < count; i++) {
if (i < score)
$('.container .star').eq(i).addClass('icon-xingxing1').removeClass('icon-xingxing')
else
$('.container .star').eq(i).addClass('icon-xingxing').removeClass('icon-xingxing1')
}
}
)
//点击改变score值
$('body .star').click(function(){
score = $(this).index()+1
})
</script>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
margin: 10vh auto;
background-color: black;
height: 80vh;
position: relative;
overflow: hidden;
}
.plane {
width: 150px;
height: 80px;
background: url(images/fj.png) 0 / 100% 100%;
position: absolute;
bottom: 10px;
/* calc(50%) 定位到父级元素的50%处 */
left: calc(50% - 75px);
}
.enemy {
width: 80px;
height: 50px;
position: absolute;
background: url(images/fj.png) 0 / 100% 100%;
}
.bullet {
width: 4px;
height: 10px;
background-color: gold;
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="plane"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(() => {
let container = $('.container')
let plane = $('.plane')
let maxTop = container.innerHeight() - plane.innerHeight()
let maxLeft = container.innerWidth() - plane.innerWidth()
$(window).keydown(({ keyCode }) => {
let top = plane.position().top
let left = plane.position().left
switch (keyCode) {
case 87:
top -= 10
break;
case 83:
top += 10
break;
case 65:
left -= 10
break;
case 68:
left += 10
break;
case 74:
shoot()
break;
}
if (top < 0) top = 0
if (left < 0) left = 0
if (top > maxTop) top = maxTop
if (left > maxLeft) left = maxLeft
plane.css({ top, left })
})
let endTime = new Date()
function shoot() {
if (new Date() - endTime < 500) return
let bullet = $('<div/>').addClass('bullet')
container.append(bullet)
bullet.css({
top: plane.position().top - bullet.innerHeight(),
left: plane.position().left + plane.innerWidth() / 2 - bullet.innerWidth() / 2
})
endTime = new Date()
}
// 开启定时器，不停地将所有子弹往上飞，敌机不停往下飞
setInterval(() => {
$('.bullet').each(function () {
let bullet = $(this)
bullet.css({
top: bullet.position().top - 10
})
if (bullet.position().top < 0) bullet.remove()
})
$('.enemy').each(function () {
let enemy = $(this)
enemy.css({
top: enemy.position().top + 10
})
if (enemy.position().top > container.innerHeight()) enemy.remove()
})
}, 100)
// 不间断生成敌机
setInterval(() => {
let enemy = $('<div/>').addClass('enemy')
container.append(enemy)
enemy.css({
top: 0,
left: Math.random() * (container.innerWidth() - enemy.innerWidth())
})
}, 2000);
function getPosition(node) {
return {
l: node.offsetLeft,
t: node.offsetTop,
r: node.offsetLeft + node.offsetWidth,
b: node.offsetTop + node.offsetHeight
}
}
function calcCollision(a, b) {
a = getPosition(a)
b = getPosition(b)
if (a.l > b.l && a.l < b.r && a.t > b.t && a.t < b.b) return true
if (a.l > b.l && a.l < b.r && a.b > b.t && a.b < b.b) return true
if (a.r > b.l && a.r < b.r && a.t > b.t && a.t < b.b) return true
if (a.r > b.l && a.r < b.r && a.b > b.t && a.b < b.b) return true
return false
}
// 不断检测碰撞
setInterval(() => {
let me = plane.get(0)
$('.enemy').each(function (i, enemy) {
if (calcCollision(enemy, me) || calcCollision(me, enemy)) {
location.reload()
alert('GG')
}
$('.bullet').each(function (j, bullet) {
if (calcCollision(bullet, enemy) || calcCollision(enemy, bullet)) {
bullet.remove()
enemy.remove()
}
})
})
}, 50);
})
</script>
</body>
