巨人的肩膀:https://github.com/bradtraversy/vanillawebprojects
实现的是一个弹球的小游戏,设计的难点就是对于运动是碰撞的多种判断和移动的方向,其实在代码注释中就很清晰明了了。其中新加入了在网页上面飘散雪花的功能,同样在代码中体现。
style.css
* {
box-sizing: border-box;
}
body {
background-color: #0095dd;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
margin: 0;
}
h1 {
font-size: 45px;
color: #fff;
}
canvas {
background: #f0f0f0;
display: block;
border-radius: 5px;
}
.btn {
cursor: pointer;
border: 0;
padding: 10px 20px;
background: #000;
color: #fff;
border-radius: 5px;
}
.btn:focus {
outline: 0;
}
.btn:hover {
background: #222;
}
.btn:active {
transform: scale(0.98);
}
.rules-btn {
position: absolute;
top: 30px;
left: 30px;
}
.rules {
position: absolute;
top: 0;
left: 0;
background: #333;
color: #fff;
min-height: 100vh;
width: 400px;
padding: 20px;
line-height: 1.5;
transform: translateX(-400px);
transition: transform 1s ease-in-out;
}
.rules.show {
transform: translateX(0);
}
script.js
const rulesBtn = document.getElementById('rules-btn');
const closeBtn = document.getElementById('close-btn');
const rules = document.getElementById('rules');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let score = 0;
const brickRowCount = 9; //9行
const brickColumnCount = 5; //5列
const delay = 500; //delay to reset the game
// Create ball props
const ball = {
x: canvas.width / 3,
y: canvas.height / 2,
size: 10,
speed: 4,
dx: 4,
dy: -4, //偏移量
visible: true
};
// Create paddle props
const paddle = {
x: canvas.width / 2 - 40,
y: canvas.height - 20,
w: 80,
h: 10,
speed: 8,
dx: 0,
visible: true
};
// Create brick props
const brickInfo = { //砖块的信息
w: 70,
h: 20,
padding: 10,
offsetX: 45,
offsetY: 60,
visible: true
};
// Create bricks
const bricks = [];
for (let i = 0; i < brickRowCount; i++) {
bricks[i] = [];
for (let j = 0; j < brickColumnCount; j++) {
const x = i * (brickInfo.w + brickInfo.padding) + brickInfo.offsetX;
const y = j * (brickInfo.h + brickInfo.padding) + brickInfo.offsetY;
bricks[i][j] = { x, y, ...brickInfo };
}
}
// Draw ball on canvas
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);
ctx.fillStyle = ball.visible ? '#0095dd' : 'transparent';
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
//创建矩形 X坐标 y坐标 矩形宽度 矩形高度
ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h);
ctx.fillStyle = paddle.visible ? '#0095dd' : 'transparent';
ctx.fill();
ctx.closePath();
}
function drawScore() {
ctx.font = '20px Arial'; //字体的大小和类型
ctx.fillText(`Score : ${score}`,canvas.width - 100, 30);
}
function drawBricks() {
bricks.forEach(column => { //所有块中的每一列
column.forEach(brick => { //所有列中的每一个块
ctx.beginPath();
ctx.rect(brick.x, brick.y, brick.w, brick.h);
ctx.fillStyle = brick.visible ? '#0095dd' : 'transparent';
ctx.fill();
ctx.closePath();
});
});
}
function movePaddle() {
paddle.x += paddle.dx; //初始加上paddle所占据的长度
//检测Wall
if(paddle.x + paddle.w > canvas.width) {
paddle.x = canvas.width - paddle.w; //检测其不会出右边界
}
if(paddle.x < 0) {
paddle.x = 0; //限制其不会出左边界
}
}
function moveBall() {
ball.x += ball.dx;
ball.y += ball.dy;
//碰撞检测(Wall collision, L R)
if(ball.x + ball.size > canvas.width || ball.x - ball.size < 0) {
ball.dx *= -1; //dx反向 可以形成一个夹角
}
//碰撞检测(Wall collision, T ,B)
if(ball.y + ball.size > canvas.height || ball.y - ball.size < 0) {
ball.dy *= -1; //反向
}
//console.log(ball.x, ball.y);
//碰撞检测(Paddle)
if(
ball.x - ball.size > paddle.x && //在板子的左边界靠右
ball.x + ball.size < paddle.x + paddle.w && //在板子的右边界靠左
ball.y + ball.size > paddle.y //当球碰到板子
){
ball.dy = -ball.speed; //速度反向
}
//碰撞检测(Brick)
bricks.forEach(column => {
column.forEach(brick =>{
if(brick.visible) {
if(
ball.x - ball.size > brick.x&& //左边界的右边
ball.x + ball.size < brick.x + brick.w && //右边界的左边
ball.y + ball.size > brick.y && //碰到上边界
ball.y - ball.size < brick.y + brick.h //碰到下边界
){
ball.dy *= -1;
brick.visible = false;
IncreaseScore();
}
}
});
});
//板子没接住,碰到了地面Reset
if(ball.y + ball.size > canvas.height) {
showAllBricks();
score = 0;
}
}
function IncreaseScore() {
score ++;
if(score % (brickRowCount * brickColumnCount) ==0) {
alert("这么牛的吗?");
ball.visible = false ;
paddle.visible = false;
//直接清零 重新开始
setTimeout(function(){
showAllBricks();
score = 0;
paddle.x = canvas.width / 2 - 40;
paddle.y = canvas.height - 20;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.visible = true;
paddle.visible = true;
},delay);
}
}
//全部展现出来
function showAllBricks() {
bricks.forEach(column => {
column.forEach(brick => (brick.visible = true));
});
}
//调用所有draw函数
function draw() {
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
drawScore();
drawBricks();
}
function update() {
movePaddle();
moveBall();
// Draw everything
draw();
requestAnimationFrame(update);
}
update();
// Keydown event
function keyDown(e) {
if (e.key === 'Right' || e.key === 'ArrowRight') {
paddle.dx = paddle.speed;
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
paddle.dx = -paddle.speed;
}
}
// Keyup event
function keyUp(e) {
if (
e.key === 'Right' ||
e.key === 'ArrowRight' ||
e.key === 'Left' ||
e.key === 'ArrowLeft'
) {
paddle.dx = 0;
}
}
function snow() {
// 1、定义一片雪花模板
var flake = document.createElement('div');
// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
flake.innerHTML = '❉';
flake.style.cssText = 'position:absolute;color:#ffffff;';
//获取页面的高度 相当于雪花下落结束时Y轴的位置
var documentHieght = window.innerHeight;
//获取页面的宽度,利用这个数来算出,雪花开始时left的值
var documentWidth = window.innerWidth;
//定义生成一片雪花的毫秒数
var millisec = 10;
//2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花;
setInterval(function() { //页面加载之后,定时器就开始工作
//随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth;
//随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth;
//随机生成雪花大小
var flakeSize = 3 + 20 * Math.random();
//随机生成雪花下落持续时间
var durationTime = 4000 + 7000 * Math.random();
//随机生成雪花下落 开始 时的透明度
var startOpacity = 0.7 + 0.3 * Math.random();
//随机生成雪花下落 结束 时的透明度
var endOpacity = 0.2 + 0.2 * Math.random();
//克隆一个雪花模板 true复制所有的子孙结点
var cloneFlake = flake.cloneNode(true);
//第一次修改样式,定义克隆出来的雪花的样式
cloneFlake.style.cssText += `
left: ${startLeft}px;
opacity: ${startOpacity};
font-size:${flakeSize}px;
top:-25px;
transition:${durationTime}ms;`
//拼接到页面中
document.body.appendChild(cloneFlake);
//设置第二个定时器,一次性定时器,
//当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来;
setTimeout(function() {
//第二次修改样式
cloneFlake.style.cssText += `
left: ${endLeft}px;
top:${documentHieght}px;
opacity:${endOpacity};`;
//4、设置第三个定时器,当雪花落下后,删除雪花。
setTimeout(function() {
cloneFlake.remove();
}, durationTime);
}, 0);
}, millisec);
}
snow();
// Keyboard event handlers
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
// Rules and close event handlers
rulesBtn.addEventListener('click', () => rules.classList.add('show'));
closeBtn.addEventListener('click', () => rules.classList.remove('show'));
破冰游戏.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style1.css"/>
<title>破冰</title>
</head>
<body>
<h1>BreakIce!</h1>
<button id="rules-btn" class="btn rules-btn">Show Rules</button>
<div id="rules" class="rules">
<h2>How to play:</h2>
<p>
Use your right and left keys to move the board to bounce(反弹) the ball
and break the ice.
</p>
<p>
If you miss the ball, your score and the ice will reset.
</p>
<button id="close-btn" class="btn">
Close
</button>
</div>
<canvas id="canvas" width="800" height="600"></canvas>
<script src="script1.js"></script>
</body>
</html>