zoukankan      html  css  js  c++  java
  • html5弹跳球

    <html>
    <head>
    <meta charset=utf-8>
    <title>跳跳球</title>

    <script>
    //box
    var box_x=0;
    var box_y=0;
    var box_width=300;
    var box_height=300;

    //注意:定位球采用球的中心
    var ball_x=10;
    var ball_y=10;
    var ball_radius=10;
    var ball_vx=5;
    var ball_vy=3;

    var box_bound_left=box_x+ball_radius;
    var box_bound_right=box_x+box_width-ball_radius;
    var box_bound_top=box_y+ball_radius;
    var box_bound_bottom=box_y+box_height-ball_radius;
    //ball

    //context
    var ctx;

    function init()
    {
        ctx=document.getElementById(
    'canvas').getContext('2d');
        ctx.lineWidth=ball_radius;
        ctx.fillStyle=
    "rgb(200,0,50)";
        move_ball();
        setInterval(move_ball,100);
    //note
    }
    function move_ball()
    {
        ctx.clearRect(box_x,box_y,box_width,box_height);
        move_and_check();
        ctx.beginPath();
        ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);
        ctx.fill();
        ctx.strokeRect(box_x,box_y,box_width,box_height);
    }
    function move_and_check()
    {
        var cur_ball_x=ball_x+ball_vx;
        var cur_ball_y=ball_y+ball_vy;
        if(cur_ball_x
    <box_bound_left)
        {
        ball_vx=-ball_vx;
        cur_ball_x=box_bound_left;
        }
        if(cur_ball_x
    >box_bound_right)
        {
        ball_vx=-ball_vx;
        cur_ball_x=box_bound_right;
        }
        if(cur_ball_y
    <box_bound_top)
        {
        ball_vy=-ball_vy;
        cur_ball_y=box_bound_top;
        }
        if(cur_ball_y
    >box_bound_bottom)
        {
        ball_vy=-ball_vy;
        cur_ball_y=box_bound_bottom;
        }
        ball_x=cur_ball_x;
        ball_y=cur_ball_y;
    }
    </script>
    </head>

    <body onLoad="init()">
    <canvas id="canvas" width="400" height="400"/>
    </body>
    </html>
  • 相关阅读:
    积水路面Wet Road Materials 2.3
    门控时钟问题
    饮料机问题
    Codeforces Round #340 (Div. 2) E. XOR and Favorite Number (莫队)
    Educational Codeforces Round 82 (Rated for Div. 2)部分题解
    Educational Codeforces Round 86 (Rated for Div. 2)部分题解
    Grakn Forces 2020部分题解
    2020 年百度之星·程序设计大赛
    POJ Nearest Common Ancestors (RMQ+树上dfs序求LCA)
    算法竞赛进阶指南 聚会 (LCA)
  • 原文地址:https://www.cnblogs.com/java20130725/p/3215824.html
Copyright © 2011-2022 走看看