小球碰撞

效果截图



demo.html

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>canvas</title>  
  6. <script>  
  7.   // 结合setInterval制作动画  
  8.   
  9.   // 基本原理就是定时清除整个canvas重新绘制  
  10.   
  11.   // 小球在矩形区域移动,碰到矩形区域的边缘反弹  
  12.   
  13.     function draw() {  
  14.     var canvas = document.getElementById("mycanvas");  
  15.     if (canvas == null)  
  16.      return false;  
  17.   
  18.     var context = canvas.getContext("2d");  
  19.   
  20.     var interal = setInterval(function () {  
  21.        move(context);  
  22.      }, 1);  
  23.     }         
  24.   
  25.   var x = 100;  //矩形开始坐标  
  26.   var y = 100;  //矩形结束坐标  
  27.   var mx = 0;   //0右1左  
  28.   var my = 0;   //0下1上  
  29.   var ml = 1;   //每次移动长度  
  30.   var r = 20;   //小球半径  
  31.   var cw = 400; //canvas宽度  
  32.   var ch = 300; //canvas高度  
  33.   
  34.   
  35.   function move(context) {  
  36.        context.clearRect(0, 0, 400, 300);  
  37.          
  38.       context.fillStyle = "#EEEEFF";  
  39.       context.fillRect(0, 0, 400, 300);  
  40.       context.fillStyle = "blue";  
  41.   
  42.       context.beginPath();  
  43.       context.arc(x,y,r, 0, Math.PI * 2,true);  
  44.       context.fillStyle = 'rgba(255,0,0,0.8)';  
  45.       context.closePath();  
  46.       context.fill();     
  47.   
  48.       if (mx == 0) {  
  49.           x = x + ml;  
  50.           if (x >= cw-r) {  
  51.               mx = 1;  
  52.           }  
  53.       }  
  54.       else {  
  55.           x = x - ml;  
  56.           if (x <= 20) {  
  57.               mx = 0;  
  58.           }  
  59.       }  
  60.       if (my == 0) {  
  61.           y = y + ml;  
  62.           if (y >= ch-r) {  
  63.               my = 1;  
  64.           }  
  65.       }  
  66.       else {  
  67.           y = y - ml;  
  68.           if (y <= 20) {  
  69.               my = 0;  
  70.           }  
  71.       }  
  72.       
  73.   }   
  74.   
  75.     window.onload=draw;  
  76. </script>  
  77. </head>  
  78. <body>  
  79.   <p id="p1"></p>  
  80.   <canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas>  
  81. </body>  
  82. </html>  
各个小球在一起碰撞实例··· // FallDlg.cpp : implementation file // #include "stdafx.h" #include "Fall.h" #include "FallDlg.h" #ifdef _DEBUG #define new DEBUG_NEW #undef THIS_FILE static char THIS_FILE[] = __FILE__; #endif ///////////////////////////////////////////////////////////////////////////// // CAboutDlg dialog used for App About class CAboutDlg : public CDialog { public: CAboutDlg(); // Dialog Data //{{AFX_DATA(CAboutDlg) enum { IDD = IDD_ABOUTBOX }; //}}AFX_DATA // ClassWizard generated virtual function overrides //{{AFX_VIRTUAL(CAboutDlg) protected: virtual void DoDataExchange(CDataExchange* pDX); // DDX/DDV support //}}AFX_VIRTUAL // Implementation protected: //{{AFX_MSG(CAboutDlg) //}}AFX_MSG DECLARE_MESSAGE_MAP() }; CAboutDlg::CAboutDlg() : CDialog(CAboutDlg::IDD) { //{{AFX_DATA_INIT(CAboutDlg) //}}AFX_DATA_INIT } void CAboutDlg::DoDataExchange(CDataExchange* pDX) { CDialog::DoDataExchange(pDX); //{{AFX_DATA_MAP(CAboutDlg) //}}AFX_DATA_MAP } BEGIN_MESSAGE_MAP(CAboutDlg, CDialog) //{{AFX_MSG_MAP(CAboutDlg) // No message handlers //}}AFX_MSG_MAP END_MESSAGE_MAP() ///////////////////////////////////////////////////////////////////////////// // CFallDlg dialog CFallDlg::CFallDlg(CWnd* pParent /*=NULL*/) : CDialog(CFallDlg::IDD, pParent) { //{{AFX_DATA_INIT(CFallDlg) // NOTE: the ClassWizard will add member initialization here //}}AFX_DATA_INIT // Note that LoadIcon does not require a subsequent DestroyIcon in Win32 m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME); } void CFallDlg::DoDataExchange(CDataExchange* pDX) { CDialog::DoDataExchange(pDX); //{{AFX_DATA_MAP(CFallDlg) // NOTE: the ClassWizard will add DDX and DDV calls here //}}AFX_DATA_MAP } BEGIN_MESSAGE_MAP(CFallDlg, CDialog) //{{AFX_MSG_MAP(CFallDlg) ON_WM_SYSCOMMAND() ON_WM_PAINT() ON_WM_QUERYDRAGICON() //}}AFX_MSG_MAP END_MESSAGE_MAP() ///////////////////////////////////////////////////////////////////////////// // CFallDlg message handlers BOOL CFallDlg::OnInitDialog() { CDialog::OnInitDialog(); // Add "About..." menu item to system menu. // IDM_ABOUTBOX must be in the system command range. ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX); ASSERT(IDM_ABOUTBOX < 0xF000); CMenu* pSysMenu = GetSystemMenu(FALSE); if (pSysMenu != NULL) { CString strAboutMenu; strAboutMenu.LoadString(IDS_ABOUTBOX); if (!strAboutMenu.IsEmpty()) { pSysMenu->AppendMenu(MF_SEPARATOR); pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu); } } // Set the icon for this dialog. The framework does this automatically // when the application's main window is not a dialog SetIcon(m_hIcon, TRUE); // Set big icon SetIcon(m_hIcon, FALSE); // Set small icon // TODO: Add extra initialization here return TRUE; // return TRUE unless you set the focus to a control } void CFallDlg::OnSysCommand(UINT nID, LPARAM lParam) { if ((nID & 0xFFF0) == IDM_ABOUTBOX) { CAboutDlg dlgAbout; dlgAbout.DoModal(); } else { CDialog::OnSysCommand(nID, lParam); } } // If you add a minimize button to your dialog, you will need the code below // to draw the icon. For MFC applications using the document/view model, // this is automatically done for you by the framework. void CFallDlg::OnPaint() { if (IsIconic()) { CPaintDC dc(this); // device context for painting SendMessage(WM_ICONERASEBKGND, (WPARAM) dc.GetSafeHdc(), 0); // Center icon in client rectangle int cxIcon = GetSystemMetrics(SM_CXICON); int cyIcon = GetSystemMetrics(SM_CYICON); CRect rect; GetClientRect(&rect); int x = (rect.Width() - cxIcon + 1) / 2; int y = (rect.Height() - cyIcon + 1) / 2; // Draw the icon dc.DrawIcon(x, y, m_hIcon); } else { CDialog::OnPaint(); } } // The system calls this to obtain the cursor to display while the user drags // the minimized window. HCURSOR CFallDlg::OnQueryDragIcon() { return (HCURSOR) m_hIcon; }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值