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

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

JavaScript

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

我正在構建一個游戲，其中一艘宇宙飛船使用 PC 控制器進入屏幕?，F在，我剩下的部分是讓一個火球圖像以精確的速度和數量從屏幕上隨機掉落（因為圖像只有一個，我們必須將它相乘）。有人能做到嗎？這是代碼：火球圖片：<img src="Photo/fireball.png" id="fireball">飛船圖片：<img src="Photo/Spaceship1.png" id="icon-p">宇宙飛船隨控制器移動+防止它離開屏幕：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貢獻1797條經驗獲得超6個贊

// 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%;

}

反對回復 2022-12-22

有只小跳蛙

TA貢獻1824條經驗獲得超8個贊

該解決方案包括三個可配置變量：spawnRate、advanceRate和fallDistance。它使用它們來確定新火球產生的頻率、它們向下移動屏幕的頻率以及它們在每個“刻度”上移動的距離。

腳本的“主要”部分由兩個setInterval調用組成，一個用于處理生成新的火球，另一個用于處理將它們推進屏幕。

（有關進一步說明，請參閱代碼內注釋。）

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; }

反對回復 2022-12-22

2 回答
0 關注
100 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

2 回答

添加回答

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