Web前端–HTML+CSS+JS完成圣诞抓小礼物小游戏

邻近期末,还在为HTML网页部分设计结课作业,教师的作业后其要求感到头大？网页其要求的总数量太多？HTML网页作业后无从动手？也没适宜的模板？等等一系列问题。想要解决的成绩，这里罕见网页部分设计作业后题材有 团短片题材体、美食、公司、体育、化装品、物流、环保、的书、婚纱、军事、游戏、节日、戒烟、影戏、图片摄影 学校的学生、旅游度假、电商、宠物、电器、茶叶、家居、旅店、民族舞、动漫、明星、服饰、文明、故乡、鲜花、礼物、汽车、其他等网页部分设计标题,A+程度作业后,可知足大学生网页游戏大作业网页部分设计消费需求都能满足你消费需求。原始HTML+CSS+JS页面部分设计,web大学生网页部分设计作业后源码，这是一个不错的电竞博客网页制作，画面很精明，十分合适初学者去学习运用。

好效果动图演示：

代码完成：

JS局部：

varcanva=document.getElementById"canvas",ctx=canvas.getContext"2d",elfImag=document.getElementById"elf";greenGiftImag=document.getElementById"green_gift";redGiftImag=document.getElementById"red_gift";blueGiftImag=document.getElementById"blue_gift";bombImag=document.getElementById"bomb";bangImag=document.getElementById"bang";varx=canvas.width/2;vary=瀑布题材canvas.height-30;vard影视题材x=2;vardy=-2;constelfHeight=70;constelfWidth=55;varelfX=canvas.width-elfWidth/2;constelfSpe=10;varrightPress=false;varleftPress=false;varspacePress=false;varspawnInterval;varspawnTim=50;vargift=[];varmaxGift=0;constgiftWidth=40;constgiftHeight=40;vartimer=0;vargiftRot=0;constTO_RA DIA NS=Math.PI/180;varscore=0;varhealth=3;constbombChanc=5;varelfRot=0;varbangX;varbangTime;varsnowHeight=6;varspawnTimeChangeInterv=300作文题材0;vartitleColour=[];//snowflakstuffvarsnowflak=[];constmaxSnowflak=80;constsnowflakeS=3;constsnowflakeMinSpe=1;constsnowflakeMaxSpe=4;constsnowflakeColour=["rgba255,255,255,0.95","rgba255,255,255,0.65","rgba255,255,255,0.4"];constgameMod={TITLE:\'title\',PLA YING:\'playing\',GA MEOVER:\'gameover\'};vargameMod=gameModes.TITLE;document.addEventListen"keydown",keyDownHandler,fals;document.addEventListen"keyup",keyUpHandler,fals;functionkeyDownHandle{ife.kei=="Right"||e.kei=="A rrowRight"{rightPress=true;}elsi视频题材fe.kei=="Left"||e.kei=="A rrowLeft"{leftPress=true;}elsife.cod=="Space"{spacePress=true;}}functionkeyUpHandle{ife.kei=="Right"||e.kei=="A rrowRight"{rightPress=false;}elsife.kei=="Left"||e.kei=="A rrowLeft"{leftPress=false;}elsife.cod=="Space"{spacePress=false;}}functiondraw{ctx.clearRect0,0,canvas.width,canvas.height;drawSnow;timer++;switchgameMod{casegameModes.TITLE:titleScreen;break;casegameModes.GA MEOVER:gameOv;break;casegameModes.PLA YING:gameLoop;break;}}functiontitleScreen{iftimer>titleColours.lengthtimer=0;ctx.font="50pxArial";ctx.fillStyl=titleColours[timer];ctx.fillText`圣诞抓礼物!`,0,50;ctx.fillStyl="yellow";ctx.font="30pxArial";ctx.fillText`请按空格键开始!`,65,140;varhighScor=getHighScor;ifhighScor!=-1小说题材ctx.fillText`HighScore:${highScore}`,90,220;drawRotatedImagelfImage,canvas.width/2-elfWidth/2,330,elfRotation,200;elfRot+=2;ifelfRot>359elfRot=0;ifspacePress&&timer>5{setGameModgameModes.PLA YING;}}functiongameLoop{drawSnowPerson;spawnGift;processGift;drawFloor;drawHUD;drawElf;drawBang;ifrightPress{elfX+=elfSpeed;ifelfX+elfWidth>canvas.width{elfX=canvas.width-elfWidth+5;}}elsifleftPress{elfX-=elfSpeed;ifelfX<-15{elfX=-15;}}}functiongameOv{ctx.font="50pxArial";ctx.fillStyl="yellow";ctx.fillText`GA MEOVER!`,80,200;ctx.font="30pxArial";ctx.fillText`Finalscore:${score}`,130,240;ctx.fillText\'Pressspacetocontinue\',80,280;ifspacePress&&timer>5{initialiseGam;setGameModgameModes.TITLE;}}functionprocessGift{gifts.forEachg=>{ifg&&g.aliv{//drawgiftdrawGiftg;ifg.y>canvas.height{g.aliv=false;if!g.bombscore--;}//movegiftg.y+=g.speed;//rotatgiftg.rotat+=5;ifg.rotat>359g.rotat=0;//checkforcollisifg.y+giftHeight/2>=canvas.height-elfHeight-snowHeight+20&&g.y<canvas.height-snowHeight+20{ifelfX+25<=g.x+giftWidth/2&&elfX+20+elfWidth>=g.x{g.aliv=false;if!g.bomb{score+=5;}els{doBombCollis;}}}}};}functiondrawGiftg{switchg.colour{case1:drawColouredGiftgreenGiftImage,g;break;case2:drawColouredGiftredGiftImage,g;break;case3:drawColouredGiftblueGiftImage,g;break;case4:drawRotatedImagbombImage,g.x,g.y,180,45;break;}}functiondrawColouredGiftcolourImage,g{drawRotatedImagcolourImage,g.x,g.y,g.rotation,35;}functiondoBombCollis{health--;bangX=elfX;bangTim=5;ifhealth==0{setHighScor;setGameModgameModes.GA MEOVER;}}functiondrawBang{ifbangTim>0{bangTime--;ctx.drawImagbangImage,bangX,canvas.height-75-snowHeight,75,75;}}

CSS款式：

.cube{width:100%;height:100%;}@font-fac{font-family:"RubikExtended";src:url"../media/RubikExtended.ttf"format"truetype",url"../media/RubikExtended.otf"format"otf";font-weight:normal;font-style:normal;}/*ThinextbitisjustforlabelaCube\'face.*/.faceLabel{display:none;position:absolute;font-size:60px;text-align:center;font-family:"RubikExtended";text-shadow:0024pxrgba0,0,0,0.3;color:#FFF;}.cube.cubelet{width:1em;height:1em;position:absolute;box-sizing:border-box;}Direction-facplaneoflimitsizethatactascontainforcontent.*/.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;}/*Extrovertfacehavecontentsuchasacolorsticker,text,etc.Theiarconstantlivisible.Meanwhilintrovertfacearnotvisiblwhenthecubeisanuntwiststate.Someintrovertwallarmomentarilivisiblasthecubetwists.*/.cube/*.cubelet>*/.face.faceIntrovert{background-color:#000;}

下面的index.html需求引入出去就也可以完好运转了

原文链接：https://blog.csdn.net/chengyang_java/article/details/122078124?ops_request_misc=%257B%2522request%学生题材255Fid%2522%253A %2522166856496116782391886211%2522%252C%2522scm%2522%253A %252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166856496116782391886211&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-15-122078124-null-null.nonecase&utm_term=%E9%A 2%98%E6%9D%90

未经允许不得转载：题材网 » Web前端–HTML+CSS+JS完成圣诞抓小礼物小游戏