game demo (WIP)

Author: Stuhl

src/example.ts

@@ -34,34 +34,46 @@ const jitterComponent = {
 
 let xDirecton = 0
 let yDirection = 0
+let isSpacebar = false
 
 const controlComponent = {
  name: "control",
  state: {
- moveSpeed: 2
+ moveSpeed: 2,
+ runSpeed: 5,
+ controlsID: null
  },
  onAttach() {
  const keys = {}
 
- setInterval(() => {
+ const id = setInterval(() => {
  if (keys["ArrowLeft"]) xDirecton = -1
  if (keys["ArrowRight"]) xDirecton = 1
  if (keys["ArrowUp"]) yDirection = -1
  if (keys["ArrowDown"]) yDirection = 1
+ if (keys[" "]) isSpacebar = true
  }, 20)
 
+ this.controlsID = id
+
  document.addEventListener("keydown", (event) => {
+ event.preventDefault()
  keys[event.key] = true
  })
 
  document.addEventListener("keyup", (event) => {
+ event.preventDefault()
  delete keys[event.key]
 
  if (!keys["ArrowLeft"]) xDirecton = 0
  if (!keys["ArrowRight"]) xDirecton = 0
  if (!keys["ArrowUp"]) yDirection = 0
  if (!keys["ArrowDown"]) yDirection = 0
+ if (!keys[" "]) isSpacebar = false
  })
+ },
+ onRemove() {
+ 
  }
 }
 
@@ -73,6 +85,60 @@ const growComponent = {
  }
 }
 
+const collisionComponent = {
+ name: "onCollisionDeleteComponent",
+}
+
+const collisionProcessor = {
+ name: "onCollisionDeleteProcessor",
+ target: "onCollisionDeleteComponent",
+ update(component, entities) {
+ entities.forEach((entity) => {
+ const allEntities = ECS.getEntities()
+
+ for (let targetEntity of allEntities) {
+ const isPlayer = targetEntity.name === "Player"
+
+ if (!isPlayer) {
+ continue
+ }
+
+
+ const targetPosition = ECS.entityHasComponent(targetEntity, "position")
+ const targetRenderer = ECS.entityHasComponent(targetEntity, "box") || ECS.entityHasComponent(targetEntity, "playerBox")
+ const hasPosition = ECS.entityHasComponent(entity, "position")
+ const hasRenderer = ECS.entityHasComponent(entity, "box") || ECS.entityHasComponent(entity, "playerBox")
+ const hasCollision = ECS.entityHasComponent(entity, "onCollisionDeleteComponent")
+ const isSelf = targetEntity === entity
+
+ if (!hasPosition || !hasRenderer || isSelf || !targetPosition || !targetRenderer || !hasCollision) {
+ continue
+ }
+
+ const x = entity.state.x
+ const y = entity.state.y
+ const width = entity.state.width
+ const height = entity.state.height
+
+ const targetX = targetEntity.state.x
+ const targetY = targetEntity.state.y
+ const targetWidth = targetEntity.state.width
+ const targetHeight = targetEntity.state.height
+
+ const xCollision = (x + width) >= targetX && x <= (targetX + targetWidth)
+ const yCollision = (y + height) >= targetY && y <= (targetY + targetHeight)
+
+ if (xCollision && yCollision) {
+ ECS.removeComponentFromEntity(entity, "onCollisionDeleteComponent")
+ ECS.addComponentToEntity(entity, "growEffect")
+ ECS.addComponentToEntity(entity, "jitter")
+ ECS.addComponentToEntity(entity, "flashColor")
+ }
+ }
+ })
+ }
+}
+
 const growProcesssor = {
  name: "growProcessor",
  target: "growEffect",
@@ -83,6 +149,7 @@ const growProcesssor = {
 
  if (entity.state.width > entity.state.maxGrowSize) {
  ECS.removeEntity(entity)
+ score += 10
  }
  })
  }
@@ -95,6 +162,14 @@ const controlProcessor = {
  entities.forEach(entity => {
  entity.state.x += xDirecton * entity.state.moveSpeed
  entity.state.y += yDirection * entity.state.moveSpeed
+
+ if (isSpacebar && xDirecton) {
+ entity.state.x += xDirecton * entity.state.runSpeed
+ }
+
+ if (isSpacebar && yDirection) {
+ entity.state.y += yDirection * entity.state.runSpeed
+ }
  })
  }
 }
@@ -121,8 +196,10 @@ const boxRenderingProcessor = {
  target: "box",
  update(component, entities) {
  entities.forEach(entity => {
+ const hasFlashColor = ECS.entityHasComponent(entity, "flashColor")
+
  ctx.translate(entity.state.x, entity.state.y)
- ctx.fillStyle = "orange"
+ ctx.fillStyle = hasFlashColor ? entity.state.flashColorCurrent : "orange"
  ctx.fillRect(0, 0, entity.state.width, entity.state.height)
  ctx.translate(-entity.state.x, -entity.state.y)
  })
@@ -142,23 +219,53 @@ const playerBoxRenderingProcessor = {
  }
 }
 
+const flashColorComponent = {
+ name: "flashColor",
+ state: {
+ flashColorTimer: 0,
+ flashColorSpeed: 200,
+ flashColor1: "white",
+ flashColor2: "red",
+ flashColorCurrent: "red"
+ }
+}
+
+const flashColorProcessor = {
+ name: "flashColorProcessor",
+ target: "flashColor",
+ update(component, entities) {
+ entities.forEach((entity) => {
+ entity.state.flashColorTimer += 20
+
+ if (entity.state.flashColorTimer >= entity.state.flashColorSpeed) {
+ entity.state.flashColorTimer = 0
+ entity.state.flashColorCurrent = entity.state.flashColorCurrent === entity.state.flashColor1 ? entity.state.flashColor2 : entity.state.flashColor1
+ }
+ })
+ }
+}
+
 ECS.addComponent(positionComponent)
 ECS.addComponent(boxComponent)
 ECS.addComponent(jitterComponent)
 ECS.addComponent(controlComponent)
 ECS.addComponent(playerBox)
 ECS.addComponent(growComponent)
+ECS.addComponent(collisionComponent)
+ECS.addComponent(flashColorComponent)
+
+ECS.addProcessor(flashColorProcessor)
+ECS.addProcessor(collisionProcessor)
 ECS.addProcessor(growProcesssor)
-ECS.addProcessor(playerBoxRenderingProcessor)
 ECS.addProcessor(jitterProcessor)
 ECS.addProcessor(boxRenderingProcessor)
 ECS.addProcessor(controlProcessor)
+ECS.addProcessor(playerBoxRenderingProcessor)
 
 
 const create100Boxes = () => {
- console.log(ECS)
  for (let i = 0; i < 100; i++) {
- const box = ECS.createEntity("Box", ["position", "box", "growEffect"])
+ const box = ECS.createEntity("enemy", ["position", "box", "onCollisionDeleteComponent"])
 
  box.state.x = Math.random() * canvas.width
  box.state.y = Math.random() * canvas.height
@@ -167,8 +274,17 @@ const create100Boxes = () => {
  }
 }
 
+const create1EnemyBox = () => {
+ const enemyBox = ECS.createEntity("enemy", ["position", "box", "onCollisionDeleteComponent"])
+
+ enemyBox.state.x = 100
+ enemyBox.state.y = 100
+
+ ECS.addEntity(enemyBox)
+}
+
 const createPlayerBox = () => {
- const playerBox = ECS.createEntity("Player", ["position", "playerBox", "control", "growEffect"])
+ const playerBox = ECS.createEntity("Player", ["position", "playerBox", "control"])
 
  playerBox.state.x = canvas.width / 2
  playerBox.state.y = canvas.height / 2
@@ -182,13 +298,83 @@ canvas.style.backgroundColor = "black"
 
 const ctx = canvas.getContext("2d") as CanvasRenderingContext2D
 
+let score = 0
+
 const gameloop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ECS.update()
+ ctx.font = "30px Comis-Sans"
+ ctx.fillText("Score:", 30, 30)
+ ctx.fillText(String(score), 110, 32)
 
  requestAnimationFrame(gameloop)
 }
 
 create100Boxes()
+// create1EnemyBox()
 createPlayerBox()
-// gameloop()
+gameloop()
+
+
+const playerRendererCheckbox = document.getElementById("player-renderer") as HTMLInputElement
+const playerRendererContainer = document.getElementById("player-renderer-container")
+const playerRendererSize = document.getElementById("player-renderer-size") as HTMLInputElement
+
+const playerControlsCheckbox = document.getElementById("player-controls") as HTMLInputElement
+const playerControlsContainer = document.getElementById("player-controls-container")
+const playerControlsSpeed = document.getElementById("player-controls-speed") as HTMLInputElement
+const playerControlsRunSpeed = document.getElementById("player-controls-run-speed") as HTMLInputElement
+
+playerRendererCheckbox.addEventListener("change", () => {
+ const checkbox = playerRendererCheckbox
+ const isChecked = checkbox.checked
+ const player = ECS.getEntity("Player")
+
+ if (isChecked) {
+ playerRendererContainer.style.display = "block"
+ ECS.addComponentToEntity(player, "playerBox")
+ }
+
+ if (!isChecked) {
+ playerRendererContainer.style.display = "none"
+ ECS.removeComponentFromEntity(player, "playerBox")
+ }
+})
+
+playerRendererSize.addEventListener("change", () => {
+ const player = ECS.getEntity("Player")
+ player.state.height = Number(playerRendererSize.value)
+ player.state.width = Number(playerRendererSize.value)
+})
+
+playerControlsCheckbox.addEventListener("change", () => {
+ const checkbox = playerControlsCheckbox
+ const isChecked = checkbox.checked
+ const player = ECS.getEntity("Player")
+
+ if (isChecked) {
+ playerControlsContainer.style.display = "block"
+ ECS.addComponentToEntity(player, "controls")
+ }
+
+ if (!isChecked) {
+ playerControlsContainer.style.display = "none"
+ ECS.removeComponentFromEntity(player, "controls")
+ }
+})
+
+playerControlsSpeed.addEventListener("change", () => {
+ const player = ECS.getEntity("Player")
+ player.state.moveSpeed = Number(playerControlsSpeed.value)
+
+ console.log(player)
+})
+
+playerControlsRunSpeed.addEventListener("change", () => {
+ const player = ECS.getEntity("Player")
+ player.state.runSpeed = Number(playerControlsRunSpeed.value)
+})
+
+const getPlayerCodeSnippet = () => {
+ const player = ECS.getEntity("Player")
+}

src/index.html

@@ -3,9 +3,37 @@
 <html>
  <head>
  <script type="module" src="./example.ts"></script>
+ <link href="style.css" rel="stylesheet" />
  </head>
 
  <body>
- <canvas id="game-canvas"></canvas>
+ <div class="container">
+ <canvas id="game-canvas"></canvas>
+ <div class="controls">
+ <details>
+ <summary>Player</summary>
+ <div class="components">
+ <div>
+ <label>Renderer</label>
+ <input checked id="player-renderer" type="checkbox" />
+ <div id="player-renderer-container" class="detail-input">
+ <label>size</label>
+ <input id="player-renderer-size" type="range" min="0" max="100" value="10" />
+ </div>
+ </div>
+ <div>
+ <label>Controls</label>
+ <input checked id="player-controls" type="checkbox" />
+ <div id="player-controls-container" class="detail-input">
+ <label>speed (arrow keys to move)</label>
+ <input id="player-controls-speed" value="2" type="range" min="0" max="10" />
+ <label>run speed (hold Spacebar)</label>
+ <input id="player-controls-run-speed" value="5" type="range" min="0" max="10" />
+ </div>
+ </div>
+ </div>
+ </details>
+ </div>
+ </div>
  </body>
 </html>

src/style.css

@@ -0,0 +1,43 @@
+html {
+ font-family: Helvetica;
+}
+
+.container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 10px;
+}
+
+.controls {
+ background-color: hsla(0, 0%, 90%, 1);
+ padding: 20px;
+}
+
+.components > div {
+ margin: 20px 0;
+ background-color: hsla(0, 0%, 93%, 1);
+ padding: 10px;
+}
+
+.detail-input {
+ margin-left: 10px;
+ margin-top : 10px;
+}
+
+.detail-input > label {
+ display: block;
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.detail-input > input {
+ margin-bottom: 10px;
+}
+
+@media only screen and (max-width: 700px) {
+ .container {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr;
+ max-width: 500px;
+ }
+}