Comentário: Comer de cobra, as principais funções: 1. O movimento da cobra 2. Mude a direção da cobra 3. Coloque os alimentos 4. Aumente o sacrifício de si mesmo 5. Como pendurá -lo, a implementação específica é a seguinte. É simples e prático em 60 linhas. Amigos interessados podem se referir a ele. Espero que seja útil para todos.
Eu raramente prestava atenção ao HTML5 no passado. Sinto que a escolha do HTML se tornou gradualmente uma tendência, então quero saber sobre isso. Encontrei um jogo para aprender. Depois de escrever este jogo, senti que o HTML5 e o JS estavam intimamente integrados, se JS não fosse particularmente bom. Acho que preciso levar um JS de tutoria primeiro. Este é apenas o meu conselho pessoal e pode não ser preciso. Outra coisa é que você deve estar particularmente claro sobre seu pensamento e lógica, caso contrário, escrever jogos pode ser doloroso.As principais funções das cobras gananciosas: 1. A cobra se move 2. Mude a direção da cobra 3. Coloque os alimentos 4. Aumente o sacrifício 5. Como pendurá -lo.
A primeira vez que escrevi um jogo, a primeira vez que escrevi HTML5, foi muito difícil. Terminei de escrever e vou compartilhar com você. Comunicação um com o outro ... se você não entende ou tiver sugestões, deixe -me uma mensagem. . . O código é muito curto, apenas 60 linhas.
Mas este é um produto semi-acabado e acabou. Atualizar novamente
<! Doctype html>
<html>
<Body>
<lVAs> </canvas>
<script type = "text/javascript">
var c = document.getElementById ("mycanvas");
var time = 160; // velocidade de cobra
var cxt = c.getContext ("2D");
var x = y = 8;
var a = 0; // coordenadas alimentares
var t = 20; // sacrifique sua vida
var map = []; // Registre o caminho de corrida de cobra
Var tamanho = 8; // Tamanho da unidade corporal de cobra
direção var = 2; // 1 UP 2 Direita 0 esquerda 3
interval = window.setInterval (set_game_speed, tempo); // Mova a cobra
função set_game_speed () {// mova a cobra
Switch (direção) {
caso 1: y = y-size; quebra;
caso 2: x = x+tamanho; quebra;
caso 0: x = x-size; quebra;
Caso 3: y = y+tamanho; quebra;
}
if (x> 400 || y> 400 || x <0 || y <0) {
Alerta ("Você está morto, continue trabalhando duro! Motivo do fracasso: estou atingindo uma parede ..."); window.Location.Reload ();
}
for (var i = 0; i <map.length; i ++) {
if (parseint (mapa [i] .x) == x && parseint (map [i] .y) == y) {
Alerta ("Você está morto, continue trabalhando duro! A razão do fracasso: eu me esbarrei ..."); window.Location.Reload ();
}
}
if (map.length> t) {// mantenha seu comprimento de sacrifício
var cl = map.shift (); // exclua o primeiro item da matriz e retorne o elemento original
cxt.clearrect (cl ['x'], cl ['y'], tamanho, tamanho);
};
map.push ({'x': x, 'y': y}); // Adicione dados ao final da matriz original
cxt.fillstyle = "#006699"; // cor de preenchimento interna
cxt.strokestyle = "#006699"; // cor de borda
cxt.fillrect (x, y, tamanho, tamanho); // desenhe retângulo
if ((a*8) == x && (a*8) == y) {// coma comida
rand_frog (); t ++;
}
}
document.onkeydown = function (e) {// altere a direção da cobra
var código = e.KeyCode - 37;
Switch (código) {
Caso 1: direção = 1; quebra; // em
Caso 2: direção = 2; quebra; // à direita
Caso 3: direção = 3; quebra; // Próximo
caso 0: direção = 0; quebra; // esquerda
}
}
// Coloque comida aleatoriamente
função rand_frog () {
a = math.ceil (math.random ()*50);
cxt.fillstyle = "#00000"; // cor de preenchimento interna
cxt.strokestyle = "#00000"; // cor de borda
cxt.fillrect (a*8, a*8, 8, 8); // desenhe o retângulo
}
// Coloque comida aleatoriamente
rand_frog ();
</script>
</body>
</html>