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>

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

您可能感兴趣的文章:

bootstrap table使用入门基本用法
这篇文章主要为大家详细介绍了bootstrap table使用入门基本用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JS操作图片(增,删,改) 例子
JS操作图片(增,删,改) 例子，需要的朋友可以参考一下
2013-04-04
跨域传值即主页面与iframe之间互相传值
主页面A 怎么向 iframe B 传递数据呢？iframe B 怎么向主页面A 传递数据，下面有不错的实现思路，感兴趣的朋友可以了解下
2013-12-12
javascript中数组和字符串的方法对比
下面小编就为大家带来一篇javascript中数组和字符串的方法对比。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
使用原生javascript开发计算器实例代码
这篇文章主要给大家介绍了关于如何使用原生javascript开发计算器的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
JS访问DOM节点方法详解
这篇文章主要介绍了JS访问DOM节点方法,结合实例形式较为详细的分析了JS访问DOM节点的相关函数与使用方法,需要的朋友可以参考下
2016-11-11
微信小程序渲染性能调优小结
这篇文章主要介绍了微信小程序渲染性能调优，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-07-07
微信小程序实现上传图片
这篇文章主要介绍了微信小程序实现上传图片，预览、删除、限制图片大小、张数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
JavaScript 下载链接图片后上传的实现
这篇文章主要介绍了JavaScript 下载链接图片后上传的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
点击A元素触发B元素的事件在IE8下会识别成A元素
IE8自动触发的事件源会识别成手动点击的元素就是点击A元素触发B元素的事件在IE8下会识别成A元素,需要的朋友可以参考下
2014-09-09