<!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. POJ 2505

    #include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...

  2. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  3. nginx发布静态网页

    http://www.jb51.net/article/71384.htm 切记不要把项目放在/root下 会出现 nginx open() "" failed (13: Perm ...

  4. python中文画图显示乱码解决办法

    最近使用notebook Python中的matplotlib作图,发现中文设置的坐标标签和title都显示为乱码,用了网上的许多教程都不管用,嘴后解决的方式是设置下述的两行即可搞定: plt.rcP ...

  5. (转)Python3之pickle模块

    原文:https://www.cnblogs.com/wang-yc/p/5616579.html https://www.cnblogs.com/yuanzhaoyi/p/6093362.html- ...

  6. WebFlux基础之响应式编程

    上篇文章,我们简单的了解了WebFlux的一些基础与背景,并通过示例来写了一个demo.我们知道WebFlux是响应式的web框架,其特点之一就是可以通过函数式编程方式配置route.另外究竟什么是响 ...

  7. Twitter Bootstrap3小结

    今天有空,小结一下Twitter Bootstrap 3的使用.首先不得不说,Bootstrap是迄今(2014)比较好的WEB设计框架(当然,其它的优秀WEB Framework还有:Foundat ...

  8. koa-router post请求接收的参数为空

    注:koa-router路由和koa-bodyparser中间件  post请求中参数为空. 页面代码 <!DOCTYPE html> <html> <head> ...

  9. 走进javascript——它是什么？

    javascript不是什么 如<把时间当作朋友>的作者所说,"有些时候,有些事物,从反面描述比从正面描述更为容易.如若先仔细说清楚这本书不是什么,之后,至于它究竟是什么,很可能 ...

  10. ActiveMQ——activemq的使用java代码实例（精选）

    ActiveMQ 在java中的使用,通过单例模式.工厂实现 Jms规范里的两种message传输方式Topic和Queue,两者的对比如下表():   Topic Queue 概要 Publish  ...