11.8 脚本网页星际逃生

<!DOCTYPE html>

<head>

<style>

/* 一、基础样式设置 */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

font-family: 'Arial', sans-serif;

overflow: hidden;

position: relative;

}

/* 二、游戏容器样式 - 改为竖屏模式 */

#gameContainer {

position: relative;

width: 100vw;

height: 100vh;

max-width: 600px;

max-height: 900px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 10px;

}

#gameCanvas {

border: 3px solid rgba(255, 255, 255, 0.3);

border-radius: 15px;

background: radial-gradient(ellipse at center, rgba(20, 20, 40, 0.9), rgba(0, 0, 0, 0.95));

box-shadow: 0 0 50px rgba(100, 100, 255, 0.3);

cursor: none;

display: block;

width: 100%;

height: auto;

max-height: 80vh;

}

/* 三、UI界面样式 - 适应竖屏 */

#gameInfo {

position: absolute;

top: 20px;

left: 20px;

color: #fff;

font-size: 18px;

text-shadow: 2px 2px 4px rgba(0,0,0,0.8);

background: rgba(0, 0, 0, 0.5);

padding: 15px;

border-radius: 10px;

backdrop-filter: blur(10px);

z-index: 10;

}

.info-item {

margin: 5px 0;

display: flex;

align-items: center;

}

.info-label {

color: #64b5f6;

margin-right: 10px;

}

.info-value {

color: #ffd54f;

font-weight: bold;

font-size: 20px;

}

/* 四、游戏结束界面 - 适应竖屏 */

#gameOver {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: #fff;

font-size: 32px;

text-align: center;

display: none;

background: rgba(0, 0, 0, 0.9);

padding: 30px;

border-radius: 20px;

backdrop-filter: blur(10px);

border: 2px solid rgba(255, 255, 255, 0.2);

z-index: 20;

width: 80%;

max-width: 400px;

}

#gameOver h2 {

color: #ff6b6b;

margin-bottom: 20px;

font-size: 36px;

}

#finalTime {

color: #4ecdc4;

font-size: 28px;

margin: 15px 0;

}

#startBtn {

padding: 15px 30px;

font-size: 20px;

background: linear-gradient(45deg, #4ecdc4, #44a3aa);

color: white;

border: none;

cursor: pointer;

margin-top: 20px;

border-radius: 30px;

transition: all 0.3s ease;

box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);

}

#startBtn:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(78, 205, 196, 0.6);

}

/* 五、警告提示样式 */

#warning {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: #ff1744;

font-size: 28px;

font-weight: bold;

text-shadow: 0 0 20px rgba(255, 23, 68, 0.8);

display: none;

animation: pulse 0.5s infinite;

z-index: 15;

}

@keyframes pulse {

0%, 100% {

opacity: 1;

transform: translate(-50%, -50%) scale(1);

}

50% {

opacity: 0.5;

transform: translate(-50%, -50%) scale(1.1);

}

/* 六、移动端适配 - 竖屏优化 */

@media (max-width: 768px) and (orientation: portrait) {

#gameContainer {

max-width: 100vw;

max-height: 100vh;

padding: 5px;

}

#gameInfo {

font-size: 16px;

padding: 10px;

}

.info-value {

font-size: 18px;

}

#gameOver {

font-size: 24px;

padding: 20px;

width: 90%;

}

#gameOver h2 {

font-size: 28px;

}

#finalTime {

font-size: 22px;

}

#startBtn {

padding: 12px 24px;

font-size: 18px;

}

#warning {

font-size: 22px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

// 一、游戏配置变量 - 改为竖屏模式，降低速度

const CONFIG = {

canvas: {

width: 600, // 改为竖屏比例

height: 800, // 改为竖屏比例

bgColor: 'rgba(17, 17, 17, 0.1)'

player: {

radius: 12,

speed: 3, // 降低玩家速度

color: '#ffffff',

glowColor: 'rgba(255, 255, 255, 0.2)'

bulletTypes: {

normal: {

color: '#ff6b6b',

speed: 2, // 降低子弹速度

radius: 5

fast: {

color: '#4ecdc4',

speed: 3, // 降低子弹速度

radius: 4

large: {

color: '#ffe66d',

speed: 1.5, // 降低子弹速度

radius: 15

split: {

color: '#a8e6cf',

speed: 2, // 降低子弹速度

radius: 6,

split: true

rotating: {

color: '#ff8b94',

speed: 2.5, // 降低子弹速度

radius: 7,

rotating: true

teleport: {

color: '#c7ceea',

speed: 2, // 降低子弹速度

radius: 8,

teleport: true

sudden: {

color: '#ff1744',

speed: 2.5, // 降低子弹速度

radius: 10,

sudden: true

}

game: {

initialDifficulty: 3,

difficultyIncreaseInterval: 5,

specialAttackInterval: 180,

particleCount: 15,

invulnerableTime: 120

effects: {

warningDuration: 1000,

particleLife: 40,

trailOpacity: 0.1

}

};

// 二、游戏状态变量

let canvas, ctx;

let gameRunning = true;

let startTime = Date.now();

let difficulty = CONFIG.game.initialDifficulty;

let bullets = [];

let particles = [];

let specialAttackTimer = 0;

// 三、玩家对象

const player = {

x: CONFIG.canvas.width / 2,

y: CONFIG.canvas.height / 2,

radius: CONFIG.player.radius,

speed: CONFIG.player.speed,

invulnerable: 0

};

// 四、输入控制变量

let mouseX = player.x;

let mouseY = player.y;

let touchActive = false;

// 五、初始化函数

function init() {

// 1. 获取画布和上下文

canvas = document.getElementById('gameCanvas');

ctx = canvas.getContext('2d');

// 2. 设置画布尺寸 - 适应竖屏

resizeCanvas();

window.addEventListener('resize', resizeCanvas);

// 3. 绑定事件监听器

setupEventListeners();

// 4. 开始游戏循环

gameLoop();

}

// 六、画布尺寸调整 - 适应竖屏

function resizeCanvas() {

const container = document.getElementById('gameContainer');

const containerWidth = container.clientWidth - 10;

const containerHeight = container.clientHeight - 100;

// 计算缩放比例，优先保证高度填满屏幕

const scale = Math.min(

containerWidth / CONFIG.canvas.width,

containerHeight / CONFIG.canvas.height,

);

canvas.width = CONFIG.canvas.width * scale;

canvas.height = CONFIG.canvas.height * scale;

canvas.style.width = canvas.width + 'px';

canvas.style.height = canvas.height + 'px';

// 调整玩家初始位置

player.x = canvas.width / 2;

player.y = canvas.height / 2;

}

// 七、事件监听器设置

function setupEventListeners() {

// 1. 鼠标移动事件

canvas.addEventListener('mousemove', handleMouseMove);

// 2. 触摸事件

canvas.addEventListener('touchstart', handleTouchStart, { passive: false });

canvas.addEventListener('touchmove', handleTouchMove, { passive: false });

canvas.addEventListener('touchend', handleTouchEnd);

// 3. 防止页面滚动

document.body.addEventListener('touchmove', preventDefault, { passive: false });

}

// 八、输入处理函数

function handleMouseMove(e) {

const rect = canvas.getBoundingClientRect();

mouseX = (e.clientX - rect.left) * (CONFIG.canvas.width / rect.width);

mouseY = (e.clientY - rect.top) * (CONFIG.canvas.height / rect.height);

}

function handleTouchStart(e) {

e.preventDefault();

touchActive = true;

const touch = e.touches[0];

const rect = canvas.getBoundingClientRect();

mouseX = (touch.clientX - rect.left) * (CONFIG.canvas.width / rect.width);

mouseY = (touch.clientY - rect.top) * (CONFIG.canvas.height / rect.height);

}

function handleTouchMove(e) {

e.preventDefault();

if (touchActive) {

const touch = e.touches[0];

const rect = canvas.getBoundingClientRect();

mouseX = (touch.clientX - rect.left) * (CONFIG.canvas.width / rect.width);

mouseY = (touch.clientY - rect.top) * (CONFIG.canvas.height / rect.height);

}

function handleTouchEnd(e) {

e.preventDefault();

touchActive = false;

}

function preventDefault(e) {

if (e.target === canvas) {

e.preventDefault();

}

// 九、子弹创建函数

function createBullet(type, x, y, angle) {

const bullet = {

type: type,

x: x,

y: y,

vx: Math.cos(angle) * type.speed,

vy: Math.sin(angle) * type.speed,

radius: type.radius,

color: type.color,

angle: angle

};

if (type.rotating) {

bullet.rotationAngle = 0;

}

if (type.teleport) {

bullet.teleportTimer = Math.random() * 60 + 30;

}

if (type.sudden) {

bullet.warningTime = 30;

}

bullets.push(bullet);

}

// 十、弹幕生成系统

function spawnBullets() {

// 1. 计算生成率

const spawnRate = Math.max(15 - difficulty, 5);

// 2. 随机生成子弹

if (Math.random() < 1 / spawnRate) {

createRandomBullet();

}

// 3. 特殊攻击计时

specialAttackTimer++;

if (specialAttackTimer > CONFIG.game.specialAttackInterval) {

specialAttackTimer = 0;

performSpecialAttack();

}

// 十一、随机子弹生成

function createRandomBullet() {

// 1. 随机选择生成位置 - 适应竖屏

const side = Math.floor(Math.random() * 4);

let x, y, angle;

switch(side) {

case 0: // 上方

x = Math.random() * canvas.width;

y = -20;

angle = Math.PI / 2 + (Math.random() - 0.5) * Math.PI / 3;

break;

case 1: // 右方

x = canvas.width + 20;

y = Math.random() * canvas.height;

angle = Math.PI + (Math.random() - 0.5) * Math.PI / 3;

break;

case 2: // 下方

x = Math.random() * canvas.width;

y = canvas.height + 20;

angle = -Math.PI / 2 + (Math.random() - 0.5) * Math.PI / 3;

break;

case 3: // 左方

x = -20;

y = Math.random() * canvas.height;

angle = (Math.random() - 0.5) * Math.PI / 3;

break;

}

// 2. 随机选择子弹类型

const types = Object.values(CONFIG.bulletTypes);

const bulletType = types[Math.floor(Math.random() * types.length)];

createBullet(bulletType, x, y, angle);

}

// 十二、特殊攻击系统

function performSpecialAttack() {

const attackType = Math.floor(Math.random() * 3);

switch(attackType) {

case 0:

suddenAttack();

break;

case 1:

circleAttack();

break;

case 2:

teleportAttack();

break;

}

// 十三、特殊攻击类型

function suddenAttack() {

showWarning();

setTimeout(() => {

for (let i = 0; i < 5; i++) {

const angle = Math.random() * Math.PI * 2;

const distance = 100 + Math.random() * 200;

const x = player.x + Math.cos(angle) * distance;

const y = player.y + Math.sin(angle) * distance;

const targetAngle = Math.atan2(player.y - y, player.x - x);

createBullet(CONFIG.bulletTypes.sudden, x, y, targetAngle);

}

}, CONFIG.effects.warningDuration);

}

function circleAttack() {

const centerX = canvas.width / 2;

const centerY = canvas.height / 2;

const bulletCount = 12 + difficulty * 2;

for (let i = 0; i < bulletCount; i++) {

const angle = (i / bulletCount) * Math.PI * 2;

createBullet(CONFIG.bulletTypes.rotating, centerX, centerY, angle);

}

function teleportAttack() {

const count = 3 + Math.floor(difficulty / 2);

for (let i = 0; i < count; i++) {

setTimeout(() => {

const x = Math.random() * canvas.width;

const y = Math.random() * canvas.height;

const angle = Math.random() * Math.PI * 2;

createBullet(CONFIG.bulletTypes.teleport, x, y, angle);

}, i * 200);

}

// 十四、警告显示

function showWarning() {

const warning = document.getElementById('warning');

warning.style.display = 'block';

setTimeout(() => {

warning.style.display = 'none';

}, CONFIG.effects.warningDuration);

}

// 十五、子弹更新系统

function updateBullets() {

for (let i = bullets.length - 1; i >= 0; i--) {

const bullet = bullets[i];

// 1. 处理突然子弹警告

if (bullet.type.sudden && bullet.warningTime > 0) {

bullet.warningTime--;

if (bullet.warningTime <= 0) {

bullet.vx = Math.cos(bullet.angle) * bullet.type.speed;

bullet.vy = Math.sin(bullet.angle) * bullet.type.speed;

}

continue;

}

// 2. 处理旋转子弹

if (bullet.type.rotating) {

bullet.rotationAngle += 0.08;

bullet.vx = Math.cos(bullet.angle + bullet.rotationAngle) * bullet.type.speed;

bullet.vy = Math.sin(bullet.angle + bullet.rotationAngle) * bullet.type.speed;

}

// 3. 处理传送子弹

if (bullet.type.teleport) {

bullet.teleportTimer--;

if (bullet.teleportTimer <= 0) {

createParticles(bullet.x, bullet.y, bullet.color);

bullet.x = Math.random() * canvas.width;

bullet.y = Math.random() * canvas.height;

bullet.teleportTimer = Math.random() * 60 + 30;

}

// 4. 更新位置

bullet.x += bullet.vx;

bullet.y += bullet.vy;

// 5. 处理分裂子弹

if (bullet.type.split && Math.random() < 0.01) {

for (let j = 0; j < 3; j++) {

const newAngle = bullet.angle + (j - 1) * Math.PI / 4;

createBullet(CONFIG.bulletTypes.fast, bullet.x, bullet.y, newAngle);

}

createParticles(bullet.x, bullet.y, bullet.color);

bullets.splice(i, 1);

continue;

}

// 6. 移除超出边界的子弹

if (bullet.x < -50 || bullet.x > canvas.width + 50 ||

bullet.y < -50 || bullet.y > canvas.height + 50) {

bullets.splice(i, 1);

}

// 十六、粒子效果系统

function createParticles(x, y, color) {

for (let i = 0; i < CONFIG.game.particleCount; i++) {

particles.push({

x: x,

y: y,

vx: (Math.random() - 0.5) * 8,

vy: (Math.random() - 0.5) * 8,

radius: Math.random() * 4 + 1,

color: color,

life: CONFIG.effects.particleLife

});

}

function updateParticles() {

for (let i = particles.length - 1; i >= 0; i--) {

const particle = particles[i];

particle.x += particle.vx;

particle.y += particle.vy;

particle.vx *= 0.95;

particle.vy *= 0.95;

particle.life--;

particle.radius *= 0.96;

if (particle.life <= 0) {

particles.splice(i, 1);

}

// 十七、碰撞检测系统

function checkCollisions() {

if (player.invulnerable > 0) {

player.invulnerable--;

return;

}

for (let bullet of bullets) {

const dx = player.x - bullet.x;

const dy = player.y - bullet.y;

const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < player.radius + bullet.radius) {

createParticles(player.x, player.y, CONFIG.player.color);

gameOver();

return;

}

// 十八、游戏状态管理

function gameOver() {

gameRunning = false;

const survivalTime = Math.floor((Date.now() - startTime) / 1000);

document.getElementById('finalTime').textContent = survivalTime;

document.getElementById('gameOver').style.display = 'block';

}

function resetGame() {

gameRunning = true;

startTime = Date.now();

difficulty = CONFIG.game.initialDifficulty;

bullets = [];

particles = [];

specialAttackTimer = 0;

player.x = canvas.width / 2;

player.y = canvas.height / 2;

player.invulnerable = 0;

document.getElementById('gameOver').style.display = 'none';

}

// 十九、绘制系统

function draw() {

// 1. 清除画布（带拖尾效果）

ctx.fillStyle = CONFIG.canvas.bgColor;

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 2. 绘制粒子

particles.forEach(particle => {

ctx.beginPath();

ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);

ctx.fillStyle = particle.color;

ctx.globalAlpha = particle.life / CONFIG.effects.particleLife;

ctx.fill();

ctx.globalAlpha = 1;

});

// 3. 绘制子弹

bullets.forEach(bullet => {

// 突然子弹警告效果

if (bullet.type.sudden && bullet.warningTime > 0) {

ctx.beginPath();

ctx.arc(bullet.x, bullet.y, bullet.radius + 15, 0, Math.PI * 2);

ctx.strokeStyle = `rgba(255, 23, 68, ${bullet.warningTime / 30})`;

ctx.lineWidth = 2;

ctx.stroke();

}

// 子弹主体

ctx.beginPath();

ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);

ctx.fillStyle = bullet.color;

ctx.fill();

// 子弹光晕

ctx.beginPath();

ctx.arc(bullet.x, bullet.y, bullet.radius + 3, 0, Math.PI * 2);

ctx.strokeStyle = bullet.color;

ctx.globalAlpha = 0.5;

ctx.lineWidth = 1;

ctx.stroke();

ctx.globalAlpha = 1;

});

// 4. 绘制玩家

ctx.beginPath();

ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);

ctx.fillStyle = player.invulnerable > 0 ? 'rgba(255, 255, 255, 0.5)' : CONFIG.player.color;

ctx.fill();

// 玩家光晕

ctx.beginPath();

ctx.arc(player.x, player.y, player.radius + 8, 0, Math.PI * 2);

ctx.strokeStyle = CONFIG.player.glowColor;

ctx.lineWidth = 2;

ctx.stroke();

}

// 二十、游戏更新系统

function update() {

if (!gameRunning) return;

// 1. 更新玩家位置

updatePlayerPosition();

// 2. 更新难度

updateDifficulty();

// 3. 生成弹幕

spawnBullets();

// 4. 更新游戏对象

updateBullets();

updateParticles();

// 5. 碰撞检测

checkCollisions();

}

function updatePlayerPosition() {

const dx = mouseX - player.x;

const dy = mouseY - player.y;

const distance = Math.sqrt(dx * dx + dy * dy);

if (distance > 1) {

player.x += (dx / distance) * player.speed;

player.y += (dy / distance) * player.speed;

}

// 限制玩家在画布内

player.x = Math.max(player.radius, Math.min(canvas.width - player.radius, player.x));

player.y = Math.max(player.radius, Math.min(canvas.height - player.radius, player.y));

}

function updateDifficulty() {

const currentTime = Math.floor((Date.now() - startTime) / 1000);

difficulty = CONFIG.game.initialDifficulty + Math.floor(currentTime / CONFIG.game.difficultyIncreaseInterval);

// 更新UI

document.getElementById('time').textContent = currentTime;

document.getElementById('difficulty').textContent = difficulty;

}

// 二十一、游戏主循环

function gameLoop() {

update();

draw();

requestAnimationFrame(gameLoop);

}

// 二十二、启动游戏

window.addEventListener('DOMContentLoaded', init);

</script>

</body>

</html>

11.8 脚本网页 星际逃生

11.8 脚本网页星际逃生