<!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. 关于javascript的slice方法

    slice方法在javascript中既可以在Array对象的原型下也可以是在String对象的原型下;其中w3c上面说的slice方法的第一个参数是必须的;这里的说法有误; slice的参数可以是0 ...

  2. 关于Eclipse插件开发(一)

    plugin.xml是插件和Eclipse内核的接口,Eclipse就像一所大宅子.它的外墙(plugin.xml)有很多门(扩展点), 要熟练进入这座大宅子,就得先搞清楚它有那些门(扩展点). 插件 ...

  3. 关于Git补丁文件交互

    之前各个章节的版本库的交互都是通过 git push和git pull命令来实现的.这个是Git最主要的交互模式,但并不是全部. 使用补丁文件是另外一种交互方式,适用于参与者众多的大型项目进行的分布式 ...

  4. gcc的基础知识

    GCC(GNU Compiler Collection,GNU编译器集合)是一套由GNU工程开发的支持多种编程语言的编译器. 基本用法 在使用Gcc编译器的时候,我们必须给出一系列必要的调用参数和文件 ...

  5. PeopleReady--办公学习类App产品

    PeopleReady是能使人(公司或组织里的员工)快速Ready(经验+知识)的学习系统.对员工的好处是:- 可以迅速Ready,尽快符合岗位要求,尽快有Performance,尽快对公司有价值,从 ...

  6. $GLOBALS['HTTP_RAW_POST_DATA']、$_POST和php://input深入探究三者的区别

    $_POST:通过 HTTP POST 方法传递的变量组成的数组.是自动全局变量. $GLOBALS['HTTP_RAW_POST_DATA'] :总是产生 $HTTP_RAW_POST_DATA 变 ...

  7. php xml常用函数的集合(比较详细)

    1.DOM 函数 a.DOMDocument-<load()作用:加载xml文件用法:DOMDocument-<load( string filename )参数:filename,xml ...

  8. 设计模式------Adapter(适配器）

    地址:http://blog.csdn.net/wuzhekai1985/article/details/6665542,仅供学习用. 适配器:STL实现了一种数据结构,称为双端队列(deque),支 ...

  9. ios registerNib: and registerClass:

    先看看apple官网简述: registerNib:forCellWithReuseIdentifier: Register a nib file for use in creating new co ...

  10. SVN服务器从Windows迁移到Linux

    gerui 2013.9.14 ge-rui@sohu.com 一.备份VisualSVN项目 1. 现在要使用Linux作为svn服务器,之前是在windows Server 2008上的,用的是V ...