Создание игры с помощью <canvas>

nemo59 · September 3, 2012

Я решил создать игру с помощью <canvas>. Я создал "танк" (на даный момент это прямоугольник), сделал управление "танком", но возникла проблема - "танк" оставляет след. Помогите устранить эту ошибку, буду благодарен. Вод код программы:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#game {
border: 1px solid black;
background: silver;
}
</style>
<script type="text/javascript">
var tank_x = 0;
var tank_y = 0;
function game() {
var game_show = document.getElementById("game").getContext("2d");
game_show.fillStyle = "green";
game_show.fillRect(tank_x, tank_y, 15, 15);
}

function run() {
switch (event.keyCode) {
case 37:
tank_x--;
break;
case 38:
tank_y--;
break;
case 39:
tank_x++;
break;
case 40:
tank_y++;
break;
}
game();
}
</script>
</head>
<body onload="game();" onkeydown="run();">
<canvas height="400" width="500" id="game"></canvas>
</body>
</html>

hedgehog · September 3, 2012

Потому что каждый отрисовывающий что-либо метод рисует по уже существующему canvas, этот след - всего-лишь танк, отрисованный в прошлом "кадре". Нужно очищать canvas перед выводом следующего кадра, в вашем случае лучше всего просто подчищать прямоугольную область, в которой размещался танк в предыдущем кадре.

nemo59 · September 3, 2012

Потому что каждый отрисовывающий что-либо метод рисует по уже существующему canvas, этот след - всего-лишь танк, отрисованный в прошлом "кадре". Нужно очищать canvas перед выводом следующего кадра, в вашем случае лучше всего просто подчищать прямоугольную область, в которой размещался танк в предыдущем кадре.

Спасибо! А как его очищать?

wwt · September 3, 2012

http://learn.javascript.ru/play/duIiN

что-то типо, но в примере очищается вся площадь. Но смысл думаю ясен. Я переписал немного события.

nemo59 · September 3, 2012

http://learn.javascript.ru/play/duIiN
что-то типо, но в примере очищается вся площадь. Но смысл думаю ясен. Я переписал немного события.

Спасибо!

Sign In

Создание игры с помощью <canvas>

Question

nemo59

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

hedgehog

Link to comment

Share on other sites

nemo59

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

nemo59

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information