首页 > 代码库 > HTML5-像素碰撞检测

HTML5-像素碰撞检测

2024-07-15 22:30:17   216人阅读

<script type="text/javascript"> var canvas; var ctx; var img; var isKeyLeft; var isKeyRight; var isKeyUp; var isKeyDown; var me_x = 200, me_y = 240; var tar_x = 300, tar_y = 240; var speed = 4; function hitTest(img1, w1, h1, src_x1, src_y1, x1, y1, img2, w2, h2, src_x2, src_y2, x2, y2) { var min_x = x1 > x2 ? x1 : x2; var min_y = y1 > y2 ? y1 : y2; var max_x = x1 + w1 > x2 + w2 ? x1 + w1 : x2 + w2; var max_y = y1 + h1 > y2 + h2 ? y1 + h1 : y2 + h2; if (min_x > max_x || min_y > max_y) return false; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img1, src_x1 + min_x - x1, src_y1 + min_y - y1, max_x - min_x, max_y - min_y, 0, 0, max_x - min_x, max_y - min_y); var data1 = ctx.getImageData(0, 0, max_x - min_x, max_y - min_y).data; ctx.clearRect(0, 0, max_x - min_x, max_y - min_y); ctx.drawImage(img2, src_x2 + min_x - x2, src_y2 + min_y - y2, max_x - min_x, max_y - min_y, 0, 0, max_x - min_x, max_y - min_y); var data2 = ctx.getImageData(0, 0, max_x - min_x, max_y - min_y).data; for (var i = 3; i < data1.length; i += 4) { if (data1[i] > 0 && data2[i] > 0) return true; } return false; } function RefreshFunc() { if (isKeyLeft) me_x -= speed; if (isKeyRight)me_x += speed; if (isKeyUp) me_y -= speed; if (isKeyDown) me_y += speed; if (hitTest(img, img.width, img.height, 0, 0, me_x, me_y, img, img.width, img.height, 0, 0, tar_x, tar_y)) { ctx.fillStyle = "Red"; } else { ctx.fillStyle = "#CCCCCC"; } ctx.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight); ctx.drawImage(img, me_x, me_y); ctx.drawImage(img, tar_x, tar_y); } function Init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); img = new Image(); img.src = "http://images.cnitblog.com/blog/39275/201408/051624134289345.png"; setInterval(RefreshFunc, 30); } document.onkeydown = function(e){ e = e || window.event; switch(e.which){ case 37: isKeyLeft = true; break; case 39: isKeyRight = true; break; case 38: isKeyUp = true; break; case 40: isKeyDown = true; break; } } document.onkeyup = function(e){ e = e || window.event; switch(e.which){ case 37: isKeyLeft = false; break; case 39: isKeyRight = false; break; case 38: isKeyUp = false; break; case 40: isKeyDown = false; break; } } Init(); </script>


联系
我们