<html>
<head>
<title>Getting over it with HazelNut</title>
<style>
body {
background: #eeeeee;
background-image: url(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="Music.mp3" autoplay='autoplay' loop='loop'> </audio>
<canvas id='canvas' width='1000' height='600'> </canvas>
<script src='game.js'></script>
<script src='option_page.js'></script>
</body>
</html>
/* ------------------ Main Page ---------------------*/
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
main_background = new Image(),
main_title = new Image(),
INDEX = 0;
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 = ['PLAY', 'OPTIONS', '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);
}
/********************** 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 - 124) / 10;
nowPointer.limit = 124;
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 - 105) / 10;
nowPointer.limit = 105;
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);
}
}
}
};
canvas.onmousedown = 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) {
} 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) {
} else if((loc.x - 350) * (loc.x - 350) + (loc.y - 500) * (loc.y - 500) <= 50 * 50) {
}
}
};
/****************** Initialization *******************/
main_background.src = "mainBack.jpeg";
main_title.src = "mainTitle.png";
main_background.onload = function(e) {
drawMainBack();
for(var i=0; i<4; i++) {
drawMainButton(i, 0.5, 150, 355);
}
}