<!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. 读写锁ReadWriteLock和缓存实例

    读写锁:多个读锁不互斥,读锁与写锁互斥,写锁与写锁互斥.即:读的时候不允许写,写的时候不允许读,可以同时读.      synchronized关键字和普通的Lock构造的锁,会造成读与读之间的互斥, ...

  2. 使用Zencoding的升级版Emmet

    最近vim7.4也更新了,zengcoding好像停止了更新,更换成emmet了,使用还是和Zencoding一样. emmet的地址在http://emmet.io/   支持很多的编辑器和IDE. ...

  3. Opencv——播放视频(带滚动条)

    #include"highgui.h" #include"cv.h" ; CvCapture* g_capture = NULL; void onTrackba ...

  4. 深入理解java的抽象类和接口（转载）

    原文链接:http://www.cnblogs.com/dolphin0520/p/3811437.html 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的 ...

  5. php Composer中国全量镜像

    http://pkg.phpcomposer.com/ http://www.yiichina.com/doc/guide/2.0/intro-upgrade-from-v1 https://getc ...

  6. 12天学好C语言——记录我的C语言学习之路（Day 11）

    12天学好C语言--记录我的C语言学习之路 Day 11: 因为指针部分比较的难,所以我们花费的时间也是最长的,希望大家耐的住性子,多多理解,多多打代码.好了,废话不多说,来看第11天的学习. //编 ...

  7. (转)TCP注册端口号大全

    分类: 网络与安全 cisco-sccp 2000/tcp Cisco SCCPcisco-sccp 2000/udp Cisco SCCp# Dan Wing <dwing&cisco ...

  8. Ajax的概述与实现过程

    一.ajax概述 1.Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的简写,不是一门新技术,而是对现有技术的综合利用.这一技术能够向服务器请求额外数据而无 ...

  9. Codevs 1001 舒适的路线 2006年 NOIP全国联赛提高组

    1001 舒适的路线 2006年 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观 ...

  10. C++ Txt文档写入

    void writefile(student *s,int n,string filepath){ ofstream myfile; if(!myfile)//有错误 { exit(1); }else ...