0
У меня есть проблема в моей игре, и я уверен, что это касается перекраски. Таким образом, эта игра заключается в том, что если вы касаетесь голубого куба, вручную управляя своим черным кубом с помощью клавиш со стрелками, каждый раз вы получаете очко. Ну, когда вы делаете это, когда он складывается, новый балл использует его. Эта фотография является лучшим объяснением (Thankyou):Как перерисовать текст в javascript?
Вот JSFiddle Format, Нажмите на редактирование в правом верхнем углу, чтобы изменить код. ПРЕДУПРЕЖДЕНИЕ: вам нужно нажать на игру, чтобы работать.
Вот код:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Basic styling, centering the canvas -->
<style>
</style>
</head>
<body>
<canvas id = "game" width = "500" height = "500"></canvas>
<script>
$(document).ready(function(){
var WIDTH = 500;
var HEIGHT = 500;
var keys = {};
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var score=0;
var snake = {
x:null,
y:null,
width:15,
height:15,
speed : 7,
draw:function(){
ctx.save();
ctx.fillStyle = 'black'
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();
},
/*
left arrow 37
up arrow 38
right arrow 39
down arrow 40
*/
update:function(){
if(keys[39]){
ctx.clearRect(this.x, this.y, this.width, this.height);
this.x += this.speed;
}
if(keys[37]){
ctx.clearRect(this.x, this.y, this.width, this.height);
this.x -= this.speed;
}
if(keys[38]){
ctx.clearRect(this.x, this.y, this.width, this.height);
this.y -= this.speed;
}
if(keys[40]){
ctx.clearRect(this.x, this.y, this.width, this.height);
this.y += this.speed;
}
//Checks if it is out of Bounds
if(this.x>WIDTH-this.width){
this.x=WIDTH-this.width;
}
if(this.x<0){
this.x=0;
}
if(this.y>HEIGHT-this.width){
this.y=HEIGHT-this.width;
}
if(this.y<0){
this.y=0;
}
//Checks Collision
var Collision = function(ax, ay, aw, ah, bx, by, bw, bh) {
return ax < bx+bw && ay < by+bh && bx < ax+aw && by < ay+ah;
};
if(Collision(snake.x,snake.y,snake.width,snake.height,fruits.x,fruits.y,fruits.width,fruits.height)){
ctx.clearRect(fruits.x, fruits.y, fruits.width, fruits.height);
score +=1;
fruits.x = Math.floor(Math.random()*WIDTH);
fruits.y = Math.floor(Math.random()*HEIGHT);
}
}
}
var fruits = {
x:null,
y:null,
width:15,
height:15,
draw:function(){
ctx.save();
ctx.fillStyle = 'blue'
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();
},
update:function(){
}
}
function main(){
document.addEventListener("keydown" , function(event){
keys[event.keyCode] = true;
})
document.addEventListener("keyup" , function(event){
delete keys[event.keyCode];
})
init();
var loop = function(){
update();
draw();
window.requestAnimationFrame(loop, canvas);
};
window.requestAnimationFrame(loop, canvas);
}
function init(){
snake.x = 20;
snake.y = 20;
fruits.x = (WIDTH)/2;
fruits.y = HEIGHT/2;
}
function draw(){
//Drawing the Square
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,HEIGHT);
ctx.lineTo(HEIGHT,WIDTH);
ctx.lineTo(WIDTH,0)
ctx.lineTo(0,0)
ctx.stroke();
ctx.save();
ctx.fillStyle = "red";
ctx.font = "bold 40px monaco";
ctx.fillText(score,60,100);
ctx.save();
snake.draw();
fruits.draw();
ctx.restore();
}
function update(){
snake.update();
fruits.update();
}
main();
})
</script>
</body>
</html>
'ctx.clearRect' – Doorknob
.... Omg im действительно dum, если это работает .. –
Вы уже используете' clearRect' в своем коде. Значит, вы уже знаете, что он очищает прямоугольник. – Oriol