H5——简易马祖
<!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 id="div1">
<canvas id="ca" width="600" height="600"></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));
}
H5——简易马祖的更多相关文章
- h5简易手写板
............. 我该说点什么呢,开头居然不知道想说点什么!好吧不知道说什么,我们就来说说这个手写板吧,虽然这个手写板现在没什么用,但是.....,好像的确没什么用啊! 只是存粹哪里练手的的 ...
- Html5 Page Creator，简易h5页面场景制作
- h5页面调用摄像头(简易版)
<input type="button" value="OpenVideo" id="btnOpenVideo" /> < ...
- h5图片上传简易版（FileReader+FormData+ajax）
一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为 ...
- 一个简易h5涉及的ps技巧
事实证明,很长时间不做,是会忘掉的呀,的呀,呀,啊~ 1.合并图层 CTRL+E合并多个图层 2.切片 3.导出 文件-------导出------存储为web所用格式-------->> ...
- 用微信小程序做H5游戏尝试
微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信AP ...
- 用PHP+H5+Boostrap做简单的音乐播放器（进阶版）
前言:之前做了一个音乐播放器(纯前端),意外的受欢迎,然后有人建议我把后台一起做了,正好也想学习后台,所以学了两天php(不要吐槽我的速度,慢工出细活嘛~)然后在之前的基础上也又完善了一些功能,所以这 ...
- h5的瀑布流
<!doctype html><html><head><meta charset="utf-8"><title>超简易瀑 ...
- 简易RPC框架-学习使用
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
随机推荐
- 在关闭页面时自动清除Session cookie，页面缓存
在默认情况下,session对象在关闭浏览器后并不是立刻被销毁,因此,为了考虑系统的安全性,在用户退出时,需要即刻清除session对象,防止他人盗用session对象中的信息. 清除session对 ...
- Core2.0知识整理
概述 Commond-Line ASP.NET结构文件 Startup 配置文件 中间件和依赖注入 依赖注入原理 框架自带的依赖注入(IServiceCollection) 依赖注入生命周期 依赖注入 ...
- golang写业务代码，用全局函数还是成员函数
在golang中,函数划分为全局函数和成员函数,在使用的时候,有种情况,会产生一些疑惑的,就是在写业务代码的时候,使用全局函数好像会比较方便,一般业务代码,都不会复用,都是针对特定的业务进行编程,要复 ...
- More Effective C# 【前戏】
买了很多很多书,想到就买,觉得有需要就买.买书的情况是不一样的:有时候,买的时候还是比较空,买来之后工作开始忙起来了,就没怎么看:有时候,买的时候比较忙,忙的乱了方寸,觉得有必要找本书来静心一下.不过 ...
- MyEclipse 皮肤、主题、背景色
第一步:打开myeclipse--->help--->install from site--->Add将路径粘贴在这里.等待安装颜色主题.https://raw.github.com ...
- paramiko之ssh登录，执行cmd，下载文件
一.paramiko远程登录及执行命令 1.1:exec_command(cmd)远程执行命令 client = paramiko.SSHClient() client.set_missing_hos ...
- Linux上安装nginx+tomcat负载均衡
1.Ngnix Nginx (发音同 engine x)是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行. 其特点是占有内 ...
- Java之判断大整数是否为平方数
在本篇博客中,我们将讨论如何使用有效的算法来判断一个大整数是否为平方数. 给定正整数\(n\),如果存在一个整数\(m\),满足\(m^{2}=n\),那么则称\(n\)为平方数.因此,判断一 ...
- [android] 内容观察者
拦截短信,比如当发短信的时候,就把短信读取出来,当系统的短信发生变化的时候,大叫一声,把数据发送到公共的消息邮箱里面,我们的应用通过内容观察者观察公共的消息邮箱 获取ContentResolver对象 ...
- 今天给大家补充一下 background 用法
补充一个知识点 1,浏览器默认字体大小是font-size:16px:谷歌最小字体是10px,其他浏览器是12px 2. 选择器 通配符选择器 * 表示 3.background 背景 ...