js實現(xiàn)坦克移動小游戲

更新時間：2019年10月28日 11:16:51 作者：KD-倘若沒有倘若

這篇文章主要為大家詳細介紹了js實現(xiàn)坦克移動小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js坦克移動的具體代碼，供大家參考，具體內容如下

先看看，js超簡單實現(xiàn)圖片旋轉：

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在瀏覽器中的event loop事件隊列示例詳解
大家都知道js是單線程的腳本語言,在同一時間只能做同一件事,為了協(xié)調事件、用戶交互、腳本、UI渲染和網絡處理等行為,防止主線程阻塞,Event Loop方案應運而生,這篇文章主要給大家介紹了關于js在瀏覽器中的event loop事件隊列的相關資料,需要的朋友可以參考下
2021-11-11
淺談gulp創(chuàng)建完整的項目流程
本篇文章主要介紹了淺談gulp創(chuàng)建完整的項目流程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
JavaScript canvas實現(xiàn)流星特效
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)流星特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
淺談Rx響應式編程
在學習Rx編程的過程中，理解Observable這個概念至關重要，常規(guī)學習過程中，通常需要進行多次碰壁才能逐漸開悟。這個有點像小時候學騎自行車，必須摔幾次才能掌握一樣。當然如果有辦法能言傳，則可以少走一些彎路，盡快領悟Rx的精妙
2021-06-06
js實現(xiàn)網頁五子棋進階版
這篇文章主要為大家詳細介紹了js實現(xiàn)網頁五子棋進階版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
JavaScript原型繼承_動力節(jié)點Java學院整理
這篇文章主要為大家詳細介紹了JavaScript原型繼承的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
微信小程序實現(xiàn)長按識別圖片二維碼(兩種方案)
這篇文章主要介紹了微信小程序實現(xiàn)長按識別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個屬性就可以了,本文結合實例代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
js fetch異步請求使用實例詳解
fetch是一種HTTP數(shù)據(jù)請求的方式,是XMLHttpRequest的一種替代方案,fetch不是ajax的進一步封裝,而是原生js,下面這篇文章主要給大家介紹了關于js fetch異步請求使用的相關資料,需要的朋友可以參考下
2021-11-11
得到當前行的值的javascript代碼
得到當前行的值的javascript代碼...
2007-06-06
js 內存釋放問題
這里之所以使用setTimeout()，因為可以徹底回收當前所有對象，防止變量之間的引用導致釋放失敗，可以當作一個保障措施，按照道理來說，這里不會執(zhí)行了。
2010-04-04