首頁猿問我怎樣才能讓圖像以一定的速度隨機(jī)地...

我怎樣才能讓圖像以一定的速度隨機(jī)地從屏幕上下來（視頻游戲 js）？

JavaScript

蝴蝶刀刀 2022-12-22 14:56:46

我正在構(gòu)建一個(gè)游戲，其中一艘宇宙飛船使用 PC 控制器進(jìn)入屏幕?，F(xiàn)在，我剩下的部分是讓一個(gè)火球圖像以精確的速度和數(shù)量從屏幕上隨機(jī)掉落（因?yàn)閳D像只有一個(gè)，我們必須將它相乘）。有人能做到嗎？這是代碼：火球圖片：<img src="Photo/fireball.png" id="fireball">飛船圖片：<img src="Photo/Spaceship1.png" id="icon-p">宇宙飛船隨控制器移動(dòng)+防止它離開屏幕：let display = document.getElementById("body");let rect = icon;let pos = { top: 1000, left: 570 };const keys = {};window.addEventListener("keydown", function(e) { keys[e.keyCode] = true});window.addEventListener("keyup", function(e) { keys[e.keyCode] = false});const loop = function() { if (keys[37] || keys[81]) { pos.left -= 10; } if (keys[39] || keys[68]) { pos.left += 10; } if (keys[38] || keys[90]) { pos.top -= 10; } if (keys[40] || keys[83]) { pos.top += 10; } var owidth = display.offsetWidth; var oheight = display.offsetHeight; var iwidth = rect.offsetWidth; var iheight = rect.offsetHeight; if (pos.left < 0) { pos.left = -10; } if (pos.top < 0) { pos.top = -10; } if (pos.left + iwidth >= owidth) { pos.left = owidth - iwidth; } if (pos.top + iheight >= oheight) { pos.top = oheight - iheight; } rect.setAttribute("data", owidth + ":" + oheight); rect.style.left = pos.left + "px"; rect.style.top = pos.top + "px";};let sens = setInterval(loop, 1000 / 60);

查看完整描述

2 回答

FFIVE

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊

// Random X coordiante

function rndScreenX(offset) {

return Math.floor(Math.random() * (window.innerWidth - offset));

}

// Set fireball coordinates (X is random)

let fireballElement = document.querySelector('#fireball');

let fireball = {

x: rndScreenX(fireballElement.offsetWidth),

y: 0

}

const loop = function() {

// Change fireball Y

fireball.y += 10;

fireballElement.style.top = fireball.y + 'px';

if (fireball.y > window.innerHeight) {

// Fireball is out of window

// Reset Y and get new random X

fireball.x = rndScreenX(fireballElement.offsetWidth);

fireballElement.style.left = fireball.x + 'px';

fireball.y = 0;

}

};

fireballElement.style.left = fireball.x + 'px';

let sens = setInterval(loop, 1000 / 60);

#fireball {

position: absolute;

/* Ignore this rule if you're using an image */

width: 50px;

height: 50px;

background: red;

border-radius: 40% 40% 50% 50%;

}

反對(duì) 回復(fù) 2022-12-22

有只小跳蛙

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊

該解決方案包括三個(gè)可配置變量：spawnRate、advanceRate和fallDistance。它使用它們來確定新火球產(chǎn)生的頻率、它們向下移動(dòng)屏幕的頻率以及它們?cè)诿總€(gè)“刻度”上移動(dòng)的距離。

腳本的“主要”部分由兩個(gè)setInterval調(diào)用組成，一個(gè)用于處理生成新的火球，另一個(gè)用于處理將它們推進(jìn)屏幕。

（有關(guān)進(jìn)一步說明，請(qǐng)參閱代碼內(nèi)注釋。）

const

display = document.getElementById("display"), // Container element

fireballs = [], // Array to hold all fireball objects

fallDistance = 6; // Measured in `vh` units (but could be whatever)

spawnRate = 2000,

advanceRate = 500;

// Adds the first fireball immediately

spawnFireball(fireballs);

// Moves all fireballs down every 500 milliseconds

const advancerTimer = setInterval(

function(){ advanceAll(fireballs, fallDistance, display); },

advanceRate

);

// Spawns a new fireball every 2000 milliseconds

const spawnerTimer = setInterval(

function(){ spawnFireball(fireballs); },

spawnRate

);

// Defines a function to add a fireball to the array

function spawnFireball(fireballs){

const

img = document.createElement("img"), // Element to add to screen

x = Math.floor(Math.random() * 96) + 2, // Random `x` position

y = 3; // `y` position starts near top of screen

img.src = "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.UyMqod0eO6Qcmco1Zrmj0QAAAA%26pid%3DApi&f=1",

img.classList.add("fireball"); // To style fireballs

img.style.left = x + "vw"; // `x` position will never change

newFb = { x, y, img }; // `fb` object includes coords + img element

fireballs.push(newFb); // Adds the new fireball to the array

}

// Defines a function to advance a fireball's position

function advance(fb, distance){

fb.y += distance;

}

// Defines a function to draw a fireball in the container

function draw(fb, container){

if(fb.y > 100){ return; } // Ignores below-screen fireballs

fb.img.style.top = fb.y + "vh"; // Updates the location on screen

container.appendChild(fb.img); // The `img` property holds our DOM element

}

// Defines a function to advance and draw all fireballs

function advanceAll(fireballs, distance, container){

for(let fb of fireballs){

advance(fb, distance);

draw(fb, container)

}

#display{ height: 99vh; width: 99vw; position: relative; }

.fireball{ height: 2em; width: 2em; position: absolute; }

反對(duì) 回復(fù) 2022-12-22

2 回答
0 關(guān)注
115 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

我怎樣才能讓圖像以一定的速度隨機(jī)地從屏幕上下來（視頻游戲 js）？

我怎樣才能讓圖像以一定的速度隨機(jī)地從屏幕上下來（視頻游戲 js）？

2 回答

添加回答

我怎樣才能讓圖像以一定的速度隨機(jī)地從屏幕上下來（視頻游戲 js）？

我怎樣才能讓圖像以一定的速度隨機(jī)地從屏幕上下來（視頻游戲 js）？