<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>键盘事件小练习</title>

    <style>

        #mydiv{

            width: 30px;

            height: 30px;

            background-color: red;

            position: absolute;

            left: 0;

            top: 0;

        }

    </style>

</head>

<body>

<div id="mydiv"></div>

<script>

    var myDiv = document.getElementById("mydiv");

    var xs = 0;

    var xv = 30;

    var ys = 0;

    var yv = 30;

    document.onkeydown = function(event){

        var kc = event.keyCode;

        switch (kc){

            case 37:

                xs -= xv;

                myDiv.style.left = xs+"px";

                myDiv.style.backgroundColor = "red";

                break;

            case 38:

                ys -= yv;

                myDiv.style.top = ys + "px";

                myDiv.style.backgroundColor = "blue";

                break;

            case 39:

                xs+=xv;

                myDiv.style.left = xs+"px";

                myDiv.style.backgroundColor = "green";

                break;

            case 40:

                ys += yv;

                myDiv.style.top = ys + "px";

                myDiv.style.backgroundColor = "yellow";

                break;

        }

    }

</script>

</body>

</html>

onkeydown小练习的更多相关文章

  1. 软件工程 Android小游戏 猜拳大战

    一.前言 最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油 二.内容简介 自己玩过Andr ...

  2. 你想的到想不到的 javascript 应用小技巧方法

    javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...

  3. C#,JavaScript两种语言 2048小游戏

    <html> <head> <style type="text/css"> .haha { border-width: 2; font-size ...

  4. javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  5. html5面向对象做一个贪吃蛇小游戏

    canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...

  6. 原生javascript开发仿微信打飞机小游戏

    今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...

  7. flappy pig小游戏源码分析(1)——主程序初探

    闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...

  8. javascript常用的小知识

    1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu ...

  9. android 小方法

    小方法 1.获取屏幕分辨率: public class BaseTools { public static int getWindowWidth(Context context) { // 获取屏幕分 ...

随机推荐

  1. Task异步编程，刨根到底

    1. 编译器到底对await做了什么 await 一个异步操作的时候,实际上编译器会创建一个状态机,这个状态机包含了调用者的上下文变量,状态机使用yield迭代器实现,状态机由clr调度,每次运行都会 ...

  2. Redis笔记(1)数据结构与对象

    1.前言 此系列博客记录redis设计与实现一书的笔记,提取书本中的知识点,省略相关说明,方便查阅. 2.基本数据结构 2.1 简单动态字符串SDS(simple dynamic string) 结构 ...

  3. LSP劫持症状及解决方案

    [症状] 1.网络连接正常,win7诊断显示无问题,但打开网页很迅速的显示该页无法显示,好像浏览器并没有提交任何url就做出了反应一样,输入其他网址,有时候也出现等候很久最终也是无法上网,firefo ...

  4. Spring MVC的Controller统一异常处理：HandlerExceptionResolver

    a.针对500异常的统一处理1.实现HandlerExceptionResolver,重写resolveException方法 package com.liying.mango.common.inte ...

  5. java学习碰到死胡同了

    一个月前看了java的异常处理,有点凌乱,各种异常好不习惯,特别是那个throws和throw,现在好多了,编程中使用打异常抛出没啥问题了,只是线程和输出输入流又遇到问题了,线程刚学,了解了Threa ...

  6. Nginx缓存配置之手动清除缓存

    访问我的博客 前言 前文介绍了利用 nginx 的 nginx_ngx_cache_purge 模块来实现缓存功能,并设置了缓存时间为一天. 但是如果前端修改了页面,比如首页,由于 Nginx 缓存的 ...

  7. DROP TABLE 恢复【一】

    当DROP TABLE指令敲下的时候,你很爽,你有考虑过后果么?如果该表真的没用,你DROP到无所谓,如果还有用的,这时你肯定吓惨了吧,如果你有备份,那么恭喜你,逃过一劫,如果没有备份呢?这时就该绝望 ...

  8. redis学习（二） redis数据结构介绍以及常用命令

    redis数据结构介绍 我们已经知道redis是一个基于key-value数据存储的数据结构数据库,这里的key指的是string类型,而对应的value则可以是多样的数据结构.其中包括下面五种类型: ...

  9. 分享一个shell脚本的坑：grep匹配+wc取值 在脚本执行后的结果与手动执行结果不一致

    打算在跳板机上写一个shell脚本,批量检查远程服务器上的main进程是否在健康运行中. 先找出其中一台远程机器,查看main进程运行情况 [root@two002 tmp]# ps -ef|grep ...

  10. 解决U盘拷贝时提示文件过大问题（不能拷贝超过4个g的文件）

    为什么一个16G的U盘却拷不进一个4G大点的文件呢,想必很多朋友们都在疑问? 其实这跟U盘的磁盘格式有关,目前市面上常用的U盘大都是FAT32格式,我们可以查看U盘属性. 那么FAT32是什么呢? F ...