1. 作品展示

2. 代码（全）

链接：https://pan.baidu.com/s/1Mxdz8rR18uM_7yuY-eTwbQ
提取码：6666

以下是项目目录及部分代码。

① 项目目录

② HTML

<!-- page\PinballKing.html --><!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><div class="game-zone"><div class="function-area"><div class="button continue-button keep">继续</div><div class="button start-button play">开始游戏</div><div class="button puse-button suspend">暂停</div></div><div class="blocks"><div class="ball"></div><div class="skate"></div><div class="message"><div class="info-txt">第&nbsp;1&nbsp;关</div><div class="info-time">时间: 00:00</div><div class="info-number">砖块: 0</div></div></div></body><script src="../js/index.js">
</script>
</html>

③ CSS

/* css\index.css *//* 游戏区 */
.game-zone {background-color: pink;height: 600px;width: 900px;margin: 50px 300px;color: white;font-size: 25px;font: bold;font-family: cursive;user-select: none;
}
/* 功能区 */
.function-area {height: 36px;background-color: #ccc;display: flex;
}
/* 开始游戏按钮 */
.active {background-color: black;
}
.start-button {flex: 1;/* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */justify-content: center;/* align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */align-items: center;color: #fff;display: flex;
}
.start-button:hover {background-color: rgb(115, 115, 168);
}
/* 继续 */
.continue-button {flex: 1;justify-content: center;align-items: center;color: #fff;display: flex;
}
.continue-button:hover {background-color: rgb(187, 187, 247);
}
/* 暂停 */
.puse-button {flex: 1;justify-content: center;align-items: center;color: #fff;display: flex;
}
.puse-button:hover {background-color: rgb(160, 160, 212);
}
/* 堆块区 */
.blocks {height: calc(600px - 36px);background-color: rgb(220, 247, 255);position: relative;overflow: hidden;
}
.row {height: 20px;margin-top: 15px;/* margin-right: 5px;margin-left: 5px; */display: flex;justify-content: space-between;
}
.brick {width: 107px;height: 30px;
}
.brick:nth-child(1) {background-color: rgb(255, 106, 106);border-radius: 10px;
}
.brick:nth-child(2) {background-color: rgb(255, 161, 126);border-radius: 10px;
}
.brick:nth-child(3) {background-color: rgb(253, 255, 147);border-radius: 10px;
}
.brick:nth-child(4) {background-color: rgb(173, 248, 143);border-radius: 10px;
}
.brick:nth-child(5) {background-color: rgb(146, 190, 255);border-radius: 10px;
}
.brick:nth-child(6) {background-color: rgb(155, 214, 253);border-radius: 10px;
}
.brick:nth-child(7) {background-color: rgb(209, 152, 255);border-radius: 10px;
}
.brick:nth-child(8) {background-color: coral;border-radius: 10px;
}
/* 滑板 */
.skate {width: 100px;height: 20px;background-image: url("../images/skate.png");border-radius: 20px;position: absolute;left: 400px;bottom: 1px;
}
.ball {width: 20px;height: 20px;position: absolute;left: 440px;bottom: 22px;border-radius: 20px;background-image: url("../images/ball.png");
}
.message {font-size: 20px;position: absolute;right: 85px;bottom: 40px;line-height: 30px;color: pink;
}

④ JS

/* js\index.js */// 封装一个添加类名的函数
function addClass(obj) {// classList 属性返回元素的类名，作为 DOMTokenList 对象var buttons = document.querySelectorAll(".button");for (var i = 0; i < buttons.length; i++) {buttons[i].classList.remove("active");}obj.classList.add("active");
};// 循环创建div
var blocks = document.querySelector(".blocks");
function createBrick(n) {for (var i = 0; i < n; i++) {var row = document.createElement("div");row.classList.add("row");for (var j = 0; j < 8; j++) {var brick = document.createElement("div");brick.classList.add("brick");row.appendChild(brick);}blocks.appendChild(row);}var brick = document.querySelectorAll(".brick");for (var i = 0; i < brick.length; i++) {brick[i].style.left = brick[i].offsetLeft + "px";brick[i].style.top = brick[i].offsetTop + "px";}for (var j = 0; j < brick.length; j++) {brick[j].style.position = "absolute";}
};
createBrick(8);// 封装定时器
function innerval() {timer = setInterval(function() {ball.style.top = ball.offsetTop + spendY + "px";ball.style.left = ball.offsetLeft + spendX + "px";//  是否出上边界if (ball.offsetTop < 0) {spendY *= -1}// 是否出左右边界if (ball.offsetLeft < 0 || ball.offsetLeft > blocksWidth - ballWidth) {spendX *= -1}// 是否出下边界if (ball.offsetTop > blocksHeight - ballHeight) {// 游戏结束，停止定时器clearInterval(timer)// 解绑事件skate.onmousedown = null;document.onmousemove = null;alert("游戏结束！");}if (collide(ball, skate)) {spendY *= -1;}var rows = document.querySelectorAll(".row");for (var i = 0; i < rows.length; i++) {var item = rows[i];for (var k = 0; k < item.children.length; k++) {if (collide(ball, item.children[k])) {spendY *= -1;item.children[k].style.display = "none";score++;var number = document.querySelector(".info-number");number.innerText = "砖块：" + score;}}}time++;var infoTime = document.querySelector(".info-time");infoTime.innerText = "时间：" + resetTime(time * 20 / 1000)}, 20);
};// 封装两个节点相撞的函数
function collide(node1, node2) {var left1 = node1.offsetLeft;var right1 = node1.offsetLeft + node1.offsetWidth;var top1 = node1.offsetTop;var bottom1 = node1.offsetTop + node1.offsetHeight;var left2 = node2.offsetLeft;var right2 = node2.offsetLeft + node2.offsetWidth;var top2 = node2.offsetTop;var bottom2 = node2.offsetTop + node2.offsetHeight;if (left1 > right2 || left2 > right1 || top1 > bottom2 || top2 > bottom1) {return 0;} else {return 1;}
}// 重置时间
function resetTime(setTime) {var f = Math.floor(setTime / 60);var s = Math.floor(setTime % 60);return (f < 10 ? "0" + f : f) + ":" + (s < 10 ? "0" + s : s);
}// querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
var skate = document.querySelector(".skate");
var gameZone = document.querySelector(".game-zone");
var ball = document.querySelector(".ball");
var blocks = document.querySelector(".blocks");var skateWidth = skate.offsetWidth;
var skateHeight = skate.offsetHeight;var gameZoneWidth = gameZone.offsetWidth;var blocksWidth = blocks.offsetWidth;
var blocksHeight = blocks.offsetHeight;var ballHeight = ball.offsetHeight;
var ballWidth = ball.offsetWidth;var spendY;
var spendX;
var timer;var score = 0;
var time = 1;// 开始游戏
var play = document.querySelector(".play");
play.onclick = function() {// play.classList.add("active");addClass(play);// 滑板绑定鼠标按下事件skate.onmousedown = function() {document.onmousemove = function(e) {// js在事件处理兼容IE和非IE的写法var e = e || window.event;// e.pageX -> 触摸目标在页面中的x坐标。var moveX = e.pageX - gameZone.offsetLeft - skateWidth / 2;//  判断是否出了左边界if (moveX < 0) {moveX = 0;}// 判断是否出了右边界if (moveX > gameZoneWidth - skateWidth) {moveX = gameZoneWidth - skateWidth;}skate.style.left = moveX + "px";}};document.onmouseup = function() {// 鼠标弹起解绑鼠标移动事件document.onmousemove = null;};// 小球的垂直速度 -3 ~ -5spendY = Math.floor(Math.random() * (-3 - (-5) + 1) + -5);// 小球的水平速度 -5 ~ 5spendX = Math.floor(Math.random() * (5 - -5 + 1) + -5);while (spendY == 0) {// 重新生成一个随机数spendY = Math.floor(Math.random() * (5 - -5 + 1) + -5);if (spendX != 0) {break;}}innerval();};// 继续
var keep = document.querySelector(".keep")
keep.onclick = function() {addClass(keep);innerval();
};// 暂停
var suspend = document.querySelector(".suspend")
suspend.onclick = function() {addClass(suspend);clearInterval(timer);
};

Web前端开发实训 -- 弹球王小游戏相关推荐

php淘兴趣,Web前端开发实训案例教程(中级1+X证书制度试点培训用书)
目录第1章实践概述 1.1 实践目标 1.2 实践知识地图 1.3 实施安排 1.3.1 实验(技术专题)部分 1.3.2 综合实践部分第2章开发工具(HBuilder) 2.1 实验目标 2 ...
C语言实训——经点小游戏马里奥开发day2
C语言实训--经点小游戏马里奥开发day2 角色移动相关一.直接改变坐标在制作了卷轴式的地图后,为了发挥卷轴式地图的优越性,马里奥能自由移动是必须的,为了实现马里奥的移动,最开始我尝试的是当用户按 ...
山东大学项目实训——简易微信小游戏（一）
一.项目背景微信小程序接触真实用户快,对用户反馈快速体现,是一个非常好的实践平台.同时就行业背景来看,人们对于无需安装打开即玩的休闲类小游戏的需求依然存在. 二.工作内容开发绳套奶牛.大鱼吃小鱼. ...
C语言实训 easyx 2048小游戏（带背景音乐）
easyx2048小游戏如果对你有帮助的话,希望可以给我点个赞支持一下. 想要别的实训代码源码的可以私信QQ2542909300找我,或者程序有什么内容的话也可以找我帮忙看看. https://gi ...
如何开发实操公众号小游戏的裂变？
作者 | 月小水长本文经授权转载自月小水长(ID:inspureri) 创作灵感昨天在朋友圈看到这样一则分享: 好奇心驱使着我扫了图中的二维码(已打码),发现是引导关注公众号的,我一点关注后, ...
1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
2019年最新《Web 前端开发》等级考试模拟题～以国家 “1+X” 职业技能证书为标准，厚溥推出 Web 前端开发人才培养方案...
转载请注明来源:妙笔生花个人博客http://blog.zh66.club/index.php/archives/438/ 官方QQ群 1+x 证书 Web 前端开发初级理论考试(试卷 13 ) ht ...
Web前端开发之网站制作流程详细讲解
一个网站想要顺利的运行就离不开HTML5网页技术开发人员,因此熟悉整个网站的开发建设流程对HTML5网页技术开发人员尤为重要,本篇文章扣丁学堂小编就和大家分享一下Web前端开发之网站制作流程,希望可以 ...
2018 年，WEB前端开发人员应该关注哪些新晋技术？
随着近年来前端的一波又一波技术浪潮,前端早已经告别了切图的时代,迎来的是规模化,工程化的大路.但是在如此多变的技术浪潮下,我们如何辨识清楚它的发展方向,如何让我们的技术得到一次质的飞跃? 首先我们来回 ...

Web前端开发实训 -- 弹球王小游戏

1. 作品展示

2. 代码（全）

① 项目目录

② HTML

③ CSS

④ JS

Web前端开发实训 -- 弹球王小游戏相关推荐

最新文章

热门文章