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);
}
}
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
;
bangTime = 5;
if (health == 0) {
setHighScore();
setGameMode(gameModes.GAMEOVER);
}
}
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-KvsE4kAl-1714392953451)]