js 超级玛丽(未完成)

<!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: 50%;
            left: 44%;
        }
        .hide{
            display:none;
        }
        .kuop{
            background:#000;
            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 = 10;
        function keyup(event){
            var keycode = event.keyCode; 

            switch(keycode)
            {
                case 37:
                    imgs.style.left = (imgs.offsetLeft + modes*-1)+‘px‘;
                    break;
                case 38:
                    imgs.style.top = (imgs.offsetTop + modes*-1)+‘px‘;
                    break;
                case 39:
                    imgs.style.left = (imgs.offsetLeft + modes)+‘px‘;
                    break;
                case 40:
                    imgs.style.top = (imgs.offsetTop + modes)+‘px‘;
                    break;
            }

        }

    </script>
</body>
</html>
时间: 2024-10-11 11:20:52

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

附件上传 js(未完成)

1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 5 <script type="text/javascript"> 6 function ShowImg(obj) { 7 alert(obj.toString()); 8 var docObj = docum

web前端开发视频教程全集下载 WEB前端网页设计教程

轻松搞定网页设计(html.css.js),全集共54讲!免费分享!更多好资源,尽在齐学网!!!!!! 第0讲.开山篇第1讲.html介绍第2讲.html项目演示.运行原理.开发工具.html文件结构.标记和元素.属性.符号~第3讲.超链接href.图像image.表格table第4讲.html菜谱页面练习第5讲.html无序列表.有序列表.框架和综合练习第6讲.html表单form元素.各种input元素.常用元素综合案例第7讲.html加强(各种字体.Entities)第8讲.html加强(

Angungular.js 的过滤器 select http 未完成

js高级程序设计第八章BOM(未完成,待续)

8.1window对象 BOM的核心对象是window,表示浏览器的一个实例. window对象有双重角色,既可以通过就是访问浏览器窗口的接口,又是ECMAscript规定的Global对象 8.1.1全局作用域 定义全局变量与在window对象上直接定义属性的差别在于全局变量不能通过delete操作符删除,而直接子啊window对象的定义的属性可以 常识访问未声明的变量会抛出错误.但是通过查询window对象可以知道某个未声明的变量是否存在 8.1.2 窗口关系及框架 如果页面中有frames

JS中“==”和“===”的区别(未完成)

1.为什么讨论这个问题? - 有个说法,尽量不用==,而使用===,是这样吗? 2.分析问题,原理是什么? 下面说说ECMAScript 5 language specification里的说明: 1)两种比较方法 全等号===只考虑类型相同的值的比较,不同类型使用===进行比较,返回false 双等号==会先将不同类型的值转为相同类型,然后使用全等号进行比较. 使用双等号会有两个问题: ● 转换规则可能不是你期望的那样 ● 由于双等号是宽容的,类型错误可能会被忽略掉. 2)全等号===(严格等

Day67:JS实现的ajax

JS实现的ajax AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成的.也就是说,我们只需要学习一个Javascript的新对象即可. ? 1 var xmlHttp = new XMLHttpRequest():(大多数浏览器都支持DOM2规范) 注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来

JS Promise API

一.描述 我们知道JavaScript语言的执行环境是"单线程",所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以继续下一个任务. 这种"单线程"的好处就是实现起来比较简单,容易操作:坏处就是容易造成阻塞,因为队列中如果有一个任务耗时比较长,那么后面的任务都无法快速执行,或导致页面卡在某个状态上,给用户的体验很差. 一直以来,JavaScript处理异步都是以callback的方式,在前端开发领域callback机制几乎深

Node.js(十二)——NodeJs中的Promise

爬虫基于回调和事件的方式去实现,回调也是被诟病已久的问题尤其是callback这种,无论是阅读还是调试都很费劲,甚至我们连代码的堆栈都看不到,这是一种反人类的写法,Promise来拜托这种痛苦的方式 传统方式实现动画效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Promise animation</title> <style&g

Vue.js 是什么

Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框