zoukankan      html  css  js  c++  java
  • html5模拟平抛运动

    <html>
    <head>
    <meta charset=utf-8>
    <title>html5炮弹</title>
    <script>
    //box
    var box_x=0;
    var box_y=0;
    var box_width=300;
    var box_height=300;
    //ball
    
    var ball_x=10;
    var ball_y=10;
    var ball_radius=10;
    var ball_vx=10;
    var ball_vy=0;
    //constant
    var g=10;//note
    var rate=0.9;
    //bound
    var bound_left=box_x+ball_radius;
    var bound_right=box_x+box_width-ball_radius;
    var bound_top=box_y+ball_radius;
    var bound_bottom=box_y+box_height-ball_radius;
    
    //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);
    }
    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 temp=ball_vy;
    	ball_vy=ball_vy+g;
    	var cur_ball_y=ball_y+ball_vy+g/2;
    	if(cur_ball_x<bound_left)
    	{
    		cur_ball_x=bound_left;
    		ball_vx=-ball_vx*0.9;
                                         ball_vy=ball_vy*0.9;                 
    	}
    	if(cur_ball_x>bound_right)
    	{
    		cur_ball_x=bound_right;
    		ball_vx=-ball_vx*0.9;
                                       ball_vy=ball_vy*0.9;                 
                                                    
    	}
    	if(cur_ball_y<bound_top)
    	{
    		cur_ball_y=bound_top;
    		ball_vy=-ball_vy*0.9;
                                        ball_vx=ball_vx*0.9;
    	}
    	if(cur_ball_y>bound_bottom)
    	{
    		cur_ball_y=bound_bottom;
    		ball_vy=-ball_vy*0.9;
                                        ball_vx=ball_vx*0.9;
    	}
    	ball_x=cur_ball_x;
    	ball_y=cur_ball_y;
    }
    </script>
    </head>
    <body onLoad="init()">
    <canvas id="canvas" width="400" height="400"/>
    </body>
    </html>
    
    html5模拟小球平抛运动过程。
  • 相关阅读:
    Shell编程学习1-变量的高级用法
    Ubuntu新机配置深度学习环境遇到的问题
    Python细致技巧总结(不断更新)
    图片着色后存储为“JPEG”格式存在明显色差问题解决
    python图片合成视频
    caffe-ssd安装问题解决
    python画图
    python split(),os.path.split()和os.path.splitext()函数用法
    转载:mysql 存储过程
    css实现div框阴影
  • 原文地址:https://www.cnblogs.com/java20130725/p/3215822.html
Copyright © 2011-2022 走看看