<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>超级玛丽</title>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <style>

        img{

            width:50px;

            position:absolute;

            top: %;

            left: %;

        }

        .hide{

            display:none;

        }

        .kuop{

            background:#;

            width:30px;

            height:30px;

            position: absolute;

        }

    </style>

</head>

<body>

    <audio src="./images/song.mp3" controls="controls" class="hide" id="music"></audio>

    <img id="imgs" src="./images/Life-Mushroom.png"/>

    <div class="kuop">

    </div>

    <script>

        window.document.onkeydown = keyup;

        var imgs = document.getElementById('imgs');

        var music = document.getElementById('music');

        var modes = ;

        function keyup(event){

            var keycode = event.keyCode; 

            switch(keycode)

            {

                case :

                    imgs.style.left = (imgs.offsetLeft + modes*-)+'px';

                    break;

                case :

                    imgs.style.top = (imgs.offsetTop + modes*-)+'px';

                    break;

                case :

                    imgs.style.left = (imgs.offsetLeft + modes)+'px';

                    break;

                case :

                    imgs.style.top = (imgs.offsetTop + modes)+'px';

                    break;

            }

        }

    </script>

</body>

</html>

js 超级玛丽(未完成)的更多相关文章

  1. 例子：js超级玛丽小游戏

    韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...

  2. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  3. (未完成👃)You Don't Know JS: Scope & Closures (第5章: Scope & Closures)

    Chapter 5: Scope Closure 我们到达这里时,已经对作用域如何工作有了非常健康稳固的理解. 下面,我们转移注意力到一个及其重要,但长期难以理解,几乎是神话中的部分语言:Closur ...

  4. js高级程序设计第八章BOM（未完成，待续）

    8.1window对象 BOM的核心对象是window,表示浏览器的一个实例. window对象有双重角色,既可以通过就是访问浏览器窗口的接口,又是ECMAscript规定的Global对象   8. ...

  5. 前端必备的js知识点（转载）

    1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点?    ...

  6. io.js的服務器突破

    Node.js与io.js那些事儿 InfoQ中文站 05月20日 14:26 去年12月,多位重量级Node.js开发者不满Joyent对Node.js的管理,自立门户创建了io.js.io.js的 ...

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  9. Node.js用ES6原生Promise对异步函数进行封装

    Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...

随机推荐

  1. 如果在安装32位oracle 客户端组件时的情况下以64位模式运行,将出现问题

    今天要写个程序,环境是win7+ vs2008+ oracle.首先得保证能连接到数据库.确认代码是没有问题的,但是拿过来直接.报错: “尝试加载 Oracle 客户端库时引发 BadImageFor ...

  2. P - The Shortest Path in Nya Graph-hdu4725（双端队列+拆点）

    题意:有N个点和N层..一层有X个点(0<=X<=N).两邻两层间有一条路花费C.还有M条小路在两个点之间.问从第一个点走到第N个点最短路是多少... 可以考虑在每一层增加一个点,这个点到 ...

  3. webstrom开发微信小程序说明

    在操作之前,需要对webstrom做一些设置,如下 如果未安装node.js的朋友,请到如下地址 https://nodejs.org/en/ 安装(相信大家都是会的),如果安装完了之后,就使用如下的 ...

  4. java设计模式演示样例

    创建模式 1.工厂方法模式(Factory Method)  将程序中创建对象的操作,单独出来处理,创建一个产品的工厂接口,把实际的工作转移到详细的子类.大大提高了系统扩展的柔性,接口的抽象化处理给相 ...

  5. poj 3735 大数量反复操作问题（矩阵高速幂）

    题意:一个一维数组,3种操作: a:  第i个数+1,b: 第i个数=0 ,c::交换某俩处的数.  由三种基本操作构成一组序列,反复该序列m次(m<10^9),问结果 属于一种综合操作反复型: ...

  6. mac下使用brew安装svn javahl的问题

    eclipse老提示javahl太久必须得1.8以上,以前不知道什么时候在/usr/bin装过1.7的svn. 1. 删除1.7的svn sudo rm /usr/bin/svn 2.使用brew安装 ...

  7. RT: np - new sbt project generation made simple(r)

    np - new sbt project generation made simple(r) As pointed out in the comments by @0__ below, there's ...

  8. python小练习,打出1-100之间的所有偶数,设计一个函数，在桌面上创建10个文件，并以数字命名,复利计算函数

    练习一:打出1-100之间的所有偶数 def even_print(): for i in range(1,101): if i % 2 == 0: print (i) even_print() #列 ...

  9. python-列表、字典、元组的员工信息处理接口（第二篇（五）：基于列表、字典和元组的员工信息处理接口）

    Python之旅]第二篇(五):基于列表.字典和元组的员工信息处理接口 python 列表 字典 元组 员工信息处理接口 摘要: 1.基本需求     编写一个查询员工信息表的程序,实现如下功能: ( ...

  10. codevs2492上帝造题的七分钟 2（线段树）

    /* 区间修改 区间查询 可以用线段树搞 但是一般的标记下放对这个题好像不合适 只能改叶子 然后更新父亲(虽然跑的有点慢) 小优化:如果某个点是1 就不用再开方了 所以搞一个f[i]标记 i 这个点还 ...