ボタンのクリックでコンポーネントの色を変更する方法

イムはjavascriptでペイントゲームを作ろうとしていますが、 'PaintBrush'コンポーネントの色を変更することはできません。私は関数を介してそれを行い、その関数onclickをボタンに持たせたい。色を変えるためにペイントブラシを得る方法以外はすべて整理しました。これは非常に複雑なので、助けてください。ここに私のコードは次のとおりです。 HTML：ボタンのクリックでコンポーネントの色を変更する方法

<html> 
<body onload="startGame()"> 
<br> 
<button onclick="ThickRed()">Thick Red</button> 
<button onclick="ThinRed()">Thin Red</button> 
<button onclick="ThickYellow()">Thick Yellow</button> 
<button onclick="ThinYellow()">Thin Yellow</button> 
</html>

CSS：

canvas { 
border: 1px solid #d3d3d3; 
background-color: #f1f1f1; 
}

Javascriptを：

document.onkeydown = checkKey; 
function startGame() { 
GameArena.start(); 
} 
var PaintBrush; 
var GameArena = { 
canvas : document.createElement("canvas"), 
start : function() { 
    this.canvas.width = 1280; 
    this.canvas.height = 480; 
    this.context = this.canvas.getContext("2d"); 
    document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
    this.interval = setInterval(updateGameArea, 20); 
}, 
clear : function() { 
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
} 
} 
function startGame() { 
GameArena.start(); 
PaintBrush = new component(30, 30, "red", 10, 320); 
} 
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.color = color; 
this.update = function(){ 
ctx = GameArena.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() { 
PaintBrush.newPos(); 
PaintBrush.update(); 
} 
function checkKey(e) { 

if (e.keyCode == '38') { 
    // up arrow 
    PaintBrush.speedY -= 1; 
} 
else if (e.keyCode == '40') { 
    // down arrow 
    PaintBrush.speedY += 1; 
} 
else if (e.keyCode == '37') { 
    // left arrow 
    PaintBrush.speedX -= 1; 
} 
else if (e.keyCode == '39') { 
    // right arrow 
    PaintBrush.speedX += 1; 
} 

} 
function ThickYellow() { 
PaintBrush.color = Yellow; 
}

助けてください！

出典

2017-02-22 TechEndling

黄色は何ですか？ "黄色"を試し、ブラシの色を更新したら、ctx.fillStyleが正しい色を使用していることを確認してください。色ではなくthis.colorが必要です。現在のペイントブラシは、作成時に指定された最初の色でレンダリングされます。 – nick

Yellowの代わりに文字列"yellow"を使用するか、ファイルの先頭にvar Yellow = "yellow"を定義してください。 context.fillStyleを選択した色で反映させるには、updateの機能を以下のように変更してください。違いはctx.fillStyle = this.colorで、colorではありません。

this.update = function() { 
      ctx = GameArena.context; 
      ctx.fillStyle = this.color; 
      ctx.fillRect(this.x, this.y, this.width, this.height); 
     }

出典

2017-02-22 22:38:14 Paks

私はここであなたのコードに従うビットオブジェクト指向の方法でコードを整理しようとしました。

また、簡単にするためにJSfiddle https://jsfiddle.net/rj1405/qa7q0b9m/

で実行されている例を見つけることができ、私はゲームを開始するためのボタン（ドキュメントの負荷にして置き換えることができます）と2つのボタン、赤と黄色を持っています。

<button id="btn">StartGame</button> 
<button id="btnRed" >Thick Red</button> 
<button id="btnYellow">Thick Yellow</button>

あなたのCSS、ここで

canvas { border: 1px solid #d3d3d3; background-color: #f1f1f1; }

は、メインのJavaScriptです。

document.onkeydown = checkKey;

// Global variables 
var btn = document.getElementById('btn'); 
var btnYellow = document.getElementById('btnYellow'); 
var btnRed = document.getElementById('btnRed'); 
var paintBrush; 

// Main GameArena object 
var GameArena = { 
    canvas : document.createElement("canvas"), 
    start : function() { 
      this.canvas.width = 1280; 
      this.canvas.height = 480; 
      this.context = this.canvas.getContext("2d"); 
     document.body.insertBefore(this.canvas,document.body.childNodes[0]); 
      this.interval = setInterval(updateGameArea, 20); 
     }, 
    clear : function() { 
    this.context.clearRect(0,0,this.canvas.width,this.canvas.height); 
    } 
}; 

// Paint Brush Constructor 
var PaintBrush = function (width, height, color, x, y) { 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y; 
    this.color = color; 
    this.speedX = 0; 
    this.speedY = 0; 

    this.update = function(){ 
     ctx = GameArena.context; 
     ctx.fillStyle = this.color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    }; 

    this.newPos = function() { 
     this.x += this.speedX; 
     this.y += this.speedY; 
    }; 
} 

PaintBrush.prototype.setColor = function(color){ 
    this.color = color; 
    this.update(); 
}; 


// On click Button events 
btn.onclick = function(e) { 
    GameArena.start(); 
    paintBrush = new PaintBrush(30, 30, "red", 10, 320); 
}; 

btnYellow.onclick = function(e) { 
    paintBrush.setColor('yellow'); 
}; 

btnRed.onclick = function(e) { 
    paintBrush.setColor('red'); 
}; 

// Other methods 
function updateGameArea() { 
    paintBrush.newPos(); 
    paintBrush.update(); 
} 

function checkKey(e) { 
    if (e.keyCode == '38') { 
     paintBrush.speedY -= 1; 
    } 
    else if (e.keyCode == '40') { 
     paintBrush.speedY += 1; 
    } 
    else if (e.keyCode == '37') { 
     paintBrush.speedX -= 1; 
    } 
    else if (e.keyCode == '39') { 
     paintBrush.speedX += 1; 
    } 
}

グローバル変数が使用されています。このコードはあなたの後退を解決しますが、それは多くの点で即興にすることができます。

出典

2017-02-22 23:13:26

私のコードを整理してくれてありがとう、私のコードでは、私はctx.fillStyle = this.colorを持っていて、色が黄 – TechEndling

ボタンのクリックでコンポーネントの色を変更する方法

答えて

関連する問題