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

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

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

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

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

再次附上我的HTML代码
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <style type="text/css">
         body{
            margin: 0px;
         }
   </style>
</head>
<body>

</body>
</html>
JS代码
<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>

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

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

学习学习~~~~~

页: [1]

吾爱破解 - 52pojie.cn's Archiver

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