붉은 광장을 이동하려면 버튼을 누르십시오 :
컨트롤에 타
이제 우리는 붉은 광장을 제어 할 수 있습니다.
네 개의 버튼, 위, 아래, 왼쪽, 오른쪽을 추가합니다.
선택한 방향으로 구성 요소를 이동하려면 각 버튼에 대한 기능을 작성합니다.
에 두 개의 새로운 속성을 component 생성자, 그리고 그들에게 전화 speedX 및 speedY . 이러한 특성은 속도 지표로 사용되고있다.
에서 함수 추가 component 라는 생성자, newPos() 용도, speedX 및 speedY 구성 요소의 위치를 변경하는 속성을.
newpos 기능 컴포넌트를 그리기 전에 updateGameArea 함수로부터 호출 :
예
<script>
function component(width, height,
color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height) ;
}
this.newPos = function() {
this.x += this.speedX;
this.y
+= this.speedY;
}
}
function updateGameArea() {
myGameArea.clear() ;
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY -= 1;
}
function movedown() {
myGamePiece.speedY += 1;
}
function moveleft() {
myGamePiece.speedX -= 1;
}
function moveright() {
myGamePiece.speedX += 1;
}
</script>
<button
onclick="moveup()">UP</button>
<button
onclick="movedown()">DOWN</button>
<button
onclick="moveleft()">LEFT</button>
<button
onclick="moveright()">RIGHT</button> »그것을 자신을 시도 이동 중지
당신이 원하는 경우 버튼을 놓을 때, 당신은 붉은 광장 정지를 할 수 있습니다.
0 속도 지표를 설정하는 기능을 추가합니다.
일반 화면과 터치 스크린 모두를 처리하기 위해, 우리는 두 장치에 대한 코드를 추가합니다 :
예
function
stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button
omousedown="moveup()" onmouseup="stopMove()"
ontouchstart="moveup() ">UP</button>
<button
omousedown="movedown()" onmouseup="stopMove()"
ontouchstart="movedown()" >DOWN</button>
<button
omousedown="moveleft()" onmouseup="stopMove()"
ontouchstart="moveleft()" >LEFT</button>
<button
omousedown="moveright()" onmouseup="stopMove()"
ontouchstart="moveright()" >RIGHT</button>
»그것을 자신을 시도 컨트롤러로 키보드
우리는 또한 키보드의 화살표 키를 사용하여 붉은 광장을 제어 할 수 있습니다.
키를 누르면 확인하는 방법을 만들고 설정 key 의 속성 myGameArea 키 코드에 객체를. 키가 해제되면, 설정 key 에 속성을 false :
예
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.key = e.keyCode;
})
window.addEventListener('keyup', function (e) {
myGameArea.key = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}화살표 키 중 하나를 누를 경우 다음 우리는 빨간색 사각형을 이동할 수 있습니다 :
예
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY =
0;
if (myGameArea.key && myGameArea.key == 37)
{myGamePiece.speedX = -1; }
if (myGameArea.key &&
myGameArea.key == 39) {myGamePiece.speedX = 1; }
if
(myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
} »그것을 자신을 시도 다중 키 누름
두 개 이상의 키가 동시에 눌려 있으면 무엇?
위의 예에서 구성 요소는 수평 또는 수직으로 이동할 수 있습니다. 이제 우리는 구성 요소는 대각선으로 이동합니다.
크리에이트 keys 에 대한 배열 myGameArea 개체를 누를 때마다 키에 대해 하나의 요소를 삽입하고, 그것을 가치 제공 true 키가 더 이상 누를 전까지, 값은 값이되고, 진정한 남아 false KeyUp 이벤트 리스너 함수 :
예
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY =
0;
if ( myGameArea.keys && myGameArea.keys[37] )
{myGamePiece.speedX = -1; }
if ( myGameArea.keys &&
myGameArea.keys[39] ) {myGamePiece.speedX = 1; }
if
( myGameArea.keys && myGameArea.keys[38] ) {myGamePiece.speedY = -1; }
if ( myGameArea.keys && myGameArea.keys[40] ) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
} »그것을 자신을 시도 컨트롤러로 마우스 커서를 사용하여
마우스 커서를 사용하여 붉은 광장을 제어하려는 경우에 방법 추가 myGameArea x 및 마우스 커서의 y 좌표를 갱신 개체를 :.
예
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //hide the original cursor
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousemove', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
},
clear :
function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}그 다음 우리는 마우스 커서를 사용하여 빨간색 사각형을 이동할 수 있습니다 :
예
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
} »그것을 자신을 시도 게임을 제어 할 수있는 터치 스크린
우리는 또한 터치 스크린에 빨간색 사각형을 제어 할 수 있습니다.
에 메서드를 추가 myGameArea x 및 화면 터치 위치의 y 좌표를 사용하여 객체 :
예
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('touchmove', function (e) {
myGameArea.x = e.touches[0].screenX;
myGameArea.y = e.touches[0].screenY;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
사용자는 우리가 마우스 커서처럼 동일한 코드를 사용하여 화면을 터치한다면 우리는 붉은 사각형 이동할 수 :
예
function updateGameArea() {
myGameArea.clear();
if (myGameArea.touchX && myGameArea.touchY) {
myGamePiece.x = myGameArea.x;
myGamePiece.y =
myGameArea.y;
}
myGamePiece.update();
}
»그것을 자신을 시도 캔버스에 컨트롤러
우리는 또한 캔버스에 우리 자신의 버튼을 그리고 컨트롤러로 사용할 수 있습니다 :
예
function startGame() {
myGamePiece = new component(30, 30, "red" , 10,
120);
myUpBtn = new component(30, 30,
"blue" , 50, 10);
myDownBtn = new
component(30, 30, "blue" , 50, 70);
myLeftBtn = new component(30, 30, "blue" , 20,
40);
myRightBtn = new component(30, 30,
"blue" , 80, 40);
myGameArea.start();
}이 경우, 구성 요소의 경우 버튼을 파악 새로운 기능을 추가, 클릭.
마우스 버튼을 클릭하면 확인하는 이벤트 리스너를 추가하여 시작 ( mousedown and mouseup ) . 터치 스크린에 대처하기 위해, 또한 화면을 클릭하면 확인하는 이벤트 리스너를 추가 ( touchstart and touchend ) :
예
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousedown', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('mouseup', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
window.addEventListener('touchstart', function (e) {
myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('touchend', function (e) {
myGameArea.x = false;
myGameArea.y = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
} 이제 myGameArea 목적은 우리에게 x 및 클릭의 y 좌표를 알려줍니다 속성이 있습니다. 우리는 클릭이 우리의 파란색 버튼 중 하나를 수행되었는지 확인 theese 속성을 사용합니다.
새로운 메소드가 불려 clicked 가하는 방법이다, component 생성자 및 구성 요소가 클릭되는 경우가 확인합니다.
에서 updateGameArea 파란색 버튼 중 하나를 클릭하면 기능, 우리는 neccessarry 작업을 수행 :
예
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.clicked = function() {
var myleft = this.x;
var
myright = this.x + (this.width);
var mytop = this.y;
var
mybottom = this.y + (this.height);
var clicked = true;
if
((mybottom < myGameArea.y) || (mytop > myGameArea.y)
|| (myright < myGameArea.x) || (myleft > myGameArea.x)) {
clicked = false;
}
return clicked;
}
}
function
updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
if (myUpBtn.clicked()) {
myGamePiece.y -= 1;
}
if (myDownBtn.clicked()) {
myGamePiece.y += 1;
}
if (myLeftBtn.clicked()) {
myGamePiece.x += -1;
}
if (myRightBtn.clicked()) {
myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
} »그것을 자신을 시도