|
Сообщение от Irbitsky
|
|
начал изучать javascript
|
|
Сообщение от Irbitsky
|
|
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
|
Не нужно подключать эту устаревшую библиотеку, которая нужна для поддержки старых проектов.
Если вы хотите изучать фреймворки и библиотеки, то посмотрите следующие —
Svelte,
Stencil,
Vue или
React.
|
Сообщение от Irbitsky
|
|
setInterval
|
Когда что-то меняется на экране, то следует использовать requestAnimationFrame, для отмены запланированного — cancelAnimationFrame.
https://developer.mozilla.org/en-US/docs/Games/Anatomy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> interactive HTML 5 </title>
<style>
#game {
width: 500px; height: 500px;
user-select: none;
}
#heading {
display: inline-block;
padding: 0.5em 1em;
background: deeppink;
border-radius: 1em;
cursor: default;
}
</style>
</head>
<body>
<section id="game">
<h1 id="heading"></h1>
</section>
<script>
/* состояние */
const element = document.querySelector("#heading");
const number = ["0", "1", "2", "3", "You win"];
let x = 0, y = 0;
let f = 0, d = 1;
let z = 0;
/* управление состоянием */
element.addEventListener("click", event => {
if(z < 4) z++;
});
/* цикл игры */
let dt, lastT = performance.now(), requestId;
(function loop(t) {
requestId = requestAnimationFrame(loop);
dt = t - lastT;
lastT = t;
/* изменение состояния */
x += d * 0.1 * (z + 1) * dt;
y += f * 0.1 * (z + 1) * dt;
if (x > 500) {
d = 0; f = 1;
}
if (y > 500) {
d = -1; f = 0;
}
if (x <= 0) {
d = 0; f = -1;
}
if (y <= 0 && x <= 0) {
d = 1; f = 0;
}
if(z === 4) cancelAnimationFrame(requestId);
/* отрисовка состояния */
element.style.transform = `translate(${x}px, ${y}px)`;
element.textContent = number[z];
})(lastT);
</script>
</body>
</html>
Также узнайте про <canvas>