zoukankan html css js c++ java

[存档] 大作业进度2 ／ 5

<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'),
    backMusic = document.getElementById('music'),
    main_background = new Image(),
    main_title = new Image(),
    INDEX = 0, boardSize = 10, errorRate = 0.5;

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);
            }
        }
    } else if(INDEX === 1) {

    } else if(INDEX === 2) {
        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 * 15 && loc.y <= op_coordi[23] && loc.y >= op_coordi[23] - 30) {
            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);
        }
    }
};

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) {
            op_selectMark.src = "sakura.png";
            op_selectMark.onload = function() {
                INDEX = 2;
                drawOpPage();
            }
        } 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) {
        }
    } else if(INDEX === 1) {

    } else if(INDEX === 2) {
        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 = "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;
            context.clearRect(0, 0, canvas.width, canvas.height);console.log("???");
            drawMainBack();
            for(var i=0; i<4; i++) {
                drawMainButton(i, 0.5, 150, 355);
            }
        }
    }
};
/****************** 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);
    }
}

/* option : music on/off
scale 10 * 10 / 20 * 20 / 40 * 40 /
difficulty easy medium hard
*/

var op_scale = 1.0, MAX_SIZE = 1.35, op_step = 0.03, 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_selectMark = new Image();
var op_backMax = 950, op_backAppear = op_coordi[22] - 50, op_backStep = 13, 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;
}

function animateOpScale() {
    if(op_scale < MAX_SIZE) {
        drawOpFrame();
        timer = requestAnimationFrame(animateOpScale);
    }else {
        drawOpBack();
        updateOpPage(-1);
        cancelAnimationFrame(timer); 
    }
}

function drawOpFrame() {
    op_scale += op_step;
    op_alpha -= op_step;
    drawOpBack();
}

function animateOpSakura() {
    if(op_backAppear < op_backMax) {
        drawOpSakura();
        timer = requestAnimationFrame(animateOpSakura);
    }else {
        cancelAnimationFrame(timer);
    }
}

function drawOpSakura() {
    op_backAppear += op_backStep;
    updateOpPage(-1);
    context.globalAlpha = 0.6;
    context.drawImage(op_selectMark, 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(op_selectMark, 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);
}

查看全文

相关阅读:
练习！！标准体重
 C# 阶乘累加
 C# 阶乘
 C# 累加求和
 C# 100块钱，买2元一只的圆珠笔3块钱一个的尺子5元一个的铅笔盒每样至少一个，正好花光，有多少种花法。
C# 一张纸0.00007m，折多少次和珠峰一样高
 C# 100以内质数
 C# 100以内质数和
 网站的基本布局
 C#递归

原文地址：https://www.cnblogs.com/HazelNut/p/8084952.html