参考：

1、Simple Canvas Game

2、javaScript 事件监听

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>moveBall</title>

    </head>

    <body>

        <script>

//            a test

//            addEventListener("keydown", function (e) {

//                console.log(e);

//            }, false);

            var screenWidth = document.documentElement.clientWidth;

            var screenHeight = document.documentElement.clientHeight;

            var ball = document.createElement("div");

            ball.style.width = 124 + "px";

            ball.style.height = 124 + "px";

            ball.style.backgroundColor = "coral";

            ball.style.borderRadius = "50%";

            var X = Math.random()*screenWidth;

            var Y = Math.random()*screenHeight;

            ball.style.position = "absolute";

            ball.style.left = X + "px";

            ball.style.top = Y + "px";

            document.body.appendChild(ball);

            function repaint() {

                ball.style.left = X + "px";

                ball.style.top = Y + "px";

            }

            function moveUp() {

                Y--;

                repaint();

            }

            function moveDown() {

                Y++;

                repaint();

            }

            function moveLeft() {

                X--;

                repaint();

            }

            function moveRight() {

                X++;

                repaint();

            }

            addEventListener("keydown", function (e) {

                if (e.key == "ArrowUp") {

                    moveUp();

                }

                if (e.key == "ArrowDown") {

                    moveDown();

                }

                if (e.key == "ArrowLeft") {

                    moveLeft();

                }

                if (e.key == "ArrowRight") {

                    moveRight();

                }

            }, false);

        </script>

    </body>

</html>

【JavaScript】键盘控制小球的更多相关文章

  1. 【 java版坦克大战--事件处理】 键盘控制小球上下左右移动

    上一节已经学习了事件处理,这一节需要完成通过键盘的上下左右键控制小球移动. 然后再通过应用到我们绘制的坦克上. /** * 加深对事件处理机制的理解 * 通过光标的上下左右键,控制小球的左右上下移动. ...

  2. Java--用键盘控制小球

    package secondpack; import java.awt.*; import java.awt.event.*; public class MyBall { public static ...

  3. html5 javascript 事件练习3键盘控制练习

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. javascript键盘输入控制

    获取键盘控制事件 document.onkeydown = keyDown 当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫KeyDown()函数. 不同浏览器的实现: Netscape Ne ...

  5. JavaScript键盘事件全面控制代码

    JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...

  6. js键盘控制div移动，解决停顿问题

    问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> &l ...

  7. JS实现用键盘控制DIV上下左右+放大缩小与变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 键盘控制div移动并且解决停顿问题（原生js）

    <html> <head> <title>键盘控制div移动,解决停顿问题</title> <meta charset="utf-8&q ...

  9. 键盘控制背景边框平滑移动（jquery）

    今天同事让我看了一个动画效果,是由键盘控制背景边框平滑移动,我感觉挺cool,所以我自己也动手制作了一个.目的是为了锻炼自己,看自己是否也能在短时间内实现. 先上图: 一.html代码 <!DO ...

随机推荐

  1. markDownPad Key

    邮箱: Soar360@live.com 授权秘钥: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6b ...

  2. IOS7--javascriptcore中jscontext使用要注意的一点

    在公司一个项目中,用到了highchart做图表显示的组件,这就要用到了javascriptcore,代码就不上了,说说原理. 需求是这样的,通过http请求server csv格式的数据,然后解析, ...

  3. 面试题思考：Java 8 / Java 7 为我们提供了什么新功能

    Java 7 的7个新特性 1.对集合类的语言支持: 2.自动资源管理: 3.改进的通用实例创建类型推断: 4.数字字面量下划线支持: 5.switch中使用string: 6.二进制字面量: 7.简 ...

  4. Selenium Firefox 官方Webdriver -- Geckodriver 下载地址

    Selenium Firefox 官方Webdriver -- Geckodriver 下载地址 https://github.com/mozilla/geckodriver/releases

  5. Kubernetes初探：原理及实践应用

    总体概览 如下图所示是我初步阅读文档和源代码之后整理的总体概览,基本上可以从如下三个维度来认识Kubernetes. 操作对象 Kubernetes以RESTFul形式开放接口,用户可操作的REST对 ...

  6. PHP中Trait详解及其应用

    w PHP中Trait详解及其应用 - 开发者日常 - SegmentFaulthttps://segmentfault.com/a/1190000008009455

  7. Collections工具类的使用

    创建实体类 public class News implements Comparable { private int id; //新闻编号 private String title; //新闻标题 ...

  8. LAMP兄弟连 视频教程集

    电驴的资源:http://www.verycd.com/topics/2843130/?ref=msg

  9. 流畅的python 字典和集合

    介绍 dict 类型不但在各种程序里广泛使用,它也是 Python 语言的基石.模块的命名空间.实例的属性和函数的关键字参数中都可以看到字典的身影.跟它有关的内置函数都在 __builtins__._ ...

  10. node.js---sails项目开发（2）

    1.安装mongoDB,这里用brew安装 brew install mongodb 2. 启动数据库 mongod 3.再打开一个终端,连接数据库 mongo 4.启动成功后,接下来就是新建一个数据 ...