H5——简易马祖 - 左转右转_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="xiaoshu.js"></script> <style> #div1 { width: 602px; margin: 20px auto; border: 1px solid #efdede; } </style> </head> <body> <div> <canvas></canvas> </div> </body> </html> <script> var OC = document.getElementById('ca'); var CG = OC.getContext('2d'); var mx = 0, my = 0; var iRoat = 0; var ball = []; setInterval(function () { ball.push({ x: 200, y: 0, r: 100, num: 0, starX: 200, starY: 0 }); }, 400); var bollet = []; var oImg = new Image(); oImg.src = "img/person.png"; oImg.onload = function () { //画图运动 setInterval(function () { CG.clearRect(0, 0, OC.width, OC.height); CG.save(); CG.translate(180, 100); CG.rotate(iRoat); CG.translate(-25, -25); CG.drawImage(oImg, 0, 0, 50, 50); CG.restore(); CG.beginPath(); CG.arc(200, 100, 100, -90 * Math.PI / 180, 180 * Math.PI / 180, false); CG.stroke(); CG.beginPath(); CG.arc(180, 100, 80, 180 * Math.PI / 180, 360 * Math.PI / 180, false); CG.stroke(); CG.beginPath(); CG.arc(260, 100, 10, 0, 360 * Math.PI / 180, true) CG.stroke(); CG.closePath(); for (var i = 0; i < ball.length; i++) { CG.beginPath(); CG.moveTo(ball[i].x, ball[i].y); CG.arc(ball[i].x, ball[i].y, 10, 0, 360 * Math.PI / 180, false); CG.closePath(); CG.fill(); } for (var i = 0; i < bollet.length; i++) { CG.save(); CG.beginPath(); CG.fillStyle = 'red'; CG.moveTo(bollet[i].startX, bollet[i].startY); CG.arc(bollet[i].startX, bollet[i].startY, 10, 0, 360 * Math.PI / 180, false); CG.closePath(); CG.fill(); CG.restore(); } }, 1000 / 60); //为运动提供数据 setInterval(function () { for (var i = 0; i < ball.length; i++) { ball[i].num++; if (ball[i].num >= 270) { ball[i].r = 80; ball[i].starX = 180; ball[i].starY = 100; ball[i].x = add(ball[i].starX, mul(Math.sin(ball[i].num * Math.PI / 180), ball[i].r)); ball[i].y = add(-mul(Math.cos(ball[i].num * Math.PI / 180), ball[i].r), ball[i].starY); if (ball[i].num == 270 + 180) { alert('游戏结束'); window.location.reload(); } } else if (ball[i].num < 270) { ball[i].x = Math.sin(ball[i].num * Math.PI / 180) * ball[i].r + ball[i].starX; ball[i].y = ball[i].r - Math.cos(ball[i].num * Math.PI / 180) * ball[i].r + ball[i].starY; } } for (var i = 0; i < bollet.length; i++) { bollet[i].startX = bollet[i].startX + bollet[i].sX; bollet[i].startY = bollet[i].startY + bollet[i].sY; } for (var i = 0; i < bollet.length; i++) { for (var j = 0; j < ball.length; j++) { var a = { x: Math.abs( bollet[i].startX), y: Math.abs(bollet[i].startY), r: 10 }; var b = { x: Math.abs(ball[j].x), y: Math.abs(ball[j].y), r: 10 }; if (afoul(a, b)) { bollet.splice(i, 1); ball.splice(j, 1); break; } } } }, 30); } OC.onmousemove = function (ev) { var ev = ev || event; var a = ev.clientX - OC.offsetLeft - 180; var b = ev.clientY - OC.offsetTop - 100; var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); if (a >= 0 && b <= 0) { iRoat = Math.asin(a / c); } else if (a > 0) { iRoat = Math.acos(a / c) + 90 * Math.PI / 180; } if (a <= 0 && b <= 0) { iRoat = Math.asin(a / c); } else if (a < 0) { iRoat = -(Math.asin(b / c) + 90 * Math.PI / 180); } } OC.onmousedown = function (ev) { var ev = ev || event; var a = ev.clientX - OC.offsetLeft - 180; var b = ev.clientY - OC.offsetTop - 100; var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); var iSpeed = 5; var sX = iSpeed * a / c; var sY = iSpeed * b / c; bollet.push({ startX: 180, startY: 100, sX: sX, sY: sY }); } //碰撞检测 function afoul(a, b) { var x = Math.pow((a.x - b.x), 2); var y = Math.pow((a.y - b.y), 2); var r = Math.pow((a.r + b.r), 2); if (Math.sqrt( x + y) <Math.sqrt(r)) { return true; } return false; } </script>

　　用到的处理小数的js xiaoshu.js

//加法 function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) { c = 0; } try { d = b.toString().split(".")[1].length; } catch (f) { d = 0; } return e = Math.pow(10, Math.max(c, d)), (mul(a, e) + mul(b, e)) / e; } //减法 function sub(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) { c = 0; } try { d = b.toString().split(".")[1].length; } catch (f) { d = 0; } return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e; } //乘法 function mul(a, b) { var c = 0, d = a.toString(), e = b.toString(); try { c += d.split(".")[1].length; } catch (f) { } try { c += e.split(".")[1].length; } catch (f) { } return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c); } //除法 function div(a, b) { var c, d, e = 0, f = 0; try { e = a.toString().split(".")[1].length; } catch (g) { } try { f = b.toString().split(".")[1].length; } catch (g) { } return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e)); }