<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_scale -= cutStep;
ab_alpha += cutStep;
drawAbBack();
}
function animateAbSakura() {
if(ab_backAppear < SakuraMax) {
drawAbSakura();
timer = requestAnimationFrame(animateAbSakura);
}else {
cancelAnimationFrame(timer);
}
}
function drawAbSakura() {
ab_backAppear += SakuraStep;
context.globalAlpha = 0.6;
drawAbBack();
outputAbout();
context.drawImage(eleSakura, ab_backAppear, op_coordi[23] - 30, 30, 30);
context.globalAlpha = 1.0;
}
function outputAbout() {
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("About the Game", 310, 80);
/* Text */
context.font = 20 + 'px Papyrus';
context.fillText("The Touhou Project is a series of Japanese bullet hell shooter video games developed by the", 100, 150);
context.fillText("single-person Team Shanghai Alice.", 60, 180);
context.fillStyle = 'rgb(10, 100, 95)';
context.fillText("[Professional interpretation]", 380, 180);
context.fillStyle = 'rgb(5, 20, 27)';
context.fillText("I used the background of this game and combined it with a new chess rule to create my own", 100, 220);
context.fillText("game. It's an indie game made by me alone, as its structure and materials are all conceived and made", 60, 250);
context.fillText("by myself. I hope that you will enjoy it.", 60, 280);
context.fillText("If you want to get more Information about Touhou:", 60, 320);
context.fillStyle = 'rgb(10, 100, 95)';
context.fillText("http://thwiki.cc", 100, 350);
context.fillStyle = 'rgb(5, 20, 27)';
context.fillText("Progress of coding has been posted on my own blog:", 60, 380);
context.fillStyle = 'rgb(10, 100, 95)';
context.fillText("http://www.cnblogs.com/HazelNut/", 100, 410);
context.fillStyle = 'rgb(5, 20, 27)';
context.fillText("If you want to send me an Email: shiraihazel@163.com", 60, 440);
}
function drawAbPage() {
cancelAnimationFrame(timer);
timer = requestAnimationFrame(animateAbScale);
}
浙公网安备 33010602011771号