【分享】H5 Canvas 碰撞小球 v0.5
本帖最后由 弱弱的小粥粥 于 2016-10-18 20:34 编辑花了一点小时间用刚学的H5Canvas写了个碰撞小球
下面是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 startX=parseInt(Math.random()*660)+20;
// var startY=parseInt(Math.random()*660)+20;
var x=0;//初始坐标
var y=0;//初始坐标
var high=15;//x坐标改变值不能为负值
var low=10;//y坐标改变值 不能为负值
var state;//执行状态有四个
var target_x;
var target_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();
triangle_x=x-target_x;//偏移量x
triangle_y=y-target_y;//偏移量y
if (x>=330 || state==null) {
if (triangle_x>0 && triangle_y>0) {
state="left_button";
}else if (triangle_x>0 && triangle_y<0){
state="left_top";
}else{
state="right_button";
}
}else if (y>=330) {
if (triangle_x<0 && triangle_y>0) {
state="left_top";
}else if (triangle_x>0 && triangle_y>0) {
state="right_top";
}else{
alert("卡在:y>=330")
}
}else if (x<=-330) {
if (triangle_x<0 && triangle_y<0) {
state="right_top";
}else if (triangle_x<0 && triangle_y>0) {
state="right_button";
}else{
alert("卡在:x<=-330")
}
}else if (y<=-330) {
if (triangle_x<0 && triangle_y<0) {
state="left_button";
}else if (triangle_x>0 && triangle_y<0) {
state="right_button";
}else{
alert("y<=-330");
}
}
target_x=x;//储存本次x;
target_y=y;//储存本次y;
switch (state){
case "right_button":
x+=high;
y+=low;
break;
case "left_button":
x-=high;
y+=low;
break;
case "right_top":
x+=high;
y-=low;
break;
case "left_top":
x-=high;
y-=low;
break;
}
}
setInterval(action,100);
}
</script>
虽然还是肉鸟一只，代码冗余！命名也不规范！
还是希望大神们指点一二！
这个碰撞小球我已经更新版本！方法更简单了！也没有bug了！
请移步http://www.52pojie.cn/thread-545580-1-1.html{:301_987:}
os51 发表于 2016-10-18 18:55
向下滚动了滚动条
知道了！你电脑分辨率是1366*768的！所以有滚动条！我没考虑到这个！
这是因为clientX和ClienY的原因！
只要把mymove函数的clientX和ClienY替换成pageX和pageY！
如下
move.style.left=event.pageX-50+"px";
move.style.top=event.pageY-50+"px";
相关源码也已经更新！
还有这个小球我已经更新版本！方法更简单了！也没有bug了！
http://www.52pojie.cn/thread-545580-1-1.html 弱弱的小粥粥 发表于 2016-10-18 17:31
我在chrome53测试过，兄弟你是不是把窗口缩小了！
向下滚动了滚动条 沙发我的 没看懂，加油。 可以的 挺厉害 hehe,不错支持下 测试效果（chrome53） os51 发表于 2016-10-18 17:11
测试效果（chrome53）
我在chrome53测试过，兄弟你是不是把窗口缩小了！
页:
[1]
2