<!DOCTYPE html>

<html>

<head>

    <title>Bouncing Ball With inputs</title>

    <style type="text/css">

        form {

            width: 330px;

            margin: 20px;

            background-color: brown;

            padding: 20px;

        }

    </style>

    <script type="text/javascript">

        var boxx = 0;

        var boxy = 0;

        var boxwidth = 350;

        var boxheight = 250;

        var ballrad = 10;

        var boxboundx = boxwidth + boxx - ballrad;

        var boxboundy = boxheight + boxy - ballrad;

        var inboxboundx = boxx + ballrad;

        var inboxboundy = boxy + ballrad;

        var ballx = 50;

        var bally = 60;

        var ctx;

        var ballvx = 4;

        var ballvy = 8;

        var step = 10;

        var isRight = false;

        var pai = {

            width: 2,

            height: 80,

            position: {

                x: 60,

                y: 80

            }

        }

        var inter;

        function init() {

            ctx = document.getElementById("canvas").getContext("2d");

            document.body.onkeydown = function (e) {

                var up = 38;

                var down = 40;

                if (e.keyCode == up) {

                    if (pai.position.y > 0) {

                        pai.position.y -= step;

                    }

                } else if (e.keyCode == down) {

                    if (pai.position.y < boxheight - pai.height) {

                        pai.position.y += step;

                    }

                }

            }

            ctx.lineWidth = ballrad;

            ctx.fillStyle = "rgb(200,0,50)";

            moveball();

            inter = setInterval(moveball, 100);

        }

        function moveball() {

            ctx.clearRect(boxx, boxy, boxwidth, boxheight);

            moveandcheck();

            ctx.beginPath();

            ctx.arc(ballx, bally, ballrad, 0, Math.PI * 2, true);

            if (ballx > (pai.position.x + pai.width)) {

                isRight = true;

            } else if (ballx < (pai.position.x - pai.width)) {

                isRight = false;

            }

            console.log(isRight);

            ctx.rect(pai.position.x, pai.position.y, pai.width, pai.height);

            ctx.fill();

            ctx.strokeRect(boxx, boxy, boxwidth, boxheight);

        }

        function moveandcheck() {

            var nballx = ballx + ballvx;

            var nbally = bally + ballvy;

            if (nballx > boxboundx) {//碰到右边的墙

                ballvx = -ballvx;

                nballx = boxboundx;

            }

            if (nballx < inboxboundx) {//碰到左边的墙

                nballx = inboxboundx;

                ballvx = -ballvx;

            }

            if (nbally > boxboundy) {//碰到下面的墙

                nbally = boxboundy;

                ballvy = -ballvy;

            }

            if (nbally < inboxboundy) {//碰到上面的墙

                nbally = inboxboundy;

                ballvy = -ballvy;

            }

            if ((isRight && (nballx < pai.position.x + ballrad) && (nbally < pai.position.y || nbally > pai.position.y + pai.height))) {

                clearInterval(inter);

                alert('游戏结束l');

            }

            //右边过来

            if (isRight && (nballx < pai.position.x + ballrad) && (nbally > (pai.position.y) && nbally < pai.position.y + pai.height)) {

                ballvx = -ballvx;

            }

            //左边过来

            else if (!isRight && (nballx > pai.position.x - ballrad) && (nbally > pai.position.y && nbally < pai.position.y + pai.height)) {

                ballvx = -ballvx;

                nballx = pai.position.x - ballrad;

            }

            ballx = nballx;

            bally = nbally;

        }

        function change() {

            ballvx = Number(f.hv.value);

            ballvy = Number(f.vv.value);

            return false;

        }

    </script>

</head>

<body onload="init()">

<td>

    <table align=center background="a.jpg">

        <td>

            <canvas id="canvas" width="400" height="300">不支持canvas</canvas>

            <br/>

            <form name="f" id="f" onsubmit="return change();">

                Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-10" max="10"/><br/>

                Vertical velocity <input name="vv" id="vv" value="8" type="number" min="-10" max="10"/>

                <input type="submit" value="Change"/>

            </form>

</body>

</html>

canvas 乒乓球的更多相关文章

  1. Android使用学习之画图(Canvas，Paint)与手势感应及其应用（乒乓球小游戏）

    作为一个没有学习Android的菜鸟,近期一直在工作之外努力地学习的Android的使用. 这周看了下Android的画图.主要是Canvas,Paint等,感觉须要实践下.下午正好有空,就想整一个乒 ...

  2. html5 乒乓球(碰撞检测)

    演示地址 http://koking.8u.hanmandarin.com/html5/1.html 简单介绍 小球可以在方框内部自由运动 可以通过方向键控制黑色砖块上下左右移动去与小球发生碰撞 代码 ...

  3. 【带着canvas去流浪（8）】碰撞

    目录 一. canvas的能力 二. 动画框架 三. 在canvas中模拟碰撞 3.1定义小球的属性 3.2 生成新的小球 3.3 帧动画绘制函数step 3.4 定义小球的update方法 3.5 ...

  4. 『Python Kivy』官方乒乓球游戏示例解析

    本篇文章用于对Kivy框架官方所给出的一个「乒乓球」小游戏的源码进行简单地解析.我会尽可能的将方方面面的内容都说清楚.在文章的最下方为官方所给出的这个小游戏的教程以及游戏源码. 由于篇幅所限,本文只简 ...

  5. 带着canvas去流浪系列之八 碰撞

    [摘要] canvas动画-碰撞仿真 示例代码托管在:http://www.github.com/dashnowords/blogs 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生A ...

  6. 带着canvas去流浪系列之八 碰撞【华为云技术分享】

    [摘要] canvas动画-碰撞仿真 示例代码托管在:http://www.github.com/dashnowords/blogs 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生A ...

  7. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  8. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  9. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

随机推荐

  1. About xvfb

    http://blog.csdn.net/span76/article/details/11473315 有时候我们不关注程序是否有界面(比如自动化测试),只要程序在运行就可以了 很感谢 xvfb 这 ...

  2. 使用SDWebImage 怎么获取指定请求对应的缓存图片呢？

    SDWebImage会对我们加载的网络数据进行缓存,但有时候我们想要拿到缓存数据中的图片,可以通过下个方法实现: UIImage *thumbnailImage = [[SDImageCache sh ...

  3. lex/flex 笔记

    Lex的匹配策略: 1. 按最长匹配原则确定被选中的单词 2. 如果一个字符串能被若干正规式匹配,则先匹配排在前面的正规式. lex源程序的写法:Lex源程序必须按照Lex语言的规范来写,其核心是一组 ...

  4. css3边框、阴影

    一.图像边框border-image 语法:border-image:border-image-source(图片)  ||  border-image-slice(裁剪位置)  ||  border ...

  5. React组件生命周期过程说明【转】

    实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...

  6. Azure Redis Cache作为ASP.NET 缓存输出提供程序

    前一篇文章<Azure Redis Cache作为ASP.NET Session状态提供程序 >我们已经知道如何将ASP.NET应用程序Session存储在Redis Cache中,这里我 ...

  7. oc语言学习之基础知识点介绍（五）：OC进阶

    一.点语法介绍 /* 以前封装后,要给属性赋值,必须调用方法 这样做,有两个缺点: 1.代码量多,调用方法要写的东西多. 2.看起来并不像是给属性赋值,也不像取值. 我们用点语法就可以更好的解决! 点 ...

  8. ArryList vs LinkedList

    references: http://www.javaperformancetuning.com/articles/randomaccess.shtml http://stackoverflow.co ...

  9. Android笔记之adb命令应用实例1(手机端与PC端socket通讯下)

    通过adb和Android通讯需要引用adb相关的组件到项目中,分别为:adb.exe,AdbWinApi.dll,AdbWinUsbApi.dll. 可以在XXX\sdk\platform-tool ...

  10. 03_HttpClient_Post请求

    [实例1.最最最简洁的POST请求] @Test public void test1() throws Exception{ //1.创建Htpclient实例(可关闭 Closeable) Clos ...