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; } /* ...

随机推荐

XML技术思想
百科名片: 可扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...
【原创】驱动枚举之EnumServicesStatusEx
BOOL WINAPI EnumServicesStatusEx( _In_ SC_HANDLE hSCManager, _In_ SC_ENUM_TYPE InfoLevel, _In_ DWORD ...
网络协议抓包分析——IP互联网协议
前言 IP协议是位于OSI模型的第三层协议,其主要目的就是使得网络间可以相互通信.在这一层上运行的协议不止IP协议,但是使用最为广泛的就是互联网协议. 什么是IP数据报 TCP/IP协议定义了一个在因 ...
Java网络编程的Java流介绍
前言网络程序所做的很大一部分工作都是简单的输入输出:将数据字节从一个系统移动到另一个系统.Java的I/O建立于流(stream)之上.输入流读取数据,输出流写入数据.过滤器流(filter)流可以 ...
Python多进程操作同一个文件，文件锁问题
最近工作当中做了一个项目,这个项目主要是操作文件的. 在操作耗时操作的时候,我们一般采用多线程或者多进程.在开发中,如果多个线程需要对文件进行读写操作,就需要用到线程锁或者是文件锁. 使用fcntl ...
MySQL小计
判断不等于某一个数字的时候,数据表为空的字段不参与比较: 判断字段为空用 is null
python面向对象入门(1)：从代码复用开始
本文从代码复用的角度一步一步演示如何从python普通代码进化到面向对象,并通过代码去解释一些面向对象的理论.所以,本文前面的内容都是非面向对象的语法实现方式,只有在最结尾才给出了面向对象的简单语法介 ...
Redis基础知识补充及持久化、备份介绍(二)--技术流ken
Redis知识补充在上一篇博客<Redis基础认识及常用命令使用(一)--技术流ken>中已经介绍了redis的一些基础知识,以及常用命令的使用,本篇博客将补充一些基础知识以及redis ...
隐藏马尔科夫模型HMM
概率图模型 HMM 先从一个具体的例子入手,看看我们要解决的实际问题.例子引自wiki.https://en.wikipedia.org/wiki/Hidden_Markov_model Consid ...
行为型---状态者模式（State Pattern）
状态者模式的介绍每个对象都有其对应的状态,而每个状态又对应一些相应的行为,如果某个对象有多个状态时,那么就会对应很多的行为.那么对这些状态的判断和根据状态完成的行为,就会导致多重条件语句,并且如果添 ...

H5——简易马祖

H5——简易马祖的更多相关文章

随机推荐

热门专题