绿茵对决 网页触屏版

我给你一个可以直接粘贴到网页平台、打开就能玩的版本，就是网页HTML，手机浏览器打开就能玩👇

操作：

1. 全选复制下面所有代码

2. 打开 https://htmlpreview.github.io/
或者 https://www.w3schools.com/html/tryit.asp
粘贴进去，点运行，立刻出游戏！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>绿茵对决 网页触屏版</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#111;color:#fff;font-family:system-ui}
#wrap{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
#score{font-size:22px;margin:6px}
#gameBox{position:relative}
#field{background:#2e7d32;border:2px solid #fff}
#joystick{position:absolute;left:20px;bottom:20px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.2);touch-action:none}
#stick{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.5);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#btns{position:absolute;right:20px;bottom:20px;display:flex;gap:12px}
.btn{width:70px;height:70px;border-radius:50%;border:none;font-size:16px;font-weight:bold;color:white}
#passBtn{background:#3498db}
#shootBtn{background:#e74c3c}
</style>
</head>
<body>
<div id="wrap">
<div id="score">🔴你：0 ｜ 🤖AI：0</div>
<div id="gameBox">
<canvas id="field" width="720" height="400"></canvas>
<div id="joystick">
    <div id="stick"></div>
</div>
<div id="btns">
    <button class="btn" id="passBtn">传球</button>
    <button class="btn" id="shootBtn">射门</button>
</div>
</div>
</div>

<script>
const canvas = document.getElementById('field');
const ctx = canvas.getContext('2d');
const W = canvas.width;
const H = canvas.height;

const player = {x:120,y:H/2,r:16,c:'#ff4444',speed:3.8};
const ai = {x:W-120,y:H/2,r:16,c:'#4488ff',speed:2.6};
const ball = {x:W/2,y:H/2,r:11,vx:0,vy:0,friction:0.97};
const goalH = 110;
const goalLeft = {x:0,y:H/2-goalH/2,w:10,h:goalH};
const goalRight = {x:W-10,y:H/2-goalH/2,w:10,h:goalH};

let scoreP = 0, scoreAI = 0;
let moveX = 0, moveY = 0;

const joy = document.getElementById('joystick');
const stick = document.getElementById('stick');
const joyR = joy.clientWidth / 2;
let joyDown = false;

joy.addEventListener('touchstart', e=>{joyDown=true;updateJoy(e.touches[0])})
joy.addEventListener('touchmove', e=>{if(joyDown) updateJoy(e.touches[0])})
joy.addEventListener('touchend', ()=>{joyDown=false;moveX=0;moveY=0;stick.style.transform='translate(-50%,-50%)'})

function updateJoy(touch){
    const rect = joy.getBoundingClientRect();
    let tx = touch.clientX - rect.left - joyR;
    let ty = touch.clientY - rect.top - joyR;
    const dist = Math.hypot(tx,ty);
    if(dist>joyR-22){
        const s = (joyR-22)/dist;
        tx *= s; ty *= s;
    }
    stick.style.transform = `translate(calc(-50% + ${tx}px),calc(-50% + ${ty}px))`;
    moveX = tx/(joyR-22);
    moveY = ty/(joyR-22);
}

document.getElementById('passBtn').addEventListener('touchstart',()=>kick(player,5.5))
document.getElementById('shootBtn').addEventListener('touchstart',()=>kick(player,10))

function kick(who,power){
    const dx = ball.x - who.x;
    const dy = ball.y - who.y;
    const d = Math.hypot(dx,dy);
    if(d < who.r + ball.r + 18){
        ball.vx = dx/d * power;
        ball.vy = dy/d * power;
    }
}
function circleHit(a,b){
    return Math.hypot(a.x-b.x,a.y-b.y) < a.r + b.r;
}
function resetBall(){
    ball.x=W/2;ball.y=H/2;ball.vx=0;ball.vy=0;
}
function updateScore(){
    document.getElementById('score').innerText = `🔴你：${scoreP} ｜ 🤖AI：${scoreAI}`
}

function aiUpdate(){
    const dx = ball.x - ai.x;
    const dy = ball.y - ai.y;
    const d = Math.hypot(dx,dy);
    if(d>ai.r+ball.r+12){
        ai.x += dx/d * ai.speed;
        ai.y += dy/d * ai.speed;
    }else{
        ball.vx = -7;
        ball.vy = (Math.random()-0.5)*4;
    }
    ai.x = Math.max(ai.r, Math.min(W-ai.r, ai.x));
    ai.y = Math.max(ai.r, Math.min(H-ai.r, ai.y));
}

function loop(){
    player.x += moveX * player.speed;
    player.y += moveY * player.speed;
    player.x = Math.max(player.r, Math.min(W-player.r, player.x));
    player.y = Math.max(player.r, Math.min(H-player.r, player.y));

    ball.x += ball.vx;
    ball.y += ball.vy;
    ball.vx *= ball.friction;
    ball.vy *= ball.friction;

    if(ball.y < ball.r || ball.y > H-ball.r){
        ball.vy *= -0.85;
    }
    if(ball.x < ball.r && ball.y>goalLeft.y && ball.y