编程 Javascript

js实现坦克移动小游戏

Posted in Javascript onOctober 28, 2019

本文实例为大家分享了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>

js实现坦克移动小游戏

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

js实现坦克移动小游戏

- Author -

KD-倘若没有倘若

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 学习笔记错误处理

Jul 30 Javascript

JavaScript在IE和FF下的兼容性问题

May 19 Javascript

判断在css加载完毕后执行后续代码示例

Sep 03 Javascript

JavaScript中定义函数的三种方法

Mar 12 Javascript

详解JavaScript中的异常处理方法

Jun 16 Javascript

基于Jquery代码实现手风琴菜单

Nov 19 Javascript

Web前端框架Angular4.0.0 正式版发布

Mar 28 Javascript

jquery animate动画持续运动的实例

Nov 29 jQuery

vue进行图片的预加载watch用法实例讲解

Feb 07 Javascript

Vue 实现CLI 3.0 + momentjs + lodash打包时优化

Nov 13 Javascript

JS检索下拉列表框中被选项目的索引号(selectedIndex)

Dec 17 Javascript

详解JS WebSocket断开原因和心跳机制

May 07 Javascript

vue 实现走马灯效果

Oct 28 #Javascript

JS实现json数组排序操作实例分析

Oct 28 #Javascript

VUE渲染后端返回含有script标签的html字符串示例

Oct 28 #Javascript

vue实现在v-html的html字符串中绑定事件

Oct 28 #Javascript

vue 实现input表单元素的disabled示例

Oct 28 #Javascript

jquery validate 实现动态增加/删除验证规则操作示例

Oct 28 #jQuery

VUE解决 v-html不能触发点击事件的问题

Oct 28 #Javascript