脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js坦克移动

js实现坦克移动小游戏

 更新时间：2019年10月28日 11:16:51   作者：KD-倘若没有倘若  
这篇文章主要为大家详细介绍了js实现坦克移动小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js坦克移动的具体代码，供大家参考，具体内容如下

先看看，js超简单实现图片旋转：

var current = 180;//需要反转的角度
tank.style.transform = 'rotate('+current+'deg)';//在style里的transform赋值'rotate('+current+'deg)'

–附：简易的小坦克移动js小游戏
（注：键盘上的上下左右键 键值分别是37、38、39、40）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div id='container'>
  <img src="tank.png" alt="" id='tank'>
 </div>
</body>
<script>
 container.style="width:1000px;height:800px;border:3px solid;";
 tank.style="width:200px;height:200px;position:relative;top:0px;left:0px;"
 document.body.onkeydown=function(){
  var current = 0;
  var top = parseInt(tank.style.top);
  var left = parseInt(tank.style.left);
  var code = event.keyCode;
  if(code == 37) {
   current = 180;
   tank.style.transform = 'rotate('+current+'deg)';
   if(left <= 0) {
    alert("您已经到最左边了！");
   }
   else{
    tank.style.left = (left-10) +"px";
   }
  }
  if(code == 38) {
   current =270;
   tank.style.transform = 'rotate('+current+'deg)';
   if(top <= 0) {
    alert("您已经到最上边了！");
   }
   else{
    tank.style.top = (top-10) +"px";
   }
  }
  if(code == 39) {
   current = 0;
   tank.style.transform = 'rotate('+current+'deg)';
   if(left+parseInt(tank.width)+6 >= 1000) {
    alert("您已经到最右边了！");
   }
   else{
    tank.style.left = (left+10) +"px";
   }
  }
  if(code == 40) {
   current = 90;
   tank.style.transform = 'rotate('+current+'deg)';
   if(top+parseInt(tank.width)+6 >= 800) {
    alert("您已经到最下边了！");
   }
   else{
    tank.style.top = (top+10) +"px";
   }
  }
 }
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Javascript异步编程之你真的懂Promise吗

    Javascript异步编程之你真的懂Promise吗

    这篇文章主要介绍了Javascript异步编程之Promise，想了解异步编程和Promise的同学，可以参考下
    2021-04-04
  • 小程序实现列表点赞功能

    小程序实现列表点赞功能

    这篇文章主要为大家详细介绍了小程序实现列表点赞功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 为什么TypeScript的Enum会出现问题

    为什么TypeScript的Enum会出现问题

    TypeScript引入了很多静态编译语言的特性，今天有一个类型需要着重讨论下，这就是enum，需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • 详细聊聊对async/await的理解和用法

    详细聊聊对async/await的理解和用法

    随着Nodev7的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await,这篇文章主要给大家介绍了关于对async/await的理解和用法,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    window.setInterval()方法可以按照指定的周期执行来执行一段程序。周期是以毫秒为单位的，本文给大家介绍window.setInterval()方法的定义和用法，感兴趣的朋友参考下
    2015-11-11
  • JS实现自动定时切换的简洁网页选项卡效果

    JS实现自动定时切换的简洁网页选项卡效果

    这篇文章主要介绍了JS实现自动定时切换的简洁网页选项卡效果,涉及JavaScript基于时间函数定时触发遍历函数实现定时切换功能,需要的朋友可以参考下
    2015-10-10
  • JS生成唯一id的多种解决方案(非常实用)

    JS生成唯一id的多种解决方案(非常实用)

    在项目开发中我们常需要给某些数据定义一个唯一标识符,便于寻找关联,这篇文章主要给大家介绍了关于JS生成id的多种解决方案,文中介绍的方法都非常实用,需要的朋友可以参考下
    2023-10-10
  • js实现select跳转菜单新窗口效果代码分享

    js实现select跳转菜单新窗口效果代码分享

    这篇文章主要介绍了js实现select跳转菜单新窗口效果代码分享，实现很简单，推荐给大家，有需要的小伙伴可以参考下
    2015-08-08
  • 详谈javascript中的cookie

    详谈javascript中的cookie

    cookie其实就是网站放在用户机器上的一小块信息，cookie对于用户来说是唯一的，网站可判断用户上次访问网站的时间，以及他访问了哪些页面，可用于在某个网站跟踪你访问的页面，但无法用它来获取个人信息。
    2015-06-06
  • 微信小程序封装的HTTP请求示例【附升级版】

    微信小程序封装的HTTP请求示例【附升级版】

    这篇文章主要介绍了微信小程序封装的HTTP请求,结合实例形式分析了微信小程序封装基于wx.request方法的http请求相关操作与使用技巧,并附带升级版示例供大家参考,需要的朋友可以参考下
    2019-05-05

最新评论