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

随机推荐

kibana从入门到精通-Kibana安装
作者其他ELK快速入门系列文章 Elasticsearch从入门到精通 logstash快速入门实战指南简介 Kibana 是一款开源的数据分析和可视化平台,它是 Elastic Stack 成员之 ...
ES6躬行记（2）——扩展运算符和剩余参数
扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对 ...
【Apache Pulsar】Apache Pulsar单机环境及Go语言开发环境搭建
0x01 简介 Apache Pulsar是一个开源的分布式发布-订阅消息系统,与Kafka类似,但比后者更加强大.Pulsar最初由Yahoo开发并维护,目前已经成为Apache软件组织的一个孵化子 ...
vue_drf之实现极验滑动验证码
一.需求 1,场景我们在很多登录和注册场景里,为了避免某些恶意攻击程序,我们会添加一些验证码,也就是行为验证,让我们相信现在是一个人在交互,而不是一段爬虫程序.现在市面上用的比较多的,比较流行的是极 ...
《C#并发编程经典实例》学习笔记-第一章并发编程概述
并发编程的术语并发同时做多件事情多线程并发的一种形式,它采用多个线程来执行程序. 多线程是并发的一种形式,但不是唯一的形式. 并行处理把正在执行的大量的任务分割成小块,分配给多个同时运行的线 ...
第一册：lesson fifty one.
原文: A pleasant climate. A:Where do you come frome? B:I come from Greece. A:What's the climate like i ...
sqlserver数据库 IsNull()
Isnull 函数主要作用是将为空的值替换为指定值,如果不为空返回检查类型的返回值, 语法:Isnull (check_expression , replacement_value) isnull(参 ...
[PHP] 算法-数值的整数次方的PHP实现
给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 思路: 1.指数的二进制表达10^6次方可以表示10^110(二进制) 10^100 ...
[android] 采用aidl绑定远程服务
aidl:android interface definition language 安卓接口定义语言在两个不同的应用程序里面使用同一个接口使用场景:调用支付宝服务进行支付先写远程服务端Seri ...
Mysql索引的类型
索引的类型 B-Tree索引 B-Tree 索引通常意味着所有的值都是按顺序存储的,并且每一个叶子页到根的距离相同. B-Tree 索引能够加快访问数据的速度,存储引擎不再需要进行全表扫描来获取需 ...

H5——简易马祖

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

随机推荐

热门专题