자바스크립트 게임의 포털

10418 단어 webdev javascript tutorial gamedev

html, css 및 바닐라 자바스크립트만 사용하여 토러스 표면의 2d 표현과 같이 4면 모두가 반대편에 대한 포털인 정사각형 표면을 만들었습니다.
동일한 비디오 표현을 원하시면 여기에 비디오 링크가 있습니다.

HTML

html의 기본 설정을 수행하고 html5 캔버스 태그를 추가하는 것으로 시작합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TORUS</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <canvas id="canvas1"></canvas>
</body>
</html>

CSS

또한 여백, 패딩 및 상자 크기를 설정하여 CSS를 설정합니다.

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Courier New', Courier, monospace;
}

또한 캔버스 요소가 중앙에 오도록 본문을 설정합니다.

body{
    background-color: #c4fdfd4b;
    width: 100vw;
    height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
}

캔버스 요소를 설정하여 CSS 설정을 완료합니다.

#canvas1{
    background-color: #f7debfa6;
    position: relative;
    height:500px;
    width:700px;
    top:0;
    left:0;
    border:solid black 2px;
}

js

캔버스 사이징

css에 쓰여진 높이와 너비와 동일하게 크기를 설정하여 캔버스 크기를 조정하는 것으로 시작합니다.

const canvas = document.getElementById('canvas1')
const ctx = canvas.getContext('2d')
canvas.width=700
canvas.height=500

통제 수단

공의 움직임을 제어하기 위해 변수를 설정합니다.

let dx = 2
let dy = 2
document.addEventListener('keydown',function(e){
    switch(e.code){
        case 'ArrowUp':
            dy=-2
            break
        case 'ArrowLeft':
            dx=-2
            break
        case 'ArrowDown':
            dy=2
            break
        case 'ArrowRight':
            dx=2
            break
    }
})

볼 클래스

공을 만드는 수업

class Ball{
    constructor(){
        this.radius=50
        this.x=canvas.width/2
        this.y=canvas.height/2
        this.xpos1=this.x
        this.xpos2=this.x
        this.ypos1=this.y
        this.ypos2=this.y
    }
    update(){
        this.x+=dx
        this.y+=dy
        this.xpos1+=dx
        this.xpos2+=dx
        this.ypos1+=dy
        this.ypos2+=dy

        ///////////////////////////////////////
        if(this.x>=canvas.width+this.radius && dx==2){
            this.x=this.x-canvas.width
        }else if(this.x<=-this.radius && dx==-2){
            this.x=this.x+canvas.width
        }
        ///////////////////////////////////////
        if(this.y>=canvas.height+this.radius && dy==2){
            this.y=this.y-canvas.height
        }else if(this.y<=-this.radius && dy==-2){
            this.y=this.y+canvas.height
        }
    }
    draw(){
        ctx.lineWidth=2
        ctx.strokeStyle='black'
        ctx.fillStyle='green'
        ctx.beginPath()
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath()
        ctx.fill()
    }
}

애니메이션 기능

공을 움직이는 기능입니다.

let ball1 = new Ball()
function animateMotion(){
    ctx.clearRect(0,0,canvas.width,canvas.height)
    ball1.draw()
    ball1.update()
    requestAnimationFrame(animateMotion)
}
animateMotion()

복제 방법

공이 포털을 통과할 때 공을 복제하기 위해 공 클래스에 복제 메소드를 추가합니다.

class Ball{
    constructor(){
        this.radius=50
        this.x=canvas.width/2
        this.y=canvas.height/2
        this.xpos1=this.x
        this.xpos2=this.x
        this.ypos1=this.y
        this.ypos2=this.y
    }
    update(){
        this.x+=dx
        this.y+=dy
        this.xpos1+=dx
        this.xpos2+=dx
        this.ypos1+=dy
        this.ypos2+=dy

        ///////////////////////////////////////
        if(this.x>=canvas.width+this.radius && dx==2){
            this.x=this.x-canvas.width
        }else if(this.x<=-this.radius && dx==-2){
            this.x=this.x+canvas.width
        }
        ///////////////////////////////////////
        if(this.y>=canvas.height+this.radius && dy==2){
            this.y=this.y-canvas.height
        }else if(this.y<=-this.radius && dy==-2){
            this.y=this.y+canvas.height
        }
    }
    draw(){
        ctx.lineWidth=2
        ctx.strokeStyle='black'
        ctx.fillStyle='green'
        ctx.beginPath()
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath()
        ctx.fill()
    }
duplicate(xcor,ycor){
        ctx.lineWidth=2
        ctx.strokeStyle='black'
        ctx.fillStyle='green'
        ctx.beginPath()
        ctx.arc(xcor,ycor,this.radius,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath()
        ctx.fill()
    }
}

클론 추적

이는 공이 포털과 접촉하여 클론을 만들 수 있는 시기를 알기 위한 것입니다. ball 클래스의 update 메소드에 추가됩니다.

class Ball{
    constructor(){
        this.radius=50
        this.x=canvas.width/2
        this.y=canvas.height/2
        this.xpos1=this.x
        this.xpos2=this.x
        this.ypos1=this.y
        this.ypos2=this.y
    }
    update(){
        this.x+=dx
        this.y+=dy
        this.xpos1+=dx
        this.xpos2+=dx
        this.ypos1+=dy
        this.ypos2+=dy

        ///////////////////////////////////////
        if(this.x>=canvas.width+this.radius && dx==2){
            this.x=this.x-canvas.width
        }else if(this.x<=-this.radius && dx==-2){
            this.x=this.x+canvas.width
        }

        if(this.x>=canvas.width-this.radius){
            this.xpos1=this.x-canvas.width
        }else if(this.x<=this.radius){
            this.xpos2=this.x+canvas.width
        }else{
            this.xpos1=this.x
            this.xpos2=this.x
        }
        ///////////////////////////////////////
        if(this.y>=canvas.height+this.radius && dy==2){
            this.y=this.y-canvas.height
        }else if(this.y<=-this.radius && dy==-2){
            this.y=this.y+canvas.height
        }

        if(this.y>=canvas.height-this.radius){
            this.ypos1=this.y-canvas.height
        }else if(this.y<=this.radius){
            this.ypos2=this.y+canvas.height
        }else{
            this.ypos1=this.y
            this.ypos2=this.y
        }
    }
    draw(){
        ctx.lineWidth=2
        ctx.strokeStyle='black'
        ctx.fillStyle='green'
        ctx.beginPath()
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath()
        ctx.fill()
    }
    duplicate(xcor,ycor){
        ctx.lineWidth=2
        ctx.strokeStyle='black'
        ctx.fillStyle='green'
        ctx.beginPath()
        ctx.arc(xcor,ycor,this.radius,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath()
        ctx.fill()
    }
}

클론 조건

클론을 생성하기 위해 충족해야 하는 조건입니다. 이것은 업데이트 방법에 추가됩니다.

class Ball{
    constructor(){
        this.radius=50
        this.x=canvas.width/2
        this.y=canvas.height/2
        this.xpos1=this.x
        this.xpos2=this.x
        this.ypos1=this.y
        this.ypos2=this.y
    }
    update(){
        this.x+=dx
        this.y+=dy
        this.xpos1+=dx
        this.xpos2+=dx
        this.ypos1+=dy
        this.ypos2+=dy

        ///////////////////////////////////////
        if(this.x>=canvas.width+this.radius && dx==2){
            this.x=this.x-canvas.width
        }else if(this.x<=-this.radius && dx==-2){
            this.x=this.x+canvas.width
        }

        if(this.x>=canvas.width-this.radius){
            this.xpos1=this.x-canvas.width
        }else if(this.x<=this.radius){
            this.xpos2=this.x+canvas.width
        }else{
            this.xpos1=this.x
            this.xpos2=this.x
        }
        ///////////////////////////////////////
        if(this.y>=canvas.height+this.radius && dy==2){
            this.y=this.y-canvas.height
        }else if(this.y<=-this.radius && dy==-2){
            this.y=this.y+canvas.height
        }

        if(this.y>=canvas.height-this.radius){
            this.ypos1=this.y-canvas.height
        }else if(this.y<=this.radius){
            this.ypos2=this.y+canvas.height
        }else{
            this.ypos1=this.y
            this.ypos2=this.y
        }

        ///////////////////////////////////////////////////////////////////
         if(this.x>=canvas.width-this.radius || this.x<=this.radius || this.y>=canvas.height-this.radius || this.y<=this.radius ){
            this.duplicate(this.xpos1,this.ypos1)
            this.duplicate(this.xpos2,this.ypos2)
            this.duplicate(this.xpos1,this.ypos2)
            this.duplicate(this.xpos2,this.ypos1)
        }
    }
    draw(){
        ctx.lineWidth=2
        ctx.strokeStyle='black'
        ctx.fillStyle='green'
        ctx.beginPath()
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath()
        ctx.fill()
    }
    duplicate(xcor,ycor){
        ctx.lineWidth=2
        ctx.strokeStyle='black'
        ctx.fillStyle='green'
        ctx.beginPath()
        ctx.arc(xcor,ycor,this.radius,0,Math.PI*2)
        ctx.stroke()
        ctx.closePath()
        ctx.fill()
    }
}

Reference

이 문제에 관하여(자바스크립트 게임의 포털), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/noobjonh/portals-in-javascript-games-27pm

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

디스플레이에 대한 짧은 소개: 목차

Wordpress에서 관리 표시줄 제거

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다