<!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. jQuery的自定义事件——滚轮

    这个案例类似于在地图上滚动滚轮,能缩小或者放大地图,分别用zoomIn和zoomOut来命名. 代码如下: //JS部分:<script src="jquery-1.10.2.min. ...

  2. jemalloc源码结构分析（二）：CPU字节对齐算法

    在调用arena_malloc_small过程中,要根据申请内存大小,进行对齐计算,然后分配一个整块儿.算法如下: 1)定义一个SIZE_CLASSES宏,它主要用于生成后面两个表,small_siz ...

  3. ios 图片截取功能 图片拼接功能

    截取整个view: -(UIImage*)captureView:(UIView *)theView{ CGRect rect = theView.frame; if ([theView isKind ...

  4. 关于Http协议的解析

    HTTP概述 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. HTTP就是一个通信规则,通信规则规定 ...

  5. Nodejs v4.x.0API文档学习（2）Assert断言测试模块

    文档参考地址:https://nodejs.org/dist/latest-v4.x/docs/api/ Assert(断言) assert模块提供了一组简单的断言测试方法,可以拥有测试不变量.该模块 ...

  6. uiautomator做自动化的过程

    UIautiomator官网地址:http://android.toolib.net/sdk/index.html 1.环境搭建 使用uiautomator需要导入jar包,uiautomator.j ...

  7. 다음에 적용될 Auto_increment 값 알아 내기 (计算下一个Auto_increment的值）

    Mysql 4.X <------ SHOW TABLE STATUS FROM [DB_NAME] LIKE '[TABLE_NAME]';     Mysql 5.X ----------- ...

  8. js中的FileSystemObject使用（FSO）

    Set fso = Server.CreateObject("Scripting.FileSystemObject") 定义FSO对象 fso.CreateFolder(Serve ...

  9. SQLserver中常用的函数及实例

    聚合函数 as是可以起别名的,在select和from之间的是表示列名,可以不加单引号)(聚合函数中的count不仅能对数字进行操作还能对字符型进行操作,其余的只能对数字操作) 最小值 select  ...

  10. ###学习《C++ Primer》- 4

    点击查看Evernote原文. #@author: gr #@date: 2014-10-16 #@email: forgerui@gmail.com Part 4: STL关联容器(第11章) 一. ...