肃宁一中艺术节
当前位置:肃宁一中艺术节 > IT相关 > 游戏开发 > 正文  |  快速导航:行业资讯 软件测试 风云人物 计算机英语 游戏开发 移动应用 地图开发 算法 程序员
  • 甩生歌:JS键盘移动图片 飞行小游戏

  • 字号:[ ]2014-1-21 12:01:55  阅读:138次  来源:乐猪网  编辑:银河精灵  收藏
  • 摘要:本内容主要举一个简单的小例子说明使用JavaScript如何实现在固定的范围内利用键盘移动图片,模仿街机里的射击游戏里的小飞机,使用JavaScript如何实现控制飞行物体。
  • 肃宁一中艺术节 www.sdaiyun.cn 小的时候,很喜欢跑到游戏机室里玩哪些飞机射击游戏,不过玩得不熟,每次很快就 Game Over 了!从事编程工作之后,我就想,这些飞机射击游戏是如何实现的,如果利用 JavaScript 能否做出简单类似的飞行游戏呢!

    我想,不论多么复杂的程序都是由最基本的小程序组合而成的,所以,今天先来实现键盘控制飞行的物体吧!

    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
    <title>键盘移动图片</title> 
    <style type="text/css"> 
    html  
    { 
        overflow:hidden; 
    } 
    body 
    { 
        margin:0px; 
        padding:0px; 
        background:#FFF; 
        width:100%; 
        height:100%; 
    } 
    </style> 
    </head> 
    <body> 
      
    </body> 
    </html> 
      
    <script type="text/javascript"> 
    var x; 
    var y; 
    var step = 10; 
    var bodyWidth  = document.documentElement.offsetWidth;  //获取页面的可视宽度 
    var bodyHeight = document.documentElement.offsetHeight; //获取页面的可视高度 
    var flyer = document.createElement("img");              //创建图片对象 
    flyer.src = "../../../../Images/Flyer/plane.png"; 
    flyer.style.left = (bodyWidth / 2) - (64 / 2); 
    flyer.style.top  = bodyHeight - 64 - 10; 
    flyer.style.position = "absolute"; 
    document.body.appendChild(flyer);                       //把图片添加到页面 
    x = flyer.style.pixelLeft; 
    y = flyer.style.pixelTop; 
    function MovePlane() { 
        var code = event.keyCode; 
        switch(code) { 
            case 37: //左 
                if (x - step >= 10) { 
                    x -= step; 
                    flyer.style.left = x; 
                } 
                break; 
            case 38: //上 
                if (y >= 10) { 
                    y -= step; 
                    flyer.style.top = y; 
                } 
                break; 
            case 39: //右 
                if (x + step <= bodyWidth - 64 - 10) { 
                    x += step; 
                    flyer.style.left = x; 
                } 
                break; 
            case 40: //下 
                if (y <= bodyHeight - 64 - 10) { 
                    y += step; 
                    flyer.style.top = y; 
                } 
                break; 
        } 
    } 
    document.onkeydown = MovePlane; 
    </script>

    效果图:

    虽然,这功能看起来很简单,但只要一步一步往下实现,我相信终有一天会实现自己的飞行射击小游戏的!

  • 顶一下
    (0)
    0%
    踩一下
    (0)
    0%
肃宁一中艺术节 版权所有 Copyright © 2012-2015 www.sdaiyun.cn All rights reserved.
本站用于学习交流,部分文章来源于网络,如果不慎侵犯了您的权益,请联系我们删除!
粤ICP备12000837号
武汉助孕包成功 | 上海代孕机构 | 代孕 | 深圳代孕 | 广州代怀孕 |
  • 三部门要求全面清理规范地方性车辆通行费减免政策_伍声上非诚勿扰 2019-08-25
  • 武汉动漫展现强劲原创力 "三国""武当"成热门IP_升派增发精华液 2019-08-25
  • 73岁男子因家庭矛盾杀害孙子及前儿媳 被当场抓获 _职务职称 2019-08-25
  • 廊坊—新华网河北频道_黑色烬丝长袍 2019-08-24
  • 内蒙古乌兰察布:厚培新兴产业闯新路_任东远 2019-08-24
  • 在政协第十二届河南省委员会第一次会议闭幕会上的讲话 _wow完成轮回 2019-08-24
  • 廊坊—新华网河北频道_奶粉团怎么样 2019-08-23
  • 邻邦扫描:韩海军发生事故1死3伤 韩军新研武器应对兵力减少_林秋鸾 2019-08-23
  • 柳江区税务局释放政策红利助力企业发展_优汇返利网 2019-08-23
  • 河北信息通信行业持续提升网络供给能力_mrtalk 2019-08-23
  • 武汉蔡甸消泗5万亩油菜花海等你来赏 交通指南看这里_古池黑水 2019-08-22
  • 平江将以“两手抓”强力推进天岳幕阜山建设——新华网——湖南_久住小春chance 2019-08-22
  • 福建网络辟谣举报平台_法国兰蔲清脂减肥 2019-08-22
  • 网络时代的“礼拜六派”_青帮 2019-08-22
  • 武汉中考:6.32万名考生参加 就读优质高中的比例约为46%_台湾翠青 2019-08-21
  • 武汉助孕包成功 | 上海代孕机构 | 代孕 | 深圳代孕 | 广州代怀孕 |
  • 三部门要求全面清理规范地方性车辆通行费减免政策_伍声上非诚勿扰 2019-08-25
  • 武汉动漫展现强劲原创力 "三国""武当"成热门IP_升派增发精华液 2019-08-25
  • 73岁男子因家庭矛盾杀害孙子及前儿媳 被当场抓获 _职务职称 2019-08-25
  • 廊坊—新华网河北频道_黑色烬丝长袍 2019-08-24
  • 内蒙古乌兰察布:厚培新兴产业闯新路_任东远 2019-08-24
  • 在政协第十二届河南省委员会第一次会议闭幕会上的讲话 _wow完成轮回 2019-08-24
  • 廊坊—新华网河北频道_奶粉团怎么样 2019-08-23
  • 邻邦扫描:韩海军发生事故1死3伤 韩军新研武器应对兵力减少_林秋鸾 2019-08-23
  • 柳江区税务局释放政策红利助力企业发展_优汇返利网 2019-08-23
  • 河北信息通信行业持续提升网络供给能力_mrtalk 2019-08-23
  • 武汉蔡甸消泗5万亩油菜花海等你来赏 交通指南看这里_古池黑水 2019-08-22
  • 平江将以“两手抓”强力推进天岳幕阜山建设——新华网——湖南_久住小春chance 2019-08-22
  • 福建网络辟谣举报平台_法国兰蔲清脂减肥 2019-08-22
  • 网络时代的“礼拜六派”_青帮 2019-08-22
  • 武汉中考:6.32万名考生参加 就读优质高中的比例约为46%_台湾翠青 2019-08-21