[html5 canvas] selezionare il giocatore

[LedGiallo]

Salve, sto facendo un piccolo gioco ovvero il "ping pong", ed ora mi è venuto in mente di fare la schermata per far selezionare il colore del giocatore e metterlo nel tavolo.

avete idea come fare?

tutto il resto è ok e tutto finito, ma volevo aggiungere questa possibilità di scegliere il colore.

idea?

vi ringrazio molto.
buona giornata.

[LedGiallo]

ho questo codice:

function DrawMenu() {
	    setCanvasBackground('#ffffff');
		Clear();
		drawString("Seleziona il colore del giocatore", 150, 140, '40px arial ', '#000000'); 
		drawRect(100, 40, 50, 50, 'red', '');
		drawRect(200, 40, 50, 50, 'blue', '');
		drawRect(300, 40, 50, 50, 'yellow', '');
		drawRect(400, 40, 50, 50, 'orange', '');
		drawRect(500, 40, 50, 50, 'white', '');
		drawRect(600, 40, 50, 50, 'green', '');
}

e che sono funzioni fatte da me che vanno ad replicare il fillrect e strokerect in una sola funzione..

come faccio con il mouse cliccare sull'oggetto desiderato ?

vi posto l'immagine:
menu.jpg

grazie mille e vi ringrazio e buona serata.

[cavicchiandrea]

Sicuro che stiamo parlando di javascript?

[LedGiallo]

si , sono funzioni che ho fatto io e c'è in un f.js che ho fatto io .. nel frattempo che mi hai scritto ho trovato questo esempio.. ma non riesco ad capire dove è il meccanismo che seleziona l'oggetto.

<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc--><br>
<canvas id="myCanvas" width="400" height="230" onclick="DefinePaths(event)"></canvas>
<script>
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')
    var deg = Math.PI/180
	DefinePaths(null)
	
function DefinePaths(event){
   
 	ctx.beginPath()
 	ctx.moveTo(10, 70)
	ctx.bezierCurveTo (60, 70, 60, 0, 110, 70)
	if (event!=null){
		if (IsInPath(event)) 	SelStyle() 
		else 					DifStyle()
	}else 						DifStyle()
	ctx.closePath()
    ctx.fill()
    ctx.stroke()


	ctx.beginPath()
	ctx.moveTo(200, 20)
	ctx.lineTo(250, 20)
	ctx.quadraticCurveTo(280, 20, 280, 40)
	ctx.lineTo(280, 80)
	ctx.quadraticCurveTo(260, 80, 250, 100)
	ctx.lineTo(200, 100)
	ctx.quadraticCurveTo(190, 80, 170, 80)
	ctx.lineTo(170, 40)
	ctx.quadraticCurveTo(170, 20, 200, 20)
	if (event!=null){
		if (IsInPath(event)) 	SelStyle() 
		else 					DifStyle()
	}else 						DifStyle()
	ctx.closePath()
    ctx.fill()
    ctx.stroke()


 	ctx.beginPath()
 	ctx.moveTo(10, 130)
	ctx.lineTo(10, 200)
	ctx.lineTo(100, 200)
	if (event!=null){
		if (IsInPath(event)) 	SelStyle() 
		else 					DifStyle()
	}else 						DifStyle()
	ctx.closePath()
    ctx.fill()
    ctx.stroke()


 	ctx.beginPath()
 	ctx.moveTo(220, 130)
	ctx.lineTo(170, 180)
	ctx.lineTo(220, 230)
	ctx.lineTo(270, 180)
	if (event!=null){
		if (IsInPath(event)) 	SelStyle() 
		else 					DifStyle()
	}else 						DifStyle()
	ctx.closePath()
    ctx.fill()
    ctx.stroke()    
}


function IsInPath(event) {
	var bb, x, y
	bb = cnv.getBoundingClientRect()
	x = (event.clientX-bb.left) * (cnv.width/bb.width)
	y = (event.clientY-bb.top) * (cnv.height/bb.height)
	return ctx.isPointInPath(x,y)
}


function SelStyle(){
    ctx.lineWidth= 2
    ctx.strokeStyle= "brown"
    ctx.fillStyle= "cyan"
}
function DifStyle(){
    ctx.lineWidth= 2
    ctx.fillStyle= "gray"
    ctx.strokeStyle= "darkblue"
}
</script>

grazie ti ringrazio se provi questo ultimo codice.

buona giornata.

[cavicchiandrea]

Ok, era solo per precisare (avvolte confondono qui per java) per il tuo problema è troppo complesso per le mie stanche meningi

[LedGiallo]

ok, ora mi sono messo ad fare un po di debug con console.log che ho trovato come funziona l'esempio.. appena riesco incollo il codice..
grazie mille.