[存档] 大作业进度 3.5 ／ 5
Posted HAZELNUT MUSEUM
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[存档] 大作业进度 3.5 ／ 5相关的知识，希望对你有一定的参考价值。
<html> <head> <title>Getting over it with HazelNut</title> <style> body { background: #eeeeee; background-image: url(Image/css_background.jpeg); background-repeat: repeat; background-attachment: fixed; } #canvas { background: #ffffff; cursor: default; display:block; margin:0 auto; -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); } </style> </head> <body> <!-- <div id="game-area" style="position: relative; height: 530px;"></div> --> <!-- <audio id=\'music\' src="Sound/Music.mp3" autoplay=\'autoplay\' loop=\'loop\'> </audio> --> <audio id=\'music\' src="Sound/Music.mp3" loop=\'loop\'> </audio> <canvas id=\'canvas\' width=\'1000\' height=\'600\'> </canvas> <script src=\'game.js\'></script> <script src=\'option_page.js\'></script> <script src=\'help_page.js\'></script> <script src=\'about_page.js\'></script> </body> </html>
/* ------------------ Main Page ---------------------*/ var canvas = document.getElementById(\'canvas\'), context = canvas.getContext(\'2d\'), backMusic = document.getElementById(\'music\'), main_background = new Image(), main_title = new Image(), eleSakura = new Image(), backPattern = new Image(), INDEX = 0, boardSize = 10, errorRate = 0.5, cutStep = 0.03, MAX_SIZE = 1.35, SakuraMax = 950, SakuraStep = 13; eleSakura.src = "Image/sakura.png"; backPattern.src = "Image/002.jpg"; function windowToCanvas(x, y) { var bbox = canvas.getBoundingClientRect(); return { x: x - bbox.left * (canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } var COLOR = [\'LightSlateGray\', \'lightblue\', \'LightCyan\', \'LightSteelBlue\'], TEXT = [\'OPTIONS\', \'PLAY\', \'HELP\', \'ABOUT\'], timer, nowPointer = {}, updating = true; /********************* Function **********************/ function animateRedraw() { if(nowPointer.x > nowPointer.limit) { drawFrame(); timer = requestAnimationFrame(animateRedraw); }else cancelAnimationFrame(timer); } function drawFrame() { nowPointer.x -= nowPointer.step; nowPointer.alpha += 0.02; context.clearRect(0, 0, canvas.width, canvas.height); drawMainBack(); for(var i=0; i<4; i++) { if(i != nowPointer.index) { drawMainButton(i, 0.5, 150, 355); } } drawMainButton(nowPointer.index, nowPointer.alpha, nowPointer.x, nowPointer.y); } function drawMainButton(Index, Alpha, x, y) { context.beginPath(); context.globalAlpha = Alpha; context.arc((Index & 1) * 200 + 150, Math.floor(Index / 2) * 150 + 350, 50, 0, 2 * Math.PI); context.fillStyle = COLOR[Index]; context.fill(); context.globalAlpha = 1.0; context.closePath(); context.font = 20 + \'px Chalkduster\'; context.fillStyle = \'white\'; context.fillText(TEXT[Index], (Index & 1) * 200 + x, Math.floor(Index / 2) * 150 + y); } function drawMainBack() { context.drawImage(main_background, 0, 0, canvas.width, canvas.height); context.drawImage(main_title, 600, 50, main_title.width, main_title.height); context.font = 10 + \'px Arial\'; context.fillStyle = \'grey\'; context.fillText("All Copyright Reserved @2017 HazelNut", 400, 590); } /********************** Events ***********************/ canvas.onmousemove = function (e) { var loc = windowToCanvas(e.clientX, e.clientY); if(INDEX === 0) { if((loc.x - 150) * (loc.x - 150) + (loc.y - 350) * (loc.y - 350) <= 50 * 50) { canvas.style.cursor = \'pointer\'; if(updating) { nowPointer.index = 0; nowPointer.x = 150; nowPointer.y = 355; nowPointer.alpha = 0.5; nowPointer.step = (150 - 105) / 10; nowPointer.limit = 105; cancelAnimationFrame(timer); timer = requestAnimationFrame(animateRedraw); } updating = false; } else if((loc.x - 350) * (loc.x - 350) + (loc.y - 350) * (loc.y - 350) <= 50 * 50) { canvas.style.cursor = \'pointer\'; if(updating) { nowPointer.index = 1; nowPointer.x = 150; nowPointer.y = 355; nowPointer.alpha = 0.5; nowPointer.step = (150 - 124) / 10; nowPointer.limit = 124; cancelAnimationFrame(timer); timer = requestAnimationFrame(animateRedraw); } updating = false; } else if((loc.x - 150) * (loc.x - 150) + (loc.y - 500) * (loc.y - 500) <= 50 * 50) { canvas.style.cursor = \'pointer\'; if(updating) { nowPointer.index = 2; nowPointer.x = 150; nowPointer.y = 355; nowPointer.alpha = 0.5; nowPointer.step = (150 - 124) / 10; nowPointer.limit = 124; cancelAnimationFrame(timer); timer = requestAnimationFrame(animateRedraw); } updating = false; } else if((loc.x - 350) * (loc.x - 350) + (loc.y - 500) * (loc.y - 500) <= 50 * 50) { canvas.style.cursor = \'pointer\'; if(updating) { nowPointer.index = 3; nowPointer.x = 150; nowPointer.y = 355; nowPointer.alpha = 0.5; nowPointer.step = (150 - 115) / 10; nowPointer.limit = 115; cancelAnimationFrame(timer); timer = requestAnimationFrame(animateRedraw); } updating = false; } else { updating = true; canvas.style.cursor = \'default\'; drawMainBack(); for(var i=0; i<4; i++) { drawMainButton(i, 0.5, 150, 355); } } } else if(INDEX === 1) { if(loc.x >= op_coordi[2] && loc.x <= op_coordi[2] + op_selectTXT[1].length * 25 && loc.y <= op_coordi[3] && loc.y >= op_coordi[3] - 50) { if(op_seleMusic != 1) { canvas.style.cursor = \'pointer\'; updateOpPage(1); } } else if(loc.x >= op_coordi[4] && loc.x <= op_coordi[4] + op_selectTXT[2].length * 25 && loc.y <= op_coordi[5] && loc.y >= op_coordi[5] - 50) { if(op_seleMusic != 2) { canvas.style.cursor = \'pointer\'; updateOpPage(2); } } else if(loc.x >= op_coordi[8] && loc.x <= op_coordi[8] + op_selectTXT[4].length * 25 && loc.y <= op_coordi[9] && loc.y >= op_coordi[9] - 50) { if(op_seleScale != 4) { canvas.style.cursor = \'pointer\'; updateOpPage(4); } } else if(loc.x >= op_coordi[10] && loc.x <= op_coordi[10] + op_selectTXT[5].length * 25 && loc.y <= op_coordi[11] && loc.y >= op_coordi[11] - 50) { if(op_seleScale != 5) { canvas.style.cursor = \'pointer\'; updateOpPage(5); } } else if(loc.x >= op_coordi[12] && loc.x <= op_coordi[12] + op_selectTXT[6].length * 25 && loc.y <= op_coordi[13] && loc.y >= op_coordi[13] - 50) { if(op_seleScale != 6) { canvas.style.cursor = \'pointer\'; updateOpPage(6); } } else if(loc.x >= op_coordi[16] && loc.x <= op_coordi[16] + op_selectTXT[8].length * 25 && loc.y <= op_coordi[17] && loc.y >= op_coordi[17] - 50) { if(op_seleScale != 8) { canvas.style.cursor = \'pointer\'; updateOpPage(8); } } else if(loc.x >= op_coordi[18] && loc.x <= op_coordi[18] + op_selectTXT[9].length * 25 && loc.y <= op_coordi[19] && loc.y >= op_coordi[19] - 50) { if(op_seleScale != 9) { canvas.style.cursor = \'pointer\'; updateOpPage(9); } } else if(loc.x >= op_coordi[20] && loc.x <= op_coordi[20] + op_selectTXT[10].length * 25 && loc.y <= op_coordi[21] && loc.y >= op_coordi[21] - 50) { if(op_seleScale != 10) { canvas.style.cursor = \'pointer\'; updateOpPage(10); } } else if(loc.x >= op_coordi[22] && loc.x <= op_coordi[22] + op_selectTXT[11].length * 12 && loc.y <= op_coordi[23] && loc.y >= op_coordi[23] - 30) { canvas.style.cursor = \'pointer\'; if(op_back) { cancelAnimationFrame(timer); timer = requestAnimationFrame(animateOpSakura); } op_back = false; } else { op_back = true; op_backAppear = op_coordi[22] - 50; canvas.style.cursor = \'default\'; updateOpPage(-1); } } else if(INDEX === 2) { } else if(INDEX === 3) { /* Help */ if(loc.x >= op_coordi[22] && loc.x <= op_coordi[22] + op_selectTXT[11].length * 12 && loc.y <= op_coordi[23] && loc.y >= op_coordi[23] - 30) { canvas.style.cursor = \'pointer\'; if(hp_back) { cancelAnimationFrame(timer); timer = requestAnimationFrame(animateHpSakura); } hp_back = false; } else { hp_back = true; hp_backAppear = op_coordi[22] - 50; canvas.style.cursor = \'default\'; drawHpBack(); outputHelp(); } } else if(INDEX === 4) { /* About */ if(loc.x >= op_coordi[22] && loc.x <= op_coordi[22] + op_selectTXT[11].length * 12 && loc.y <= op_coordi[23] && loc.y >= op_coordi[23] - 30) { canvas.style.cursor = \'pointer\'; if(ab_back) { cancelAnimationFrame(timer); timer = requestAnimationFrame(animateAbSakura); } ab_back = false; } else { ab_back = true; ab_backAppear = op_coordi[22] - 50; canvas.style.cursor = \'default\'; drawAbBack(); outputAbout(); } } }; canvas.onmousedown = function (e) { var loc = windowToCanvas(e.clientX, e.clientY); if(INDEX === 0) { /* ----> Main <----- */ updating = true; if((loc.x - 150) * (loc.x - 150) + (loc.y - 350) * (loc.y - 350) <= 50 * 50) { /* Option */ INDEX = 1; canvas.style.cursor = \'default\'; drawOpPage(); } else if((loc.x - 350) * (loc.x - 350) + (loc.y - 350) * (loc.y - 350) <= 50 * 50) { } else if((loc.x - 150) * (loc.x - 150) + (loc.y - 500) * (loc.y - 500) <= 50 * 50) { /* Help */ INDEX = 3; canvas.style.cursor = \'default\'; drawHpPage(); } else if((loc.x - 350) * (loc.x - 350) + (loc.y - 500) * (loc.y - 500) <= 50 * 50) { /* About */ INDEX = 4; canvas.style.cursor = \'default\'; drawAbPage(); } } else if(INDEX === 1) { /* ----> Option <---- */ if(loc.x >= op_coordi[2] && loc.x <= op_coordi[2] + op_selectTXT[1].length * 25 && loc.y <= op_coordi[3] && loc.y >= op_coordi[3] - 50) { if(op_seleMusic != 1) { op_seleMusic = 1; backMusic.src = "Sound/Music.mp3"; updateOpPage(1); } } else if(loc.x >= op_coordi[4] && loc.x <= op_coordi[4] + op_selectTXT[2].length * 25 && loc.y <= op_coordi[5] && loc.y >= op_coordi[5] - 50) { if(op_seleMusic != 2) { op_seleMusic = 2; backMusic.src = ""; updateOpPage(2); } } else if(loc.x >= op_coordi[8] && loc.x <= op_coordi[8] + op_selectTXT[4].length * 25 && loc.y <= op_coordi[9] && loc.y >= op_coordi[9] - 50) { if(op_seleScale != 4) { op_seleScale = 4; boardSize = 5; updateOpPage(4); } } else if(loc.x >= op_coordi[10] && loc.x <= op_coordi[10] + op_selectTXT[5].length * 25 && loc.y <= op_coordi[11] && loc.y >= op_coordi[11] - 50) { if(op_seleScale != 5) { op_seleScale = 5; boardSize = 10; updateOpPage(5); } } else if(loc.x >= op_coordi[12] && loc.x <= op_coordi[12] + op_selectTXT[6].length * 25 && loc.y <= op_coordi[13] && loc.y >= op_coordi[13] - 50) { if(op_seleScale != 6) { op_seleScale = 6; boardSize = 20; updateOpPage(6); } } else if(loc.x >= op_coordi[16] && loc.x <= op_coordi[16] + op_selectTXT[8].length * 25 && loc.y <= op_coordi[17] && loc.y >= op_coordi[17] - 50) { if(op_seleScale != 8) { op_seleDiff = 8; errorRate = 0.8; updateOpPage(8); } } else if(loc.x >= op_coordi[18] && loc.x <= op_coordi[18] + op_selectTXT[9].length * 25 && loc.y <= op_coordi[19] && loc.y >= op_coordi[19] - 50) { if(op_seleScale != 9) { op_seleDiff = 9; errorRate = 0.5; updateOpPage(9); } } else if(loc.x >= op_coordi[20] && loc.x <= op_coordi[20] + op_selectTXT[10].length * 25 && loc.y <= op_coordi[21] && loc.y >= op_coordi[21] - 50) { if(op_seleScale != 10) { op_seleDiff = 10; errorRate = 0.2; updateOpPage(10); } } else if(loc.x >= op_coordi[22] && loc.x <= op_coordi[22] + op_selectTXT[11].length * 15 && loc.y <= op_coordi[23] && loc.y >= op_coordi[23] - 30) { INDEX = 0; cancelAnimationFrame(timer); timer = requestAnimationFrame(animateOpReturn); } } else if(INDEX === 2) { /* ----> Play <---- */ } else if(INDEX === 3) { /* ----> Help <---- */ if(loc.x >= op_coordi[22] && loc.x <= op_coordi[22] + op_selectTXT[11].length * 15 && loc.y <= op_coordi[23] && loc.y >= op_coordi[23] - 30) { INDEX = 0; cancelAnimationFrame(timer); timer = requestAnimationFrame(animateHpReturn); } } else if(INDEX === 4) { /* ----> ABOUT <---- */ if(loc.x >= op_coordi[22] && loc.x <= op_coordi[22] + op_selectTXT[11].length * 15 && loc.y <= op_coordi[23] && loc.y >= op_coordi[23] - 30) { INDEX = 0; cancelAnimationFrame(timer); timer = requestAnimationFrame(animateAbReturn); } } }; /****************** Initialization *******************/ main_background.src = "Image/mainBack.jpeg"; main_title.src = "Image/mainTitle2.png"; main_background.onload = function(e) { drawMainBack(); for(var i=0; i<4; i++) { drawMainButton(i, 0.5, 150, 355); } }
/* ------------------ Options Page ---------------------*/ var op_scale = 1.0, op_alpha = 1.0; var op_selectTXT = ["MUSIC:", "ON", "OFF", "SCALE:", "5 * 5", "10 * 10", "20 * 20", "DIFFICULTY:", "EASY", "MID", "HARD", "Back To Main Menu"]; var op_coordi = [140, 200, 390, 200, 520, 200, 140, 300, 370, 300, 530, 300, 740, 300, 140, 400, 485, 400, 640, 400, 780, 400, 750, 580]; var op_seleMusic = 1, op_seleScale = 5, op_seleDiff = 8; var op_backAppear = op_coordi[22] - 50, op_back = true; /********************* Function **********************/ function drawOpBack() { context.clearRect(0, 0, canvas.width, canvas.height); context.globalAlpha = op_alpha; context.drawImage(main_background, 0, 0, canvas.width * op_scale, canvas.height * op_scale); context.globalAlpha = 1.0; context.font = 10 + \'px Arial\'; context.fillStyle = \'grey\'; context.fillText("All Copyright Reserved @2017 HazelNut", 400, 590); } function animateOpScale() { if(op_scale < MAX_SIZE) { drawOpFrame(); timer = requestAnimationFrame(animateOpScale); }else { drawOpBack(); updateOpPage(-1); cancelAnimationFrame(timer); } } function drawOpFrame() { op_scale += cutStep; op_alpha -= cutStep; drawOpBack(); } function animateOpReturn() { if(op_scale > 1.0) { opReturnMain(); timer = requestAnimationFrame(animateOpReturn); }else { updating = true; drawMainBack(); for(var i=0; i<4; i++) { drawMainButton(i, 0.5, 150, 355); } cancelAnimationFrame(timer); } } function opReturnMain() { op_scale -= cutStep; op_alpha += cutStep; drawOpBack(); } function animateOpSakura() { if(op_backAppear < SakuraMax) { drawOpSakura(); timer = requestAnimationFrame(animateOpSakura); }else { cancelAnimationFrame(timer); } } function drawOpSakura() { op_backAppear += SakuraStep; updateOpPage(-1); context.globalAlpha = 0.6; context.drawImage(eleSakura, op_backAppear, op_coordi[23] - 30, 30, 30); context.globalAlpha = 1.0; } function outputOptions(Index, ques, moveon, selected, back) { var empha = false; if(moveon) empha = true; if(selected) { empha = true; context.drawImage(eleSakura, op_coordi[Index * 2] - 20, op_coordi[Index * 2 + 1] - 30, 50, 50); } if(ques) empha = true; if(empha) context.font = 53 + \'px Letter Gothic Std bord\'; else context.font = 47 + \'px Letter Gothic Std bord\'; if(back) { context.font = 30 + \'px Giddyup Std\'; } context.beginPath(); context.fillStyle = \'rgb(5, 20, 27)\'; if(empha) context.fillText(op_selectTXT[Index], op_coordi[Index * 2] - op_selectTXT[Index].length * 3 / 2, op_coordi[Index * 2 + 1]); else context.fillText(op_selectTXT[Index], op_coordi[Index * 2], op_coordi[Index * 2 + 1] - 3); context.closePath(); } function updateOpPage(Index) { context.clearRect(0, 0, canvas.width, canvas.height); drawOpBack(); for(var i=0; i<12; i++) { if(i === 0 || i === 3 || i === 7) { outputOptions(i, 1, 0, 0, 0); } else if(i === op_seleMusic || i === op_seleScale || i === op_seleDiff) { outputOptions(i, 0, 0, 1, 0); } else if(i === Index) { outputOptions(i, 0, 1, 0, 0); } else if(i === 11) { outputOptions(i, 0, 0, 0, 1); } else { outputOptions(i, 0, 0, 0, 0); } } } function drawOpPage() { /* draw Option background */ context.clearRect(0, 0, canvas.width, canvas.height); drawOpBack(); cancelAnimationFrame(timer); timer = requestAnimationFrame(animateOpScale); }
/* ------------------ Help Page ---------------------*/ var hp_scale = 1.0, hp_alpha = 1.0; var hp_backAppear = op_coordi[22] - 50, hp_back = true; function drawHpBack() { context.clearRect(0, 0, canvas.width, canvas.height); context.globalAlpha = hp_alpha; context.drawImage(main_background, 0, 0, main_background.width, main_background.height, 0, canvas.height * (1.0 - hp_scale), canvas.width * hp_scale, canvas.height * hp_scale); context.globalAlpha = 1.0; context.font = 10 + \'px Arial\'; context.fillStyle = \'grey\'; context.fillText("All Copyright Reserved @2017 HazelNut", 400, 590); } function animateHpScale() { if(hp_scale < MAX_SIZE) { drawHpFrame(); timer = requestAnimationFrame(animateHpScale); }else { drawHpBack(); outputHelp(); cancelAnimationFrame(timer); } } function drawHpFrame() { hp_scale += cutStep; hp_alpha -= cutStep; drawHpBack(); } function animateHpReturn() { if(hp_scale > 1.0) { hpReturnMain(); timer = requestAnimationFrame(animateHpReturn); }else { updating = true; drawMainBack(); for(var i=0; i<4; i++) { drawMainButton(i, 0.5, 150, 355); } cancelAnimationFrame(timer); } } function hpReturnMain() { hp_scale -= cutStep; hp_alpha += cutStep; drawHpBack(); } function animateHpSakura() { if(hp_backAppear < SakuraMax) { drawHpSakura(); timer = requestAnimationFrame(animateHpSakura); }else { cancelAnimationFrame(timer); } } function drawHpSakura() { hp_backAppear += SakuraStep; context.globalAlpha = 0.6; drawHpBack(); outputHelp(); context.drawImage(eleSakura, hp_backAppear, op_coordi[23] - 30, 30, 30); context.globalAlpha = 1.0; } function outputHelp() { outputOptions(11, 0, 0, 0, 1); /* BackRect */ context.fillStyle = \'white\'; context.globalAlpha = 0.3; context.moveTo(70, 110); context.arcTo(960, 110, 960, 530, 30); context.arcTo(960, 530, 40, 530, 30); context.arcTo(40, 530, 40, 110, 30); context.arcTo(40, 110, 960, 110, 30); context.fill(); context.globalAlpha = 1.0; /* Title */ context.font = 40 + \'px Zapfino\'; context.fillStyle = \'rgb(5, 20, 27)\'; context.fillText("Rules and Tips", 310, 80); /* Text */ context.font = 20 + \'px Papyrus\'; context.fillText("Player and computer take turns to play the game, and you will always make the first move.", 130, 150); context.fillText("During a move a player selects one of the active grids. Then depending on the type of chesspiece in", 60, 180); context.fillText("that grid, one of the following actions take place:", 60, 210); context.fillText("\\"-\\": Magical waves radiate from the grid to the left and to the right along horizontal paths. All", 110, 250); context.fillText("grids on the path of the waves (including the selected grid too) become inactive. The waves", 110, 280); context.fillText("continue until the next inactive grid or to the edge of the chessboard if there are no inactive", 110, 310); context.fillText("grids on the way.", 110, 340); context.fillText("\\"|\\": Magical waves radiate upwards and downwards.", 110, 380); context.fillText("\\"+\\": Magical waves radiate in all four directions.", 110, 420); context.fillText("The player who cannot make a move (that is to say, all the grids on the chessboard are ", 130, 460); context.fillText("inactive) will be the loser of this game.", 60, 490); } function drawHpPage() { cancelAnimationFrame(timer); timer = timer = requestAnimationFrame(animateHpScale); }
/* ------------------ About Page ---------------------*/ var ab_scale = 1.0, ab_alpha = 1.0; var ab_backAppear = op_coordi[22] - 50, ab_back = true; function drawAbBack() { context.clearRect(0, 0, canvas.width, canvas.height); context.globalAlpha = ab_alpha; context.drawImage(main_background, 0, 0, main_background.width, main_background.height, canvas.width * (1.0 - ab_scale), canvas.height * (1.0 - ab_scale), canvas.width * ab_scale, canvas.height * ab_scale); context.globalAlpha = 1.0; context.font = 10 + \'px Arial\'; context.fillStyle = \'grey\'; context.fillText("All Copyright Reserved @2017 HazelNut", 400, 590); } function animateAbScale() { if(ab_scale < MAX_SIZE) { drawAbFrame(); timer = requestAnimationFrame(animateAbScale); }else { drawAbBack(); outputAbout(); cancelAnimationFrame(timer); } } function drawAbFrame() { ab_scale += cutStep; ab_alpha -= cutStep; drawAbBack(); } function animateAbReturn() { if(ab_scale > 1.0) { abReturnMain(); timer = requestAnimationFrame(animateAbReturn); }else { updating = true; drawMainBack(); for(var i=0; i<4; i++) { drawMainButton(i, 0.5, 150, 355); } cancelAnimationFrame(timer); } } function abReturnMain() { ab_以上是关于[存档] 大作业进度 3.5 ／ 5的主要内容，如果未能解决你的问题，请参考以下文章
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段