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