如何做一个不要网络的网站（小游戏）

· · 算法·理论

HTML 入门 + 打砖块小游戏教程

一、新建 HTML 文件

  1. 右键桌面 → 新建 → 文本文档

  2. 打开记事本，点击左上角 文件 → 另存为

  3. 将文件命名为 xxx.html，*注意选择“所有文件 (.)”而不是默认的“文本文档 (.txt)”**

此时桌面上会出现一个浏览器图标，双击即可打开 HTML 文件，开始写程序。

二、HTML 常用标签

文字

功能 标签 示例
标题1 <h1> <h1>标题1</h1>
标题2 <h2> <h2>标题2</h2>
段落 <p> <p>这是段落</p>
加粗 <b> <b>加粗</b>
强调 <strong> <strong>强调</strong>
斜体 <i> <i>斜体</i>
下划线 <u> <u>下划线</u>
删除线 <s> <s>删除线</s>
小号文字 <small> <small>小号文字</small>

列表

功能 标签 示例
无序列表 <ul> <ul><li>苹果</li><li>香蕉</li></ul>
有序列表 <ol> <ol><li>第一步</li><li>第二步</li></ol>
定义列表 <dl> <dl><dt>HTML</dt><dd>超文本标记语言</dd></dl>
列表项 <li> <li>列表项</li>

链接与图片

功能 标签 示例
超链接 <a> <a href="https://baidu.com" target="_blank">百度</a>
邮箱链接 <a> <a href="mailto:[email protected]">发邮件</a>
页面内锚点 <a> <a href="#section1">跳转到section1</a>
图片 <img> <img src="logo.png" alt="logo" width="200">

表单

功能 标签 示例
文本输入 <input type="text"> <input type="text" name="username">
密码输入 <input type="password"> <input type="password">
数字输入 <input type="number"> <input type="number" min="0" max="100">
单选按钮 <input type="radio"> <input type="radio" name="gender">
复选框 <input type="checkbox"> <input type="checkbox">
提交按钮 <input type="submit"> <input type="submit" value="提交">
重置按钮 <input type="reset"> <input type="reset" value="重置">
下拉菜单 <select> <select><option>选项1</option></select>
文本区域 <textarea> <textarea rows="4" cols="30"></textarea>

三、键盘事件示例


<input type="text" id="keyInput" placeholder="按键试试">
<script>
document.getElementById("keyInput").addEventListener("keydown", function(e){
    alert("你按下了键：" + e.key);
});
</script>
常见事件类型：

事件类型    描述
onclick 点击按钮
ondblclick  双击
onmousedown 鼠标按下
onmouseup   鼠标松开
onmousemove 鼠标移动
onkeydown   键盘按下
onkeyup 键盘抬起
onchange    输入框内容改变
四、页面布局标签
功能  标签  示例
页头  <header>    <header>这里是头部</header>
页脚  <footer>    <footer>这里是页脚</footer>
导航  <nav>   <nav>导航栏</nav>
章节  <section>   <section>章节内容</section>
文章  <article>   <article>文章内容</article>
分隔线 <hr>    <hr>
容器  <div>   <div>容器</div>
内联容器    <span>  <span>内联</span>

太难了？用现成代码吧

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>打砖块小游戏 - 球会加速</title>
<style>
canvas { 
    background: #eee; 
    display: block; 
    margin: 0 auto; 
    border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<script>
// JavaScript 代码（球会加速，左右键控制挡板）
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
let x = canvas.width/2, y = canvas.height-30, dx = 2, dy = -2, ballRadius = 10, speedMultiplier = 1;
const paddleHeight = 10, paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth)/2, rightPressed = false, leftPressed = false;
const brickRowCount = 5, brickColumnCount = 7, brickWidth = 55, brickHeight = 20, brickPadding = 10, brickOffsetTop = 30, brickOffsetLeft = 30;
let bricks = [], score = 0;

for(let c=0; c<brickColumnCount; c++){
    bricks[c] = [];
    for(let r=0; r<brickRowCount; r++){
        bricks[c][r] = { x:0, y:0, status:1 };
    }
}

document.addEventListener("keydown", function(e){
    if(e.key=="Right"||e.key=="ArrowRight") rightPressed = true;
    else if(e.key=="Left"||e.key=="ArrowLeft") leftPressed = true;
});
document.addEventListener("keyup", function(e){
    if(e.key=="Right"||e.key=="ArrowRight") rightPressed = false;
    else if(e.key=="Left"||e.key=="ArrowLeft") leftPressed = false;
});

setInterval(()=>{speedMultiplier += 0.2;}, 5000);

function collisionDetection(){
    for(let c=0;c<brickColumnCount;c++){
        for(let r=0;r<brickRowCount;r++){
            let b = bricks[c][r];
            if(b.status==1 && x>b.x && x<b.x+brickWidth && y>b.y && y<b.y+brickHeight){
                dy = -dy;
                b.status = 0;
                score++;
                if(score==brickRowCount*brickColumnCount){alert("你赢了！");document.location.reload();}
            }
        }
    }
}

function drawBall(){ctx.beginPath();ctx.arc(x,y,ballRadius,0,Math.PI*2);ctx.fillStyle="#0095DD";ctx.fill();ctx.closePath();}
function drawPaddle(){ctx.beginPath();ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight);ctx.fillStyle="#0095DD";ctx.fill();ctx.closePath();}
function drawBricks(){for(let c=0;c<brickColumnCount;c++){for(let r=0;r<brickRowCount;r++){if(bricks[c][r].status==1){let brickX=c*(brickWidth+brickPadding)+brickOffsetLeft,brickY=r*(brickHeight+brickPadding)+brickOffsetTop;bricks[c][r].x=brickX;bricks[c][r].y=brickY;ctx.beginPath();ctx.rect(brickX,brickY,brickWidth,brickHeight);ctx.fillStyle="#0095DD";ctx.fill();ctx.closePath();}}}}
function drawScore(){ctx.font="16px Arial";ctx.fillStyle="#333";ctx.fillText("得分: "+score,8,20);}

function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    drawBricks(); drawBall(); drawPaddle(); drawScore(); collisionDetection();
    if(x+dx*speedMultiplier>canvas.width-ballRadius || x+dx*speedMultiplier<ballRadius) dx=-dx;
    if(y+dy*speedMultiplier<ballRadius) dy=-dy;
    else if(y+dy*speedMultiplier>canvas.height-ballRadius){
        if(x>paddleX && x<paddleX+paddleWidth) dy=-dy;
        else {alert("游戏结束");document.location.reload();}
    }
    x+=dx*speedMultiplier; y+=dy*speedMultiplier;
    if(rightPressed && paddleX<canvas.width-paddleWidth) paddleX+=5;
    if(leftPressed && paddleX>0) paddleX-=5;
    requestAnimationFrame(draw);
}

draw();
</script>
</body>
</html>

看到这了给个攒呗，ORZ求通过