`

一个简单的javascript小球碰撞代码

 
阅读更多
一个简单的javascript小球碰撞代码，综合了键盘操作，canvas等知识了，javascript入门小游戏基础 


<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;

    var circle = function (x, y, radius, fillCircle) {
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2, false);
      if (fillCircle) {
        ctx.fill();
        } else {
        ctx.stroke();
      }
    };

    // The Ball constructor
    var Ball = function () {
      this.x = width / 2;
      this.y = height / 2;
      this.xSpeed = 5;
      this.ySpeed = 0;
    };

    
    Ball.prototype.move = function () {
      this.x += this.xSpeed;
      this.y += this.ySpeed;

      if (this.x < 0) {
        this.x = width;
      } else if (this.x > width) {
        this.x = 0;
      } else if (this.y < 0) {
        this.y = height;
      } else if (this.y > height) {
        this.y = 0;
      }
    };

   
    Ball.prototype.draw = function () {
      circle(this.x, this.y, 10, true);
    };

   
    Ball.prototype.setDirection = function (direction) {
      if (direction === "up") {
        this.xSpeed = 0;
        this.ySpeed = -5;
      } else if (direction === "down") {
        this.xSpeed = 0;
        this.ySpeed = 5;
      } else if (direction === "left") {
        this.xSpeed = -5;
        this.ySpeed = 0;
      } else if (direction === "right") {
        this.xSpeed = 5;
        this.ySpeed = 0;
      } else if (direction === "stop") {
        this.xSpeed = 0;
        this.ySpeed = 0;
      }
    };

    // Create the ball object
    var ball = new Ball();

    // An object to convert keycodes into action names
    var keyActions = {
      32: "stop",
      37: "left",
      38: "up",
      39: "right",
      40: "down"
    };

   
    $("body").keydown(function (event) {
      var direction = keyActions[event.keyCode];
      ball.setDirection(direction);
    });

 
    setInterval(function () {
      ctx.clearRect(0, 0, width, height);

      ball.draw();
      ball.move();

      ctx.strokeRect(0, 0, width, height);
    }, 30);
    </script>
</body>
分享到：
| mysql 5.6 中 timestamp的变化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    小球碰撞游戏JS源码.zip

    一个简单的javascript小球碰撞游戏代码，支持查看比赛分数，查看游戏失败次数，且代码之间有相应的注释，方便他人阅读，运用了canvas，以及requestAnimationFrame。。。。。。

    原生JS实现多个小球碰撞反弹效果示例

    主要介绍了原生JS实现多个小球碰撞反弹效果,结合完整实例形式分析了javascript实现小球碰撞的相关数值计算、随机数生成、事件响应等操作技巧,需要的朋友可以参考下

    javascript canvas检测小球碰撞

    主要为大家详细介绍了javascript canvas检测小球碰撞，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    【JavaScript源代码】原生js实现移动小球（碰撞检测）.docx

    原生js实现移动小球（碰撞检测） 　本文实例为大家分享了js实现移动小球的具体代码，供大家参考，具体内容如下　&lt;/head&gt;　&lt;style&gt;　*{margin: 0;　padding:0;}　#main{margin: 0px auto;position: relative;}　#main...

    javascript实现10个球随机运动、碰撞实例详解

    主要介绍了javascript实现10个球随机运动、碰撞的方法,实例分析了javascript实现小球碰撞的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    canvas碰撞球

    1、使用canvas实现小球碰撞； 2、全屏显示无滚动条； 3、设置定时器使小球动起来，页面流畅不卡顿； 4、html页面，浏览器直接运行

    html5小游戏源代码大全

    11HTML5游戏引擎插件box2d实现小球碰撞叠加.zip 12HTML5漂亮的质感小鱼.zip 13HTML5纯代码扫雷游戏实例.zip 14HTML5超级玛丽.zip 15HTML5超级玛丽小游戏源代码.zip 16HTML5超萌休闲小游戏—打地鼠.zip 17HMTL5让蘑菇...

    61个时尚网页特效

    images JavaScript表格高亮选择特效 ...小球碰撞叠加 带分类和缩略图显示的jquery相册特 时钟特效 最少代码的瀑布流实现预览效果 滚动条.htm 漂亮的放GG代码的广告框架 用户注册代码 简洁的左右切换焦点图代码(jQuery)

    CrashBall:seajs 简易台球游戏 实现控制预测每个球的路径

    故自己重写碰撞过程，碰撞过程分析较复杂，在blog中有分析，地址 游戏上线后，趁闲暇时间，整理碰撞的思路，用seajs重新写了一遍。说明使用的append添加的预测路径，如果同时撞击很多，则渲染会很慢。在贪吃鱼中使用...

    learn-canvas

    #Canvas学习 这里主要放一些canvas学习过程中的demo ：效果来自，重写了代码 ：扩散效果来自，雪花效果来自，重写了... ：基于圆与多边形、圆与圆的碰撞检测、重力模拟做的一个弹跳小球的demo，点击屏幕弹出一个小球

    HTML5 Canvas核心技术 图形、动画与游戏开发

    176 4.1.2　drawimage()方法的用法 177 4.2　图像的缩放 179 4.3　将一个canvas绘制到另一个canvas之中 183 4.4　离屏canvas 186 4.5　操作图像的像素 189 4.5.1　获取图像数据 189 4.5.2　修改图像数据 195 4.6　...

Magicbox
Global site tag (gtag.js) - Google Analytics