Я впервые применял HTML-игру.Мне удалось покончить с моей игрой, просто имея https://www.w3schools.com/graphics/game_intro.asp в качестве моего единственного гида.Игра очень проста: случайные объекты (зеленые квадраты) падают сверху.Игрок (красный квадрат) движется вправо и влево.Главная цель игры - собрать / столкнуть как можно больше падающих предметов.Каждый раз, когда происходит столкновение с 1 объектом, игрок зарабатывает 1 очко.Теперь, как я могу уничтожить объект (зеленый квадрат), который сталкивается с игроком и установить 1 очко за раз?
Вот код:
<!DOCTYPE html>
<html>
<head>
<title>Food Game v1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-image: linear-gradient(#FFFDF0, white);
}
/* buttons align in center*/
.center {
margin: auto;
width: 90%;
padding: 10px;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myFallenObj_ = []; //array of fallen objects
var myScore;
function startGame() {
myGamePiece = new component(30, 30, "red", 130, 300);
myScore = new component("10px", "Consolas", "black", 100, 345,"text");
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 300;
this.canvas.height = 350;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0; //if we use an array
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function(){
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.score = 0;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if(this.type == "text"){ //check on text object
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
}else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function(otherobj){
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if((myright < otherleft) || (myleft > otherright) || (mybottom < othertop) || (mytop > otherbottom)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
var width_, minWidth_, maxWidth_;
var x,y;
for (i=0;i<myFallenObj_.length; i++){
if(myGamePiece.crashWith(myFallenObj_[i])){ //if collision happens
myScore.score ++;
//destroy(myFallenObj_[i]);
}
}
myScore.text = "SCORE: " + myScore.score;
//check myGamePiece not go over the left border
if(myGamePiece.x <= 0)
myGamePiece.x = 1;
//check myGamePiece not go over the right border
if(myGamePiece.x > 265)
myGamePiece.x = 260;
myScore.update();
myGameArea.frameNo +=1;
if (myGameArea.frameNo == 1 || everyinterval(150)){
//x = 10;
minWidth_=0;
maxWidth_=300;
width_ = Math.floor(Math.random()*(maxWidth_-minWidth_+1)+minWidth_);
y = - 50;
myFallenObj_.push(new component (30,30,"green", width_, y));
}
for (i=0; i<myFallenObj_.length; i++){
myFallenObj_[i].x +=0;
myFallenObj_[i].y +=1;
myFallenObj_[i].update();
}
}
function everyinterval(n){
if((myGameArea.frameNo /n) % 1 == 0)
return true;
return false;
}
function moveleft() {
myGamePiece.speedX = - 2;
}
function moveright() {
myGamePiece.speedX = 2;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div class="center">
<button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
</div>
</body>
</html>
То, что я сделал до сих пор, это применил это столкновение и посчитал счет, но счет считается до тех пор, пока красный и зеленый продолжают касаться себя (чтонеправильно).
Любые предложения приветствуются, спасибо!