【更新】H5 Canvas 碰撞小球 v1.0

弱弱的小粥粥 · 发表于 2016-10-17 11:53

本帖最后由弱弱的小粥粥于 2016-10-18 20:35 编辑

14号写了个碰撞小球，今天翻出代码一看，发觉自己个走进了一个死胡同！多走了很多弯路！
果然还是对机理分析得过头了！
今天推出v1.0正式版！就几行代码解决！

楼主写出的均是根据所学的知识写的原生态的js代码！
为了锻炼自己的码代码能力！页面均由JS动态生成！
ps：有同学可能要套用我的画布坐标，请注意要清除body样式；
碰撞小球1.0.gif

再次附上我的HTML代码

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                margin: 0px;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>

JS代码

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript" language="javascript">
window.onload=function () {
    // 创建画布
    var canvas=document.createElement('canvas');
    var brush=canvas.getContext("2d");
        canvas.style.border="2px solid #aaaaaa";
        canvas.width=700;
        canvas.height=700;

    // 包裹画布居中
    var box=document.createElement('div');
        // box样式
        box.style.width=canvas.width+"px";
        box.style.height=canvas.height+"px";
        box.style.margin="100px auto";

    // 移动块
    var move=document.createElement('span');
        // move样式
        move.style.color="#ff0000";
        move.style.position="absolute";
        move.style.display="none";
        move.style.boxShadow="1px 1px 8px red";

    // 添加对象
    document.body.appendChild(box);
    document.body.appendChild(move);
    box.appendChild(canvas);

        // 避免重复获取画布大小
        var Ox=canvas.offsetLeft;
        var Oy=canvas.offsetTop;
        move.style.display="none";

    function mymove (event) {
        move.style.display="block";
        move.style.left=event.pageX-50+"px";
        move.style.top=event.pageY-50+"px";
        move.innerHTML="当前画布坐标："+(event.clientX-Ox-2)+","+(event.clientY-Oy-2);
    }

    function myout () {
        move.style.display="none";
    }

    canvas.onmousemove=mymove;
    canvas.onmouseout=myout;
    brush.translate(350,350);

    var x=parseInt(Math.random()*330);//初始坐标
    var y=parseInt(Math.random()*330);//初始坐标
    var target_x=parseInt(Math.random()*40-20);//x坐标改变值
    var target_y=parseInt(Math.random()*40-20);//y坐标改变值
    function action() {
        brush.clearRect(-350,-350,700,700);
        brush.beginPath();
        brush.fillStyle="red";
        brush.arc(x,y,20,0,Math.PI*2);
        brush.fill();
        if (x>=330 || x<=-330) {
            target_x=-target_x;
        }
        if (y>=330 || y<=-330) {
            target_y=-target_y;
        }
        x+=target_x;
        y+=target_y;
    }
    setInterval(action,100);
}
</script>

无论老鸟，还是菜鸟，都希望大家提出建议！毕竟学无止境！
互相学习哟！

emptyw · 发表于 2016-10-17 12:43

学习的精神难得

QNLY · 发表于 2016-10-17 14:15

感谢分享，辛苦了

偷喝奶的浣熊 · 发表于 2016-10-17 14:29

感谢分享学习！

psx1lin · 发表于 2016-10-23 12:51

学习的精神难得
跟隨了

yunruifuzhu · 发表于 2016-10-23 13:40

可以！！！！！

yuechenxing · 发表于 2016-10-25 00:40

看到这个感觉像当年学C时写的helloworld

微风囬忆 · 发表于 2017-1-20 16:13

学习学习~~~~~

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 【更新】H5 Canvas 碰撞小球 v1.0

免费评分