Хочу сделать так, чтобы при нажатии на яблоко, она исчезла и прибавила score++ click array canvas onclick?

Question

[CrystaZZ]

Уважаемые програмиисты. Помогите мне пожалуйста ) хочу сделать так, чтобы при нажатии на яблоко, она исчезла и прибавила score++

(click) должен срабатывать именно при нажатии, на яблоко то есть "apple"
код игры:

spoiler

window.stopgame = false;

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

var fonimg = new Image();
fonimg.src = "img/bg.jpg";

var push = new Image();

push.src = "img/push.gif";

var score = 0;
var second = 30;

//Privilegie

let coin = 1000;

var buyelexir = 0;

var tims = second;


var gap = 273;
var gapbig = 273;

var self = false;

var username = document.getElementById("nameplayer").value;

var result = second + score;

//Start podvodnyi_mir music :)

let podvodnyi_mir = new Audio();
podvodnyi_mir.src = "audio/podvodnyi_mir.mp3"

let speed = {x:0, y:300,dx:1,dy:2};

var x=10;

//Маленькая рыбка

function getMouesPosition(e) {
    var mouseX = e.offsetX * cvs.width / cvs.clientWidth | 0;
    var mouseY = e.offsetY * cvs.height / cvs.clientHeight | 0;
    return {x: mouseX, y: mouseY};
}

function killFoodbig(f) {
	var pos = fish.indexOf(f);
  if (pos === -1) {
    return;
  }
  fish.splice(pos, 1);
	score += 20;
}

function foodbig(e){
	let mouse = getMouesPosition(e);
  fish.forEach(f => {
  	if (mouse.x > f.x && mouse.y > f.y && mouse.x < f.x + fishsmall.width && mouse.y < f.y + fishsmall.height) {
    	killFoodbig(f);
    }
  });
}
cvs.addEventListener("click", foodbig);
//Средняя рыбка


cvs.addEventListener("click", food);

function killFood(f) {
	let pos = fishbigg.indexOf(f);
  if (pos === -1) {
    return;
  }
  fishbigg.splice(pos, 1);
	score += 40;
}

function food(e){
	let mouse = getMouesPosition(e);
  fishbigg.forEach(f => {
  	if (mouse.x > f.x && mouse.y > f.y && mouse.x < f.x + fishbig.width && mouse.y < f.y + fishbig.height) {
    	killFood(f);
    }
  });
}

let fish = [];

fish[0] = {
	x : cvs.width,
	y : 650
}

let fishbigg = [];
fishbigg[0] = {
	x : cvs.width - cvs.width,
	y : 450
},

fishbigg[1] = {
	x : 732,
	y : 950
}



if(window.stopgame)fonimg.onload = function (){
	game();
}

function game(){
if(!window.stopgame)render();
requestAnimationFrame(game);
}


function render(){
//FON
	ctx.drawImage(fonimg, 0, 0, );
//Физика


 for(var i = 0; i < fish.length; i++){
		 ctx.drawImage(fishsmall, fish[i].x, fish[i].y);
		 
		 
      fish[i].x-= 2;
		 
		 if(fish[i].x === cvs.width - 550){
		    fish.push({
		       x : cvs.width,
		       y : ~~(Math.random() * fishsmall.height - fishsmall.height + gapbig)
	        })
			
		}
		
		if(fish.length <= 1){
			fish.push({
		       x : cvs.width + gap,
		       y : ~~Math.floor(Math.random() * fishsmall.height - fishsmall.height + gapbig)
	        })
		}
		
		
 }
 
//Средняя рыбка

 for(let i = 0; i < fishbigg.length; i++){
		 ctx.drawImage(fishbig, fishbigg[i].x, fishbigg[i].y);
		 		
		fishbigg[i].x+= 2;
		
		if(fishbigg[i].x == cvs.width - 1830){
			fishbigg.push({
				x : cvs.width - 2150,
				y : cvs.height - ~~(Math.random() * cvs.height)
			})
			
 } }
 
  switch(fish){
	case 0:
	        fishbigg.push({
				x : cvs.width,
				y : 0
			})
			break;
}
	
	document.getElementById("score").innerHTML = (score);
	document.getElementById("coin").innerHTML = (coin);
	document.getElementById("tiktak").style.display = "block";
	document.getElementById("scores").style.display = "block";
	 

document.getElementById("nameinfo").style.display = "block";
document.getElementById("leaderboard").style.display = "block";
document.getElementById("leaderboard-fon").style.display = "block";
document.getElementById("pausegame").style.display = "block";
document.getElementById("top-block").style.display = "block";
document.getElementById("bottom-block-elixir").style.display = "block";
}

//Start Game
function startgame(){

   document.getElementById("content").style.display = "none";
   game() <= false;
   timer() <= false;
  
}

//Value Input + name
window.value = function (value){
	document.getElementById("nameinfo").innerHTML = (value);
	document.getElementById("result-name").innerHTML = (value);
	console.log(value);
}

//Кнопка пауза
function pause(){
	window.stopgame = !window.stopgame;
}

//Покупка Элексира
window.byelexir = function (t){
	coin-= 50;
	document.getElementById("elexir-time").innerHTML = (buyelexir)
	buyelexir+=1;
	coin > 0 ? coin-- : coin = 0;
	
	if(coin == 0){
		
		buyelexir--;
		
	}
     
	if(coin == 0)return error_coins();
}

//Рспользовать Элексир
function elexir_time_take(){
	document.getElementById("elexir-time").innerHTML = (buyelexir)
	buyelexir--;
	
	if(buyelexir < 0){
		buyelexir = 0;
}
	
    if(buyelexir > 0)return second+= 30;
	
	if(buyelexir <= 0){
		error_elexir();
	}
	else{
		alert('Ошибка')
	}
     
    	 

}


//Увдомление об ошибке
function error_coins(str) {
        $('#error_message').html(str);
        $("#error_box").fadeIn(500).delay(3000).fadeOut(500);
		$("#error_coins").fadeIn(500).delay(3000).fadeOut(500);
}

function error_elexir(str) {
        $('#error_message').html(str);
		$("#error_elexir").fadeIn(500).delay(3000).fadeOut(500);
}

не удалось сделать :(

Help Me :)

Comments

[Модератор]

3. В процессе создания вопроса пользователь Сервиса обязан:

3.8. Использовать для демонстрации фрагментов кода только специальный тег <code></code> или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/).

[CrystaZZ]

Модератор, Извините, я не знал :)

Answer 1

[Владимир Проскурин]

При клике на канву, нужно делать проверку, что кликнули в область одной из яблок. Для этого нужно при каждом клике для каждого яблока делать проверку, что mouseX > apple.x и mouseX < apple.x + apple.width, и также для Y - mouseY > apple.y и mouseY < apple.y + apple.height
UPD: смотрите. Для начала, нам нужно получить координаты мыши, но просто так извлечь координаты мыши из объекта события mousemove нельзя, нужно провести некоторые манипуляции.
1) Назначьте событие mousemove не на window, а непосредственно на сам холст, таким образом, можно будет получить координаты мыши, относительно канвы а не окна.
2) У вас канва расширяется на весь экран через css, а значит, и растягивается система координат, от чего кликая например на точку {10, 10} при увеличенной в два раза канве, координата получится {5, 5}. Поэтому, нужно либо менять ширину канвы через JS в атрибут width, либо использовать вот такую функцию

function getMouesPosition(e) {
    var mouseX = e.offsetX * cvs.width / cvs.clientWidth | 0;
    var mouseY = e.offsetY * cvs.height / cvs.clientHeight | 0;
    return {x: mouseX, y: mouseY};
}

в нее нужно передать объект события mousemove. Она получит координаты точки, куда кликнула мышь во внутренней системе координат.

Теперь можно переделать метод food вот таким образом

// Этот метод удаляет нужный фрукт из списка, а также, добавляет очки. 
function killFood(f) {
	let pos = fruit.indexOf(f);
  if (pos === -1) {
  	// already dead
    return;
  }
  fruit.splice(pos, 1);
  score += ~~Math.floor(Math.random()+ 17)
}

function food(e){
  let mouse = getMouesPosition(e); // Получаем координаты мыши
  // Пройдемся по каждому фрукту. Использую forEach, но вы можете и обычный for, только не забывайте обновить переменную индекса
  fruit.forEach(f => {
    if (mouse.x > f.x && mouse.y > f.y && mouse.x < f.x + apple.width && mouse.y < f.y + apple.height) {
      killFood(f); // Удаляем фрукт
    }
  });
}

Работающий пример https://jsfiddle.net/hzbxm5nk/

Comments

[CrystaZZ]

Владимир, Спасибо за ответ :) Скажите пожалуйста, я думал, просто обращаешься по id, и все )
Скажите пожалуйста, а как правильнее написать проверку if или for ?

[CrystaZZ]

canvas.onclick = function apple(e){

var mouseX = e.clientX;
var mouseY = e.clientY;

console.log(mouseX, mouseY);


for(var apple = 0; apple < fruit.length; apple++){
if(mouseX > fruit[apple].x && mouseX < fruit[apple].x + 150 && mouseY > fruit[apple].y && mouseY < fruit[apple].y + 150
&& mouseX > fruit[apple].x && mouseX < fruit[apple].x - 150 && mouseY > fruit[apple].y && mouseY < fruit[apple].y - 150){
alert('hi')
}
}
} правильно ?)

[CrystaZZ]

Не работает :(((

[Владимир Проскурин]

CrystaZZ, обновил ответ.

[CrystaZZ]

Спасибо )) дай Бог вам Здоровья :))))) Огромное Спасибо !!!!