创造工坊使用接口

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个游戏</title>
</head>
<body>
  <!-- 这里写你想显示的内容 -->
  <h1>你好世界</h1>
</body>
</html>

<style>
  body{
    background: #87CEEB; /* 天蓝色背景 */
    margin: 0; /* 去掉默认边距 */
  }
  .my-btn{
    padding: 12px 24px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer; /* 鼠标移上去变小手 */
  }
</style>

<button onclick="sayHi()">点我</button>

<script>
function sayHi(){
  alert("你点了我！");
}
</script>

// let 创建的变量可以改
let score = 0;        // 分数，一开始是0
let playerName = "小明"; // 玩家名字
let isGameOver = false; // 游戏结束了吗？

// const 创建的变量不能改，用来存固定值
const MAX_TIME = 120; // 游戏最多120秒

// 改值直接赋值就行
score = score + 1; // 分数加1
score++;              // 这也是加1，更简洁

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
  <h1>点击次数：<span id="count">0</span></h1>
  <button onclick="addOne()">点我+1</button>
  <button onclick="reset()">清零</button>

  <script>
  let count = 0; // 创建变量，存点击次数

  function addOne(){
    count++; // 变量加1
    document.getElementById("count").innerText = count; // 更新屏幕显示
  }

  function reset(){
    count = 0; // 变量归零
    document.getElementById("count").innerText = count;
  }
  </script>
</body>
</html>

if(score >= 100){
  alert("恭喜通关！");
}else if(score >= 50){
  alert("继续加油！");
}else{
  alert("才刚开始呢");
}

for(let i=0; i<10; i++){
  console.log("这是第" + i + "只小鸡");
}

<canvas id="game" width="400" height="600"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

// 画一个红色矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 80); // x, y, 宽, 高

// 画一个圆
ctx.beginPath();
ctx.arc(200, 300, 30, 0, Math.PI*2); // x, y, 半径, 起始角, 结束角
ctx.fillStyle = "blue";
ctx.fill();

// 写文字
ctx.fillStyle = "black";
ctx.font = "20px Arial";
ctx.fillText("得分: 0", 10, 30);
</script>

let x = 0;

function update(){
  x += 2; // 每帧x加2，方块就向右移动了
  if(x > 400) x = 0;
}

function draw(){
  ctx.clearRect(0,0,400,600); // 清屏
  ctx.fillStyle = "red";
  ctx.fillRect(x, 200, 50, 50);
}

function loop(){
  update(); // 更新数据
  draw();   // 画出来
  requestAnimationFrame(loop); // 下一帧继续
}
loop(); // 启动

let keys = {};

// 键盘按下
document.addEventListener("keydown", function(e){
  keys[e.key] = true;
});
document.addEventListener("keyup", function(e){
  keys[e.key] = false;
});

// 在update里判断
function update(){
  if(keys["ArrowLeft"]) x -= 5;
  if(keys["ArrowRight"]) x += 5;
}

// 手机触摸
canvas.addEventListener("touchstart", function(e){
  e.preventDefault();
  const touch = e.touches[0];
  const rect = canvas.getBoundingClientRect();
  const tx = touch.clientX - rect.left;
  const ty = touch.clientY - rect.top;
  // tx, ty 就是玩家点的位置
});

function isCollide(a, b){
  return a.x < b.x + b.w &&
         a.x + a.w > b.x &&
         a.y < b.y + b.h &&
         a.y + a.h > b.y;
}

// 用法
if(isCollide(player, enemy)){
  alert("撞到了！");
}

let bullets = [];

// 发射子弹
function shoot(){
  bullets.push({x: player.x, y: player.y, speed: 8});
}

// 更新所有子弹
function updateBullets(){
  for(let i = bullets.length-1; i >= 0; i--){
    bullets[i].y -= bullets[i].speed;
    if(bullets[i].y < 0){
      bullets.splice(i, 1); // 飞出屏幕就删掉
    }
  }
}

// 存
localStorage.setItem("highScore", score);

// 取
let highScore = localStorage.getItem("highScore") || 0;

// 删
localStorage.removeItem("highScore");