html+css+js气球消除小游戏

气球消除小游戏 消除15个就成功 源码在图片后 点赞加关注,谢谢 左上角的数字显示消除气球的数量 定时随机生成气球 🎈🎈🎈

图片

源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>在线扎气球小游戏</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f0f0;

margin: 0;

font-family: Arial, sans-serif;

}

#score {

position: absolute;

top: 10px;

left: 10px;

font-size: 2rem;

}

.balloon {

width: 160px; /* 调整宽度以匹配高度,使气球更圆 */

height: 160px; /* 保持高度不变 */

border-radius: 50%; /* 调整为50%,使气球主体更圆 */

background: linear-gradient(#ffdad6, #ff8080);

position: absolute;

cursor: pointer;

}

.balloon:after {

content: "";

width: 4px;

height: 40px;

background-color: darkgray;

position: absolute;

bottom: -40px;

left: calc(50% - 2px);

}

</style>

</head>

<body>

<div id="score">0</div>

<script>

let score = 0;

const scoreElement = document.getElementById('score');

const colors = ["#ff8080", "#80ff80", "#8080ff", "#ffff80", "#80ffff"];

function createBalloon() {

const balloon = document.createElement('div');

balloon.className = 'balloon';

balloon.style.backgroundColor = `linear-gradient(#e6e6fa, ${colors[Math.floor(Math.random() * colors.length)]})`;

balloon.style.left = Math.random() * (window.innerWidth - 160) + 'px'; /* 调整left值以避免超出屏幕 */

balloon.style.top = Math.random() * (window.innerHeight - 160) + 'px';

document.body.appendChild(balloon);

balloon.addEventListener('click', () => {

balloon.remove();

score++;

scoreElement.textContent = score;

if (score > 15) {

alert('恭喜你!你赢了!');

location.reload(); // 重新加载页面

}

});

}

window.onload = function() {

setInterval(createBalloon, 1000);

createBalloon();

};

</script>

</body>

</html>

相关推荐
北海-cherish2 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch3 小时前
网球馆自动预约系统的反调试
javascript·网络
2501_915909063 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist4 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师5 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。5 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡5 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含5 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js