zoukankan      html  css  js  c++  java
  • [存档] 大作业进度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);
        }
    }
  • 相关阅读:
    UVa 10118 记忆化搜索 Free Candies
    CodeForces 568B DP Symmetric and Transitive
    UVa 11695 树的直径 Flight Planning
    UVa 10934 DP Dropping water balloons
    CodeForces 543D 树形DP Road Improvement
    CodeForces 570E DP Pig and Palindromes
    HDU 5396 区间DP 数学 Expression
    HDU 5402 模拟 构造 Travelling Salesman Problem
    HDU 5399 数学 Too Simple
    CodeForces 567F DP Mausoleum
  • 原文地址:https://www.cnblogs.com/HazelNut/p/8085716.html
Copyright © 2011-2022 走看看