존경하는 여러분:,
금요일 잘 보내세요!🎉
비디오 게임 분야에 진출함으로써 우리는 인코딩 도전의 발걸음을 조금씩 바꾸고 있다.암시할 수 있는 바와 같이, 이 새로운 도전은 비디오 게임을 만드는 데 관한 것이다.
지금은 아이들에 합류하기에 좋은 시기다. 대통령Obama의 건의에 따라 행동해야 한다. "새로운 비디오 게임 하나만 사지 말고 하나 하자!"

도전하다

이 인코딩 도전에서 당신은 젊은 침실 인코더 역할을 맡았습니다. 그는 역사상 가장 영향력 있는 게임의 복제를 실현하기 위해 노력했습니다.
너는 백화점에서 수천 번의 이 게임을 했는데, 지금 너는 너의 특별 버전을 세우고 싶다. 너는 큰 인터넷을 통해 너의 친구와 공유할 수 있다.
따라서 자바스크립트와 HTML5 캔버스를 사용하여 게임을 작성할 계획입니다!
물론, 너는 간략화된 게임을 쓸 계획이다.당신의 게임에서 정체불명의 배들이 스크린에서 좌우로 움직인다...그리고 천천히 한 걸음 내려가서 방향을 바꾸세요.
너는 이 배들이 착륙하기 전에 플라스마 총알로 그것들을 파괴해야 한다.만약 네가 모든 배를 파괴한다면, 너는 이길 것이다.만약 그들이 착륙한다면 너는 질 것이다.어떤 상황에서도 게임은 다시 시작하여 유저에게 새로운 시도를 할 것이다.
“Space Invaders”

어떻게 캔버스를 사용합니까?

걱정하지 마세요. 이것은 어렵지 않습니다. 왜냐하면 이 도전은'트레이닝 바퀴'에서 나온 것입니다. HTML5 캔버스의 복잡성을 없애기 위해 게임에만 관심을 가질 수 있기 때문에 우리는 당신에게 작은'위조 라이브러리'를 시작점으로 제공했습니다.
이 라이브러리는 기본적인 게임 순환과 기타 보조 함수를 실현했다.라이브러리 API는 특히 처리 API에서 영감을 얻습니다 .
이 라이브러리를 사용하려면 (1) 작성할 코드를 작성하기 전에 코드에 복사하거나 (2) 저장할 수 있습니다.js 파일은 다음 그림과 같이 코드를 작성하기 전에 HTML 페이지에 포함합니다.

<canvas id="canvas" tabindex="1" width="800" height="600"></canvas>

<script src="easycanvas.js"></script>

<script>

// Copy the library code here (if you don’t include the above script). Either way, works great!

// Then ... write your game code here, after the helper functions!!!

</script>

***참고: easyCanvas의 코드는 본문 말미에 제공됩니다.

p5.js easy Canvas 안에 뭐가 있어요?

직접 코드를 검사하는 것만큼 easyCanvas 내부의 내용을 볼 수 있는 방법은 없다.실례화된 후, easyCanvas는 몇 개의 보조 상수와 함수로 전역 공간 (예를 들어 창 대상) 을 채웁니다.너는 이것들을 사용해서 너의 게임을 만들 수 있을 뿐이야!
심지어 캔버스를 직접 방문해보지 마세요...이 기능들은 이 게임에 필요한 전부이다.

// Clear the canvas with the specified color
function background(color)

// Specify that the next shape won't be filled
function noFill()

// Specify that the next shaped should be filled with specified color
function fill(color)

// Specify that the next shape should not have a stroke stroke
function noStroke()

// Specify the stroke width for the next shape
function strokeWidth(n)

// Specify the stroke color for the next shape
function stroke(color)

// Draw a rectangle
function rect(x, y, width, height)

// Specify the text size of the next drawn text
function textSize(n)

// Write a text at specified coordinates
function text(txt, x, y)

// Returns true if key with specified code is pressed
function keyIsDown(code)

게임 순환은요?

당신은 위의 진술에 주의했습니까?게임을 실현하기 위해서는'게임 순환 모드'를 사용해야 합니다.
Robert Nystrom은 게임 순환을 "빵을 슬라이딩한 이래 가장 좋은 일"에 비유한다.
그는 또 "한 게임의 순환은 게임 과정에서 지속적으로 실행된다. 순환의 모든 바퀴는 사용자의 입력을 막지 않고 처리하고 게임 상태를 업데이트하며 게임을 렌더링한다"고 설명했다.
이상하게 들려요...기죽지 마."loop"함수에서 논리를 작성하는 것입니다. easyCanvas "library"는 순환에서 함수를 호출합니다.

... 더 많은 힌트를 주세요!

좋다그리고 힌트가 하나 더 있습니다. 이제 게임을 시작할 준비가 되어 있어야 합니다.
게임을 시작하기 전에 다음 코드를 실행하고 이해해 보세요.
코드는 게임의 주요 메커니즘을 어떻게 실현하는지 보여 준다.

<canvas id="canvas" tabindex="1" width="800" height="600"></canvas>

<script src="easycanvas.js"></script>
<script>

// Note: Include the code of easyCanvas here if you don't include the above script

// ===============
// BEGIN USER CODE
// ===============

var xObject = 0;
var xPaddle = width / 2;

textSize(12);

// This function gets called automatically in a `loop` by the `engine`
function loop() {
    // Clear the canvas
    background("black")

    // Draw the moving object
    noFill();
    strokeWidth(2);
    stroke("white");
    rect(xObject, 10, 30, 30);

    // Draw the paddle
    fill("red");
    noStroke();
    rect(xPaddle, height - 50, 100, 30);

    // Display text
    fill("white");
    text("Use LEFT and RIGHT arrows to move", 10, 580);

    // Update object position
    xObject++;

    // Update paddle on key press
    if (keyIsDown(RIGHT_ARROW)) {
        xPaddle += 3;
    }
    else if (keyIsDown(LEFT_ARROW)) {
        xPaddle -= 3;
    }
    else if (keyIsDown(SPACE)) {

    }
}

</script>

보상 포인트

이 게임 잼 경기에서 추가 점수를 얻으려면 게임에서도 다음과 같은 몇 가지를 해야 한다.

업데이트 논리와 게임 순환 내 디스플레이 논리 분리

가장 창의적인 방식으로 적의 배와 당신의 배를 장식한다(물론 rect기능만 사용한다)

별을 움직인다

게임 개선, 유저 경탄!

주의: 인코딩을 마친 후 게임을 당신의 아이나 가족에게 보여줍니다...그들이 어떻게 생각하는지 봐라!게임 메커니즘이나 도형을 어떻게 개선하는지에 대한 그들의 의견을 찾습니다!

솔루션 전송

해결 방안(코드)과 화면 캡처/화면 방송을 댓글로 발표해 주십시오.
만약 당신의 코드가 매우 크다면...이메일을 통해 주요 부분을 공유하고 나머지는 온라인 운동장에 놓는다.
즐거움 코드👨‍💻👩‍💻 !!!

easyCanvas 회사

현재 위조 라이브러리의 코드를 보십시오.

// ===========
// EASY CANVAS
// ===========

// This is an IIFE expression that will 'populate' the global space (e.g. window)
// with a few useful constants and functions to manipulate the canvas easily!

// Requirement: Use ONLY these global / public functions in your game!

(function(canvasId) {

    // --- Begin boiler plate and private code for canvas manipulation

    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext('2d');

    const attributes = {
        fill : "black",
        stroke : "black",
        strokeWidth : 1,
        useFill : true,
        useStroke : true,
        textSize : 12
    }

    requestAnimationFrame(repeatOften);

    function repeatOften() {
        // If you define a function called `loop` in your progra
        // the engine will call it automatically
        if (window.loop)
            window.loop();

        requestAnimationFrame(repeatOften);
    }

    // --- Begin boiler plate and private code for keyboard manipulation

    const keyPressed = new Map();

    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);

    function handleKeyDown(eventArgs) {
        if (!keyPressed.has(eventArgs.keyCode)) {
            keyPressed.set(eventArgs.keyCode, eventArgs.keyCode);
        }
    }

    function handleKeyUp(eventArgs) {
        if (keyPressed.has(eventArgs.keyCode)) {
            keyPressed.delete(eventArgs.keyCode);
        }
    }

    // --- Begin public functions (e.g. added to the global window object)
    // --- Feel free to use any of these global constants / functions in your program

    // Put a few constants in the global scope
    window.width = canvas.width;
    window.height = canvas.height;
    window.LEFT_ARROW = 37;
    window.RIGHT_ARROW = 39;
    window.SPACE = 32;

    // Clear the canvas with the specified color
    window.background = function(color) {
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // Specify that the next shape won't be filled
    window.noFill = function() {
        attributes.useFill = false;
    }

    // Specify that the next shaped should be filled with specified color
    window.fill = function(color) {
        attributes.useFill = true;
        attributes.fill = color;
    }

    // Specify that the next shape should not have a stroke stroke
    window.noStroke = function() {
        attributes.useStroke = false;
    }

    // Specify the stroke width for the next shape
    window.strokeWidth = function(n) {
        attributes.useStroke = true;
        attributes.strokeWidth = n;
    }

    // Specify the stroke color for the next shape
    window.stroke = function(color) {
        attributes.stroke = color;
    }

    // Draw a rectangle
    window.rect = function(x, y, width, height) {
        if (attributes.useFill) {
            ctx.fillStyle = attributes.fill;
            ctx.fillRect(x, y, width, height);
        }

        if (attributes.useStroke) {
            ctx.lineWidth = attributes.strokeWidth;
            ctx.strokeStyle = attributes.stroke;
            ctx.strokeRect(x, y, width, height);
        }
    }

    // Specify the text size of the next drawn text
    window.textSize = function(n) {
        attributes.textSize = n;
    }

    // Write a text at specified coordinates
    window.text = function(txt, x, y) {
        ctx.font = attributes.textSize + "px serif";

        ctx.fillStyle = attributes.fill;
        ctx.fillText(txt, x, y);
    }

    // Returns true if key with specified code is pressed
    window.keyIsDown = function(code) {
        if (keyPressed.has(code))
            return true;
    }
})("canvas");

메모

이 도전은 이 가져온 것으로 모든 연령대를 대상으로 하는 재미있는 오락 인코딩 플랫폼이다.
codeguppy.com