欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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引入了很多靜態(tài)編譯語言的特性，今天有一個類型需要著重討論下，這就是enum，需要的朋友們下面隨著小編來一起學習學習吧
    2021-06-06
  • 詳細聊聊對async/await的理解和用法

    詳細聊聊對async/await的理解和用法

    隨著Nodev7的發(fā)布,越來越多的人開始研究據說是異步編程終級解決方案的 async/await,這篇文章主要給大家介紹了關于對async/await的理解和用法,文中通過實例代碼介紹的介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • window.setInterval()方法的定義和用法及offsetLeft與style.left的區(qū)別

    window.setInterval()方法的定義和用法及offsetLeft與style.left的區(qū)別

    window.setInterval()方法可以按照指定的周期執(zhí)行來執(zhí)行一段程序。周期是以毫秒為單位的，本文給大家介紹window.setInterval()方法的定義和用法，感興趣的朋友參考下
    2015-11-11
  • JS實現自動定時切換的簡潔網頁選項卡效果

    JS實現自動定時切換的簡潔網頁選項卡效果

    這篇文章主要介紹了JS實現自動定時切換的簡潔網頁選項卡效果,涉及JavaScript基于時間函數定時觸發(fā)遍歷函數實現定時切換功能,需要的朋友可以參考下
    2015-10-10
  • JS生成唯一id的多種解決方案(非常實用)

    JS生成唯一id的多種解決方案(非常實用)

    在項目開發(fā)中我們常需要給某些數據定義一個唯一標識符,便于尋找關聯,這篇文章主要給大家介紹了關于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

最新評論