Web前端--HTML+CSS+JS实现圣诞抓礼物小游戏_snowflakes js

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的电竞博客网页制作，画面精明，非常适合初学者学习使用。

效果动图演示：

查看完整视频

代码实现：

JS部分：

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    elfImage = document.getElementById("elf");
greenGiftImage = document.getElementById("green_gift");
redGiftImage = document.getElementById("red_gift");
blueGiftImage = document.getElementById("blue_gift");
bombImage = document.getElementById("bomb");
bangImage = document.getElementById("bang");

var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
const elfHeight = 70;
const elfWidth = 55;
var elfX = (canvas.width - elfWidth) / 2;
const elfSpeed = 10;
var rightPressed = false;
var leftPressed = false;
var spacePressed = false;
var spawnInterval;
var spawnTimer = 50;
var gifts = [];
var maxGift = 0;
const giftWidth = 40;
const giftHeight = 40;
var timer = 0;
var giftRotation = 0;
const TO_RADIANS = Math.PI / 180;
var score = 0;
var health = 3;
const bombChance = 5;
var elfRotation = 0;
var bangX;
var bangTime;
var snowHeight = 6;
var spawnTimeChangeInterval = 3000;
var titleColours = [];

// snowflake stuff
var snowflakes = [];
const maxSnowflakes = 80;
const snowflakeSize = 3;
const snowflakeMinSpeed = 1;
const snowflakeMaxSpeed = 4;
const snowflakeColours = ["rgba(255,255,255,0.95)", "rgba(255,255,255,0.65)", "rgba(255,255,255,0.4)"];

const gameModes = {
    TITLE: 'title',
    PLAYING: 'playing',
    GAMEOVER: 'gameover'
};

var gameMode = gameModes.TITLE;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    } else if (e.code == "Space") {
        spacePressed = true;
    }
}

function keyUpHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    } else if (e.code == "Space") {
        spacePressed = false;
    }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSnow();

    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);
    }
}


### 文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。



同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。



![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)



**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/a489904576da281d07092f043566f6dd.png)