<!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. golang 并发顺序输出数字

    参考 package main import ( "fmt" "sync/atomic" "time" ) func main() { va ...

  2. POJ 2453

    #include <iostream> #include <algorithm> #include <cmath> #define MAXN 1000 #defin ...

  3. Flask 微博三方登录

    1.进入微博开发平台(https://open.weibo.com/),注册账号,填写开发者信息 2.创建应用.创建应用完成后,可以在"我的应用 - 应用信息"中查看您所创建应用的 ...

  4. godaddy 问题

    1. 域名被锁,打电话咨询后.说发送被锁的域名到: change@secureserver.net 去解锁.

  5. Notepad++中代码格式化插件NppAStyle

    本文以图片和说明,手把手教大家怎么让Notepad++中的代码风格看起来更美观. 工具/原料 Windows7 Notepad++ NppAStyle(Notepad++的一个插件) 方法/步骤  直 ...

  6. 微信小程序网络封装-简单高效

    废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动 ...

  7. JSP -- 从甲骨文开始

    1.Oracle10gForVistaX64下载地址:http://download.oracle.com/otn/nt/oracle10g/10204/10204_vista_w2k8_x64_pr ...

  8. postgresql 常用命令

    普通用法: sudo su - postgres 切换到postgres用户下: psql -U user -d dbname 连接数据库, 默认的用户和数据库是postgres \c dbname ...

  9. 程序员必知的8大排序(二)-------简单选择排序，堆排序（java实现）

    程序员必知的8大排序(一)-------直接插入排序,希尔排序(java实现) 程序员必知的8大排序(二)-------简单选择排序,堆排序(java实现) 程序员必知的8大排序(三)-------冒 ...

  10. ng-app与ng-app='myApp'的区别

    ng-app与ng-app=""是一样的,都是没定义应用名的,例如 <div ng-app="" ng-init="firstName='ech ...