-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 6103f0f
Showing
8 changed files
with
550 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/.vscode |
Binary file not shown.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
html, | ||
body { | ||
height: 100%; | ||
margin: 0; | ||
padding: 0; | ||
overflow: hidden; | ||
} | ||
|
||
button { | ||
position: absolute; | ||
width: 150px; | ||
height: 50px; | ||
border: none; | ||
color: white; | ||
text-align: center; | ||
text-decoration: none; | ||
display: inline-block; | ||
font-size: 18px; | ||
border-radius: 15px; | ||
transition: background-color 0.3s ease; | ||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); | ||
} | ||
|
||
div { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
right: 0; | ||
bottom: 0; | ||
} | ||
|
||
#printSans { | ||
background-color: #505050; | ||
top: 50%; | ||
left: 50%; | ||
transform: translate(-50%, -50%); | ||
} | ||
|
||
#printSans:hover { | ||
background-color: #000000; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!-- | ||
* @Author: FlowerCity [email protected] | ||
* @Date: 2024-08-31 21:45:39 | ||
* @LastEditors: FlowerCity [email protected] | ||
* @LastEditTime: 2024-09-06 22:01:49 | ||
* @FilePath: \WebTools\www\index.html | ||
--> | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Start</title> | ||
<link rel="stylesheet" type="text/css" href="index.css"> | ||
<script src="sansImage.js"></script> | ||
</head> | ||
|
||
<body> | ||
<div id="main"> | ||
<button id="printSans">Start Game</button> | ||
<script src="index.js"></script> | ||
</div> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
function getRandomInt(min, max) { | ||
return Math.floor(Math.random() * (max - min + 1)) + min; | ||
} | ||
|
||
var sans = []; | ||
for (let i = 0; i < sansImage.length; i++) { | ||
for (let j = 0; j < sansImage[i].length; j++) { | ||
if (sansImage[i][j] != ' ') { | ||
sans.push({ x: i, y: j, content: sansImage[i][j] }); | ||
} | ||
} | ||
} | ||
|
||
const offsetX = sansImage[0].length * 1.7; // 根据需要调整间距 | ||
const offsetY = sansImage.length * 2; // 根据需要调整间距 | ||
|
||
function createCharacter(id, startX, startY) { | ||
let character = document.createElement("div"); | ||
document.getElementById("main").appendChild(character); | ||
character.textContent = sans[id].content; | ||
character.classList.add("character"); | ||
character.style.position = "absolute"; | ||
character.style.top = `${startX}px`; | ||
character.style.left = `${startY}px`; | ||
|
||
// 计算目标位置 | ||
const targetX = startX + (sans[id].y * 2 - offsetX); | ||
const targetY = startY + (sans[id].x * 3.9 - offsetY); | ||
|
||
const deltaX = targetX - startX; | ||
const deltaY = targetY - startY; | ||
|
||
const angle = Math.atan2(deltaY, deltaX); // 计算角度(弧度) | ||
const speed = 10; // 设定一个恒定速度 | ||
let time = 0; | ||
console.log(startX, startY, targetX, targetY, deltaX, deltaY); | ||
function animate() { | ||
const x = speed * time * Math.cos(angle); | ||
const y = speed * time * Math.sin(angle); | ||
character.style.transform = `translate(${x}px, ${y}px)`; | ||
|
||
// 计算当前字符的位置 | ||
const currentX = startX + x; | ||
const currentY = startY + y; | ||
|
||
// 检查是否到达目标位置 | ||
if (Math.abs(currentX - targetX) < speed && Math.abs(currentY - targetY) < speed) { | ||
character.style.transform = `translate(${deltaX}px, ${deltaY}px)`; // 确保字符精确到达目标位置 | ||
return; // 停止动画 | ||
} | ||
|
||
requestAnimationFrame(animate); | ||
time += 0.1; | ||
} | ||
|
||
animate(); | ||
} | ||
|
||
var button = document.getElementById("printSans"); | ||
button.addEventListener("click", printSans); | ||
|
||
function printSans() { | ||
for (let i = 0; i < sans.length; i++) { | ||
setTimeout(() => createCharacter(i, window.innerWidth / 2, window.innerHeight / 2), 1); | ||
button.style.opacity = `${100 - i / sans.length}`; | ||
} | ||
} |
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.