快捷導(dǎo)航

js實(shí)現(xiàn)坦克移動(dòng)小游戲

更新時(shí)間：2019年10月28日 11:16:51 作者：KD-倘若沒(méi)有倘若

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

本文實(shí)例為大家分享了js坦克移動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

先看看，js超簡(jiǎn)單實(shí)現(xiàn)圖片旋轉(zhuǎn)：

var current = 180;//需要反轉(zhuǎn)的角度
tank.style.transform = 'rotate('+current+'deg)';//在style里的transform賦值'rotate('+current+'deg)'

–附：簡(jiǎn)易的小坦克移動(dòng)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("您已經(jīng)到最左邊了！");
   }
   else{
    tank.style.left = (left-10) +"px";
   }
  }
  if(code == 38) {
   current =270;
   tank.style.transform = 'rotate('+current+'deg)';
   if(top <= 0) {
    alert("您已經(jīng)到最上邊了！");
   }
   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("您已經(jīng)到最右邊了！");
   }
   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("您已經(jīng)到最下邊了！");
   }
   else{
    tank.style.top = (top+10) +"px";
   }
  }
 }
</script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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