2024年Web前端最全Web前端--HTML+CSS+JS实现圣诞抓礼物小游戏_snowflakes js(1)，最新Web前端大厂高频面试题

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ctx.fillStyle = "yellow";

ctx.font = "30px Arial";
ctx.fillText(`请按空格键开始!`, 65, 140);

var highScore = getHighScore();
if (highScore != -1) ctx.fillText(`High Score: ${highScore}`, 90, 220);

drawRotatedImage(elfImage, canvas.width / 2 - elfWidth / 2, 330, elfRotation, 200);
elfRotation += 2;
if (elfRotation > 359) elfRotation = 0;

if (spacePressed && timer > 5) {
    setGameMode(gameModes.PLAYING);
}

}

function gameLoop() {
drawSnowPerson();
spawnGifts();
processGifts();
drawFloor();
drawHUD();
drawElf();
drawBang();

if (rightPressed) {
    elfX += elfSpeed;
    if (elfX + elfWidth > canvas.width) {
        elfX = canvas.width - (elfWidth + 5);
    }
} else if (leftPressed) {
    elfX -= elfSpeed;
    if (elfX < -15) {
        elfX = -15;
    }
}

}

function gameOver() {
ctx.font = “50px Arial”;
ctx.fillStyle = “yellow”;
ctx.fillText(GAME OVER!, 80, 200);
ctx.font = “30px Arial”;
ctx.fillText(Final score: ${score}, 130, 240);
ctx.fillText(‘Press space to continue’, 80, 280);

if (spacePressed && timer > 5) {
    initialiseGame();
    setGameMode(gameModes.TITLE);
}

}

function processGifts() {
gifts.forEach((g) => {
if (g && g.alive) {
// draw gift
drawGift(g);
if (g.y > canvas.height) {
g.alive = false;
if (!g.bomb) score–;
}

        // move gift
        g.y += g.speed;

        // rotate gift
        g.rotation += 5;
        if (g.rotation > 359) g.rotation = 0;

        // check for collision
        if ((g.y + (giftHeight / 2)) >= ((canvas.height - elfHeight - snowHeight) + 20) &&
            (g.y < canvas.height - snowHeight + 20)) {
            if ((elfX + 25) <= (g.x + (giftWidth / 2)) && ((elfX + 20) + (elfWidth)) >= g.x) {
                g.alive = false;
                if (!g.bomb) {
                    score += 5;
                } else {
                    doBombCollision();
                }
            }
        }
    }
});

}

function drawGift(g) {
switch (g.colour) {
case 1:
drawColouredGift(greenGiftImage, g);
break;
case 2:
drawColouredGift(redGiftImage, g);
break;
case 3:
drawColouredGift(blueGiftImage, g);
break;
case 4:
drawRotatedImage(bombImage, g.x, g.y, 180, 45);
break;
}
}

function drawColouredGift(colourImage, g) {
drawRotatedImage(colourImage, g.x, g.y, g.rotation, 35);
}

function doBombCollision() {
health–;
bangX = elfX;
bangTime = 5;
if (health == 0) {
setHighScore();
setGameMode(gameModes.GAMEOVER);
}
}

function drawBang() {
if (bangTime > 0) {
bangTime–;
ctx.drawImage(bangImage, bangX, (canvas.height - 75) - snowHeight, 75, 75);
}
}

**CSS样式：**

.cube {
width: 100%;
height: 100%;
}

@font-face {
    font-family: "RubikExtended";
    src: url("../media/RubikExtended.ttf") format( "truetype"), url("../media/RubikExtended.otf") format( "otf");
    font-weight: normal;
    font-style: normal;
}

/*

This next bit is just for labeling a Cube's face.

*/

.faceLabel {
    display: none;
    position: absolute;
    font-size: 60px;
    text-align: center;
    font-family: "RubikExtended";
    text-shadow: 0 0 24px rgba( 0, 0, 0, 0.3);
    color: #FFF;
}



.cube .cubelet {
    width: 1em;
    height: 1em;
    position: absolute;
    box-sizing: border-box;
}



Direction-facing planes of limited size
that act as containers for content.

*/

.cube
/*.cubelet >*/

.face {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: #000;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 0.05em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/*

Extroverted faces have content such as a colored sticker, text, etc.
They are constantly visible. Meanwhile introverted faces are not
visible when the cube is an untwisted state. Some introverted walls
are momentarily visible as the cube twists.

*/

.cube
/*.cubelet >*/

.face.faceIntroverted {
    background-color: #000;
}

### 最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![大厂面试题](https://img-blog.csdnimg.cn/img_convert/21cb782f1896b581f9e11f95e44fde00.webp?x-oss-process=image/format,png)

![面试题目录](https://img-blog.csdnimg.cn/img_convert/518a55f0fda40d53d2873bf5eea9332d.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/aedddd6b18c0b33d9f22435d6da35032.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/cacc717e5e86bc0c360ed4363ef8543e.webp?x-oss-process=image/format,png)





bs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-3FawI1vn-1715388393436)]

[外链图片转存中...(img-FF3xQmmE-1715388393437)]

[外链图片转存中...(img-3KqLq9oO-1715388393437)]

[外链图片转存中...(img-fes3aEzE-1715388393438)]