백괴게임>Bd3076 |
백괴게임>Bd3076 |
| 124번째 줄: |
124번째 줄: |
| * {{ㅁ|/틀|틀}} | | * {{ㅁ|/틀|틀}} |
| * {{ㅁ|/자스실험실|자스실험실}} | | * {{ㅁ|/자스실험실|자스실험실}} |
|
| |
|
| |
| ==임시==
| |
| var cvs = document.getElementById("cvs");
| |
| cvs.innerHTML = ('<canvas id="canvas" width="840" height="600"></canvas>')
| |
| var canvas = document.getElementById('canvas');
| |
| var ctx = canvas.getContext('2d');
| |
|
| |
| ctx.fillStyle = "black";
| |
| ctx.fillRect(0, 0, 840, 600);
| |
|
| |
| var dummyImage = new Image();
| |
| dummyImage.src = "https://vignette.wikia.nocookie.net/undertale/images/c/cb/Dummy.png";
| |
|
| |
| dummyImage.onload = function(){
| |
| ctx.drawImage(dummyImage, 365, 130, 110, 140);
| |
| };
| |
|
| |
| function clearText(){
| |
| ctx.fillStyle = 'white';
| |
| ctx.fillRect(30, 320, 780, 200);
| |
| ctx.fillStyle = 'black';
| |
| ctx.fillRect(40, 330, 760, 180);
| |
| }
| |
|
| |
| clearText();
| |
|
| |
| ctx.font = '30px Arial white';
| |
| ctx.fillStyle = "white";
| |
| ctx.fillText("* 연습용 인형과 만났다!", 50, 365);
| |
|
| |
|
| |
| var fightButton = new Image();
| |
| fightButton.src = "https://i.imgur.com/3pSRSSo.png";
| |
| // fightbutton_selected: "https://i.imgur.com/8GVYcjX.png"
| |
|
| |
| var actButton = new Image();
| |
| actButton.src = "https://i.imgur.com/M5vqPpT.png";
| |
| // actButton_selected: "https://i.imgur.com/wBJELQc.png"
| |
|
| |
| var itemButton = new Image();
| |
| itemButton.src = "https://i.imgur.com/Pn1nC9X.png";
| |
| // itemButton_selected: "https://i.imgur.com/6AFmCNV.png"
| |
|
| |
| var mercyButton = new Image();
| |
| mercyButton.src = "https://i.imgur.com/WNlPsSO.png";
| |
| // mercyButton.src: "https://i.imgur.com/PlmK0H6.png"
| |
|
| |
| fightButton.onload = function(){
| |
| ctx.drawImage(fightButton, 40, 540);
| |
| };
| |
|
| |
| actButton.onload = function(){
| |
| ctx.drawImage(actButton, 257, 540);
| |
| };
| |
|
| |
| itemButton.onload = function(){
| |
| ctx.drawImage(itemButton, 474, 540);
| |
| };
| |
|
| |
| mercyButton.onload = function(){
| |
| ctx.drawImage(mercyButton, 691, 540);
| |
| };
| |
|
| |
| var buttonCursor = 1;
| |
|
| |
| function updateButton(){
| |
| switch(buttonCursor){
| |
| case 1:
| |
| fightButton.src = "https://i.imgur.com/8GVYcjX.png";
| |
| actButton.src = "https://i.imgur.com/M5vqPpT.png";
| |
| itemButton.src = "https://i.imgur.com/Pn1nC9X.png";
| |
| mercyButton.src = "https://i.imgur.com/WNlPsSO.png";
| |
| break;
| |
| case 2:
| |
| fightButton.src = "https://i.imgur.com/3pSRSSo.png";
| |
| actButton.src = "https://i.imgur.com/wBJELQc.png";
| |
| itemButton.src = "https://i.imgur.com/Pn1nC9X.png";
| |
| mercyButton.src = "https://i.imgur.com/WNlPsSO.png";
| |
| break;
| |
| case 3:
| |
| fightButton.src = "https://i.imgur.com/3pSRSSo.png";
| |
| actButton.src = "https://i.imgur.com/M5vqPpT.png";
| |
| itemButton.src = "https://i.imgur.com/6AFmCNV.png";
| |
| mercyButton.src = "https://i.imgur.com/WNlPsSO.png";
| |
| break;
| |
| case 4:
| |
| fightButton.src = "https://i.imgur.com/3pSRSSo.png";
| |
| actButton.src = "https://i.imgur.com/M5vqPpT.png";
| |
| itemButton.src = "https://i.imgur.com/Pn1nC9X.png";
| |
| mercyButton.src = "https://i.imgur.com/PlmK0H6.png";
| |
| break;
| |
| }
| |
| }
| |
|
| |
| setInterval(updateButton, 30);
| |
|
| |
| var type = 0;
| |
| var optionCursor = 1;
| |
| var optionSize = new Array();
| |
| optionSize[1] = 0;
| |
| optionSize[2] = 2;
| |
| optionSize[3] = 0;
| |
| optionSize[4] = 2;
| |
|
| |
| function onKeyDown(e){
| |
| var ek = e.keyCode;
| |
| if(type==0){
| |
| if(ek == 37 && buttonCursor != 1) buttonCursor--;
| |
| if(ek == 39 && buttonCursor != 4) buttonCursor++;
| |
| if(ek == 13){
| |
| type = 1;
| |
| showOptions();
| |
| }
| |
| }
| |
| else if(type==1){
| |
| if(ek == 38 && optionCursor != 1){
| |
| optionCursor--;
| |
| printOptionHeart();
| |
| }
| |
| if(ek == 40 && optionCursor != optionSize[buttonCursor]){
| |
| optionCursor++;
| |
| printOptionHeart();
| |
| }
| |
| }
| |
| }
| |
|
| |
| function printOptionHeart(){
| |
| fillText();
| |
| }
| |
|
| |
| window.addEventListener("keydown",onKeyDown,false);
| |
|
| |
| function showOptions(){
| |
| clearText();
| |
| switch(buttonCursor){
| |
| case 1:
| |
|
| |
| break;
| |
| case 2:
| |
| ctx.fillStyle = "white";
| |
| ctx.fillText("* 살펴보기", 50, 365);
| |
| ctx.fillText("* 대화하기", 50, 405);
| |
| ctx.fillText("♥", 200, 365);
| |
| break;
| |
| case 3:
| |
|
| |
| break;
| |
| case 4:
| |
|
| |
| break;
| |
| }
| |
| }
| |
