创建HTML颜色匹配游戏的简单步骤

一、项目背景

createjs是一个基于canvas的制作H5游戏、动画、交互的库。它包括EaselJs、TweenJs、SoundJs、PreloadJs四个部分。它基于容器进行展示，其中根容器是stage，所有显示对象都是stage的子元素。

二、创建游戏界面

1. 创建游戏容器：

<div id="game-container">
  <canvas id="game-canvas"></canvas>
</div>

2. 添加样式：

#game-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#game-canvas {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

三、编写JavaScript代码

1. 初始化游戏：

const canvas = document.getElementById("game-canvas");
const stage = new createjs.Stage(canvas);

createjs.Ticker.addEventListener("tick", tick);

2. 创建游戏元素：

const circle1 = new createjs.Shape();
circle1.graphics.beginFill("#FF0000").drawCircle(50, 50, 25);

const circle2 = new createjs.Shape();
circle2.graphics.beginFill("#00FF00").drawCircle(150, 150, 25);

stage.addChild(circle1, circle2);

3. 添加事件监听器：

circle1.addEventListener("click", handleClick);
circle2.addEventListener("click", handleClick);

function handleClick(event) {
  if (event.target.graphics._fill.style === "#FF0000") {
    console.log("红色圆圈被点击了");
  } else if (event.target.graphics._fill.style === "#00FF00") {
    console.log("绿色圆圈被点击了");
  }
}

4. 游戏循环：

function tick(event) {
  stage.update();
}

四、运行游戏

1. 将HTML、CSS和JavaScript文件保存在同一个文件夹中。
2. 在浏览器中打开HTML文件。
3. 游戏将自动开始运行。

五、总结

恭喜你！你已经成功创建了一个HTML颜色匹配游戏。你可以根据自己的喜好对游戏进行修改，例如添加更多的颜色、改变游戏规则、添加音效等。希望你能够享受这个有趣的游戏，并从中学习到一些有用的知识。