Getting Started

You won’t have to build the game from scratch. We have provided the art assets and game engine for you. You can download or clone them from our repository.

The repository contains css, images, and js folders, as well as an index.html and a README.md file. Once you have downloaded the files we have provided, you will have to edit_app.js_to build the game.

  • The css folder contains a style.css file which you do not need to edit
  • The images folder contains the png image files, which are used when displaying the game. The images for the player and enemy character are going to be loaded from this folder.
  • The js folder also contains the app engine needed to run the game and a resources.js file. You do not need to edit these files.
  • index.html - opening index.html should load the game
  • README.md should contain instructions on how to load and play the game (you will need to add those instructions).

Inside the _app.js _file, you will need to implement the _Player _and the _Enemy _classes, using Object-Oriented JavaScript. Part of the code for the Enemy is provided to you, and you will need to complete the following:

  • The Enemy function, which initiates the Enemy by:
    • Loading the image by setting this.sprite to the appropriate image in the image folder (already provided)
    • Setting the Enemy initial location (you need to implement)
    • Setting the Enemy speed (you need to implement)
  • The update method for the Enemy
    • Updates the Enemy location (you need to implement)
    • Handles collision with the Player (you need to implement)
  • You can add your own Enemy methods as needed

  • 적 (Enemy) 기능 : 적을 시작합니다 :

  • [ ] this.sprite를 이미지 폴더의 적절한 이미지로 설정하여 이미지로드 (이미 제공됨)

  • [ ] Enemy 초기 위치 설정 (구현해야 함)

  • [ ] Enemy 속도 설정 (구현해야 함)

  • 적의 업데이트 방법

  • [ ] Enemy 위치 업데이트 (구현해야 함)

  • [ ] 플레이어와 충돌을 처리합니다 (구현해야 함).

  • 필요에 따라 자신의 Enemy 메서드를 추가 할 수 있습니다.

You will also need to implement the Player class, and you can use the Enemy class as an example on how to get started. At minimum you should implement the following:

또한 Player 클래스를 구현해야하며 Enemy 클래스를 시작하는 방법의 예로서 사용할 수 있습니다. 최소한 다음을 구현해야합니다.

  • The Player function, which initiates the Player by:
    • Loading the image by setting this.sprite to the appropriate image in the image folder (use the code from the Enemy function as an example on how to do that)
    • Setting the Player initial location
  • The update method for the Player (can be similar to the one for the Enemy)
  • The render method for the Player (use the code from the render method for the Enemy)
  • The handleInput method, which should receive user input, allowedKeys (the key which was pressed) and move the player according to that input. In particular:
    • Left key should move the player to the left, right key to the right, up should move the player up and down should move the player down.
    • Recall that the player cannot move off screen (so you will need to check for that and handle appropriately).
    • If the player reaches the water the game should be reset by moving the player back to the initial location (you can write a separate reset Player method to handle that).
  • You can add your own Player methods as needed.

  • 플레이어를 시작하는 플레이어 기능 :

  • [ ] this.sprite를 이미지 폴더의 적절한 이미지로 설정하여 이미지를로드합니다 (Enemy 함수의 코드를 사용하는 방법의 예를 사용하십시오)

  • [ ] 플레이어의 초기 위치 설정하기

  • 플레이어의 업데이트 방법 (Enemy와 비슷할 수 있음)

  • Player의 render 메서드 (Enemy의 render 메서드 코드 사용)

  • 사용자 입력을 받아야하는 handleInput 메소드는 허용 된 키 (눌려진 키)를 허용하고 해당 입력에 따라 플레이어를 이동합니다. 특히:

  • [ ] 왼쪽 키는 플레이어를 왼쪽으로 이동시키고, 오른쪽 키는 오른쪽으로 이동하고, 위로는 플레이어를 위아래로 움직여야 플레이어가 아래로 이동해야합니다.

  • [ ] 플레이어가 화면에서 벗어날 수 없다는 것을 상기하십시오 (따라서이를 확인하고 적절하게 처리해야합니다).

  • [ ] 플레이어가 물에 도달하면 플레이어를 초기 위치로 다시 이동하여 게임을 재설정해야합니다 (플레이어를 처리하기 위해 별도의 리셋 플레이어 메서드를 작성할 수 있습니다).

  • 필요에 따라 플레이어 메서드를 직접 추가 할 수 있습니다.

Once you have completed implementing the Player and Enemy, you should instantiate them by:

  • Creating a new Player object
  • Creating several new Enemies objects and placing them in an array called allEnemies
  • 새 Player 객체 만들기
  • 여러 개의 새로운 Enemies 객체를 생성하고 allEnemies라는 배열에 배치합니다.

Adding your own

If you would like you can add additional functionality to the game. You can add more code to the app.js file and to the Enemy and Player classes to accomplish that.

HTML5 캔버스 정보

Classic Arcade Game Clone 프로젝트의 시작 코드는 대부분의 그림을 처리합니다. <canvas> 요소가 이미 생성되었으며 app.js 파일에서 canvas 요소의 2 차원 도면 컨텍스트를 ctx 객체로 사용할 수 있습니다.

이미지 그리기

app.js 파일에서 Enemy 클래스를 볼 수 있습니다. 이 클래스에는 ctx.drawImage () 메서드를 사용하는 render () 메서드가 있습니다. 이 메서드는 이미지, x 좌표 및 y 좌표의 세 가지 매개 변수를 사용합니다.

ctx.drawImage (Resources.get (this.sprite), this.x, this.y);

사용 가능한 이미지

이 예제에서 게임 엔진에는 게임에 필요한 모든 이미지를 캐시하는 Resources 개체가있어서 게임 플레이 중에로드 할 때까지 기다릴 필요가 없습니다. 사용할 수있는 이미지는 engine.js에 나열되어 있습니다.


Resources.load ([
    'images / stone-block.png',
    'images / water-block.png',
    'images / grass-block.png',
    'images / enemy-bug.png',
    'images / char-boy.png'
]));

시동 코드에는 다른 많은 이미지가 있습니다. 게임에서 이 파일을 사용하려면 파일 하단의 engine.js에있는 Resources.load () 메소드에 전달 된 배열에 파일을 포함하면됩니다.

Resources.load ([
    'images / stone-block.png',
    'images / water-block.png',
    'images / grass-block.png',
    'images / enemy-bug.png',
    'images / char-boy.png',
    'images / char-pink-girl.png'
]));

기존 역량 확대?

프로젝트에 ctx 객체의 추가 메서드가 필요하지는 않습니다. 그러나 게임에 추가 기능을 추가하기로 결정한 경우 이러한 방법 중 일부를 통합 할 수 있습니다. 그렇게하면 ctx 객체는 CanvasRenderingContext2D 객체입니다. 이 문서는 해당 개체에서 사용할 수있는 모든 메서드를 제공합니다.

results matching ""

    No results matching ""