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

jackyrong

浏览: 7937428 次
性别:
来自: 广州

最近访客更多访客>>

尘与飞

深情痞子

Crow00

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax/web相关

一个简单的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>

分享到：

spring security 4.1两个不错功能介绍 | mysql 5.6 中 timestamp的变化

2016-04-30 10:19
浏览 4273
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

微信开发工具中时间问题的小坑

三篇不错的介绍CSS GRID的文章

双因素认证（2FA）教程

es6 中的export

markdown中的空格

(转）讲真，别再使用JWT了

(转）手把手教你WebStorm+chrome实现时时调试刷新

IntelliJ Idea 2017 免费激活方法

前端框架这么多，该何去何从？

记录一个HTML 5画拓扑图的商业公司

vue 2例子学习收集

（收藏）虚拟DOM内部是如何工作的

最近看到的几篇精彩JAVASCRIPT博客文章推荐

jsonp 跨域原理：深入浅出 jsonp

(转）深度长文-JavaScript数组所有API全解密

(收藏）网页导出PDF的方案

Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

国内一个不错的大屏UI设计厂家

canvas仿芝麻信用分仪表盘

(转）CSS 变量教程

最近访客更多访客>>