Web前端最全Web前端--HTML+CSS+JS实现圣诞抓礼物小游戏_snowflakes js，2024年最新十多家大厂前端面试真题锦集干货整理

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

timer++;

switch (gameMode) {
    case gameModes.TITLE:
        titleScreen();
        break;
    case gameModes.GAMEOVER:
        gameOver();
        break;
    case gameModes.PLAYING:
        gameLoop();
        break;
}

}

function titleScreen() {
if (timer > titleColours.length) timer = 0;

ctx.font = "50px Arial";
ctx.fillStyle = titleColours[timer];
ctx.fillText(`圣诞抓礼物!`, 0, 50);
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;

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

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

ng: 0.05em;
-moz-box-sizing: border-box;

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

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

[外链图片转存中…(img-rLkdBuHo-1715872908119)]