大家都在发圣诞树，我偏偏要发一个圣诞小游戏给大家玩【内附源码】

大家好，我是辣条。

前言

圣诞节快来了，热榜都被一堆圣诞树攻占了，这样的流量密码我怎么会错过，大家都发圣诞树，我就不发啦，直接分享一个圣诞小游戏给大家玩，代码太长一定要先赞和收藏。

领取福利

300+Python经典编程案例
50G+学习视频教程
100+Python初阶、中阶、高阶电子书籍
1000+简历模板和汇报PPT模板(转正、年终等)

实现效果

一个简单的2D网页小游戏它的制作过程是有规律可寻的，它每个部分都有一定的套路，我们应该
把有规律的部分总结在一起，形成一个模板，把相应的模板写好了，到要生产某个对象时就可以用
模板，还有游戏的整个流程每个函数，每个js文件之间都是分工明确的；我们要总结好了才写，
不要想到哪就写哪，这样虽然结果是相同的，但可能代码的可读性和维护性不是很强，思路不是很
清晰。

代码

代码这块没啥好说的，直接给大家贴上代码了，简单直接，能运行可以玩就可以了，分享给自己的朋友或者自己摸鱼玩，就图一乐。文件我已经打包好了，需要的话可以私我哦。
CSS代码：

body { background:rgb(8,8,58);margin:0;
}#wrapper {width:500px;margin-left:auto;margin-right:auto;margin-top:20px;
}

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 giftdrawGift(g);if (g.y > canvas.height) {g.alive = false;if (!g.bomb) score--;}// move giftg.y+=g.speed;// rotate giftg.rotation+=5;if ( g.rotation > 359) g.rotation = 0;// check for collisionif ((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);}
}function drawElf() {ctx.drawImage(elfImage, elfX,(canvas.height - elfHeight) - (snowHeight - 2),80,80);
}function spawn() {var newX = 5 + (Math.random() * (canvas.width - 5));var colour;var bomb = false;if (randomNumber(1,bombChance) == bombChance) {colour = 4;bomb = true;} else {colour = randomNumber(1,3);}var newGift = {x: newX,y: 0,speed: randomNumber(2,6),alive: true,rotation: 0,colour: colour,bomb: bomb,};gifts[maxGift] = newGift;maxGift++;if (maxGift > 75) {maxGift = 0;}
}function spawnGifts() {if (timer > spawnTimer) {spawn();timer = 0;}
}function drawRotatedImage(image, x, y, angle, scale)
{ ctx.save(); ctx.translate(x, y);ctx.rotate(angle * TO_RADIANS);ctx.drawImage(image, -(image.width/2), -(image.height/2), scale, scale);ctx.restore();
}function drawHUD() {ctx.font = "20px Arial";ctx.fillStyle = "yellow";ctx.fillText(`Score: ${score}`, 0, 25);var heart = '❤';var hearts = health > 0 ? heart.repeat(health) : " ";ctx.fillText("Helf:", canvas.width - 120, 25);ctx.fillStyle = "red";ctx.fillText(`${hearts}`, canvas.width - 60, 26);
}function initialiseGame() {health = 3;elfX = (canvas.width-elfWidth)/2;bangTime = 0;score = 0;snowHeight = 6;timer = 0;spawnTimer = 50;gifts = [];
}function initialiseSnow() {for (i=0; i<maxSnowflakes; i++) {var startY = -randomNumber(0, canvas.height);snowflakes[i] = {x: randomNumber(0, canvas.width-snowflakeSize),y: startY,startY: startY,colour: snowflakeColours[randomNumber(0,3)],radius: (Math.random() * 3 + 1),speed: randomNumber(snowflakeMinSpeed, snowflakeMaxSpeed)};}
}function drawSnow() {for (i=0; i<maxSnowflakes; i++) {snowflakes[i].y+=snowflakes[i].speed;if (snowflakes[i].y>canvas.height) snowflakes[i].y = snowflakes[i].startY;ctx.beginPath();ctx.arc(snowflakes[i].x, snowflakes[i].y, snowflakes[i].radius, 0, 2 * Math.PI, false);ctx.fillStyle = snowflakes[i].colour;ctx.fill();}
}function drawFloor() {var snowTopY = canvas.height - snowHeight;ctx.fillStyle = '#fff';ctx.beginPath();ctx.moveTo(0, snowTopY);ctx.lineTo(canvas.width, snowTopY);ctx.lineTo(canvas.width, canvas.height);ctx.lineTo(0, canvas.height);ctx.closePath();ctx.fill();
}function drawSnowPerson() {var snowTopY = canvas.height - snowHeight;drawCircle("#fff", 100, snowTopY-20, 40);drawCircle("#fff", 100, snowTopY-70, 20);drawRectangle("#835C3B", 85, snowTopY-105, 30, 20);drawRectangle("#835C3B", 75, snowTopY-90, 50, 6);drawTriangle("#ffa500", 100, snowTopY-64, 7);drawCircle("#000", 93, snowTopY-76, 3);drawCircle("#000", 108, snowTopY-76, 3);drawCircle("#000", 100, snowTopY-40, 2);drawCircle("#000", 100, snowTopY-30, 2);drawCircle("#000", 100, snowTopY-20, 2);
}function drawTriangle(color, x, y, height) {ctx.strokeStyle = ctx.fillStyle = color;ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x - height, y - height);ctx.lineTo(x + height, y - height);ctx.fill();
}function drawCircle(color, x, y, radius) {ctx.strokeStyle = ctx.fillStyle = color;ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI * 2, true);ctx.closePath();ctx.stroke();ctx.fill();
}function drawRectangle(color, x, y, width, height) {ctx.strokeStyle = ctx.fillStyle = color;ctx.fillRect(x, y, width, height);
}function randomNumber(low, high) {return Math.floor(Math.random() * high) + low;
}function makeColorGradient(frequency1, frequency2, frequency3,phase1, phase2, phase3,center, width, len) {var colours = [];for (var i = 0; i < len; ++i){var r = Math.sin(frequency1*i + phase1) * width + center;var g = Math.sin(frequency2*i + phase2) * width + center;var b = Math.sin(frequency3*i + phase3) * width + center;colours.push(RGB2Color(r,g,b));}return colours;
}function RGB2Color(r,g,b) {return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}function byte2Hex(n) {var nybHexString = "0123456789ABCDEF";return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}function setColourGradient() {center = 128;width = 127;steps = 6;frequency = 2*Math.PI/steps;return makeColorGradient(frequency,frequency,frequency,0,2,4,center,width,50);
}function initialiseSpawnInterval() {if (gameMode === gameModes.PLAYING && spawnTimer>2) {spawnTimer--;spawnTimeChangeInterval-=50;}
}function setGameMode(mode) {gameMode = mode;timer=0;
}function raiseSnow() {if (gameMode === gameModes.PLAYING && snowHeight < canvas.height) {snowHeight++;}
}function setHighScore() {var currentHighScore = getHighScore();if (currentHighScore !=-1 && score > currentHighScore) {localStorage.setItem("highScore", score);}
}function getHighScore() {if (!localStorage) return -1;var highScore = localStorage.getItem("highScore");return highScore || 0;
}titleColours = setColourGradient();
initialiseSnow();
setInterval(draw, 30);
setInterval(initialiseSpawnInterval, spawnTimeChangeInterval);
setInterval(raiseSnow, 666);

html代码

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Elf Gift Catch</title><link rel="stylesheet" href="css/style.css">#中间省略N个代码太长了</head>
<body><div id="wrapper"><canvas id="canvas" width="450" height="540"></canvas></div></div><script  src="js/script.js"></script></body>
</html>

演示流程

打包的文件就三个，一个css的代码，一个JS的代码，还有一个html的文件，打包好之后，点击html的文件就能直接运行了呢。

大家都在发圣诞树，我偏偏要发一个圣诞小游戏给大家玩【内附源码】相关推荐

【游戏合集】手机都要被塞爆了，6款优质Pygame游戏合集降临~（附源码）
前言
java计算机毕业设计ssm兴发农家乐服务管理系统n159q（附源码、数据库）
java计算机毕业设计ssm兴发农家乐服务管理系统n159q(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行 ...
圣诞树的雪花飘飘（结尾附源码）
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
一篇从零开始、步骤完整的网站搭建教程（全篇7000字、102张截图说明，力求每一个人都能看懂，附源码）
从今年八月开始到现在自己也是从0开始做了有两个网站: 这中间也经常有不了解的地方需要去查.其实网上的资料也不少但可能相对比较零散,需要反复的查来查去,费时又累心那这次有时间就想着说写一篇从零开始. ...
《看聊天记录都学不会Python到游戏实战？太菜了吧》（8）我们开始做一个数字小游戏吧
本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新手在学习中的一般问题.此系列将会持续更新,包括别的语言以及实战都将使用对话的方式进行教学,基础编程语言教学适用于零基础小白,之后实战课程也将 ...
php导入qq数据txt代码,/谁有能都实现将excel文件导入到数据中，并在php网页上显示的源码啊，有的发送1091932879@qq.com,谢谢!...
PHP网页怎么导入Excel的数据参码如下: // 1.引用ExcelReader类文 require_once 'Excel/reader.php'; // 2.实例化读取Excel类 $data ...
熬夜整理出了70个清华大佬都在用的Python经典练手项目【附源码】
我们都知道,不管学习那门语言最终都要做出实际的东西来,而对于编程而言,这个实际的东西当然就是项目啦,不用我多说大家都知道学编程语言做项目的重要性. 于是,小编熬了几个通宵,终于整理出了70个清华大佬都 ...
（附源码）SSM兴发农家乐服务管理系统JAVA计算机毕业设计项目
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
【附源码】计算机毕业设计java兴发农家乐服务管理系统设计与实现
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...

大家都在发圣诞树，我偏偏要发一个圣诞小游戏给大家玩【内附源码】

前言

实现效果

代码

演示流程

大家都在发圣诞树，我偏偏要发一个圣诞小游戏给大家玩【内附源码】相关推荐

最新文章

热门文章