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

Posted HAZELNUT MUSEUM

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[存档] 大作业进度1 ／ 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‘),
    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);
    }
}

 

以上是关于[存档] 大作业进度1 ／ 5的主要内容，如果未能解决你的问题，请参考以下文章

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

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

生存 1.0.0 开发团队：zxzd工作室 特点：进度存储

第十一周学习进度（补）

动态SQL基础概念复习（Javaweb作业5）

HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段