zcriptz
1
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
Lo hice de cero, todavía no le hice para que colisione con ella misma, coma, vaya agrandándose y haga caca xD.
Si colisiona con las "paredes".
Hay un bug que hace que se achique la serpiente al moverse mucho.
Cuando lo termine lo actualizo.
Código:
Demo: Snake
Si colisiona con las "paredes".
Hay un bug que hace que se achique la serpiente al moverse mucho.
Cuando lo termine lo actualizo.
Código:
Insertar CODE, HTML o PHP:
<script>
window.onload = function(){
snake = document.getElementById('snakeDiv');
snake.direction = 'down';
snake.title = 'first';
speed = 1;
loseMsg = ['Perdiste :('];
keyCodes = new Array;
keyCodes[37] = moveLeft;
keyCodes[38] = moveUp;
keyCodes[39] = moveRight;
keyCodes[40] = moveDown;
moveInterval = new Array;
snakeTmp = new Array;
document.body.style.display = '';
}
function getStyle(e, s){
if(e.style[s])
return Number(e.style[s].replace('px', ''))
;else
return 0
;
}
function checkLimits(n){
if(n)
return getStyle(snake, 'top') < 0 || getStyle(snake, 'top') >= document.body.offsetHeight-snake.offsetHeight
;else
return getStyle(snake, 'left') < 0 || getStyle(snake, 'left') >= document.body.offsetWidth-snake.offsetWidth
;
}
function topMove(e, s){
if(checkLimits(1))
lose(0)
;else
e.style.top = (getStyle(e, 'top')+s)+'px',
snakeMove = setTimeout(
function(){
topMove(e, s);
},
speed)
;
}
function leftMove(e, s){
if(checkLimits(0))
lose(0)
;else
e.style.left = (getStyle(e, 'left')+s)+'px',
snakeMove = setTimeout(
function(){
leftMove(e, s);
},
speed)
;
}
function continueMove(s){
if(s.direction == 'down')
topMove(s, 1)
;else if(s.direction == 'up')
topMove(s, -1)
;else if(s.direction == 'right')
leftMove(s, 1)
;else if(s.direction == 'left')
leftMove(s, -1)
;
}
function shortTail(tail, s){
if(tail.direction == 'up'){
tail.style.height = (getStyle(tail, 'height')-1)+'px';
tail.style.top = (getStyle(tail, 'top')+1)+'px';
}else if(tail.direction == 'down'){
if(tail.title == 'first'){
tail.style.top = (getStyle(tail, 'top')+1)+'px';
startShort = 0
}
tail.style.height = (getStyle(tail, 'height')-1)+'px';
}else{
if(tail.direction == 'left' || snake.direction == 'right'){
tail.style.width = (getStyle(tail, 'width')-1)+'px';
if(tail.direction == 'left')
tail.style.left = (getStyle(tail, 'left')+1)+'px'
;
}else
tail.style.width = (getStyle(tail, 'width')-1)+'px'
;
}
if((tail.direction == 'down' || tail.direction == 'up') && tail.offsetHeight <= s.offsetHeight){
document.body.removeChild(tail);
continueMove(s);
}else if((tail.direction == 'right' || tail.direction == 'left') && tail.offsetWidth <= s.offsetWidth){
document.body.removeChild(tail);
continueMove(s);
}else{
if(s.direction == 'down'){
s.style.height = (getStyle(s, 'height')+1)+'px';
}else if(s.direction == 'up'){
s.style.height = (getStyle(s, 'height')+1)+'px';
s.style.top = (getStyle(s, 'top')-1)+'px';
}else if(s.direction == 'right')
s.style.width = (getStyle(s, 'width')+1)+'px'
;else if(s.direction == 'left'){
s.style.width = (getStyle(s, 'width')+1)+'px';
s.style.left = (getStyle(s, 'left')-1)+'px';
}
if(tail.offsetTop)
setTimeout(
function(){
shortTail(tail, s);
},
speed)
;
}
}
function moveDown(e){
if(snake.direction == 'left' || snake.direction == 'right' || snake.title == 'first'){
snake2 = snake.cloneNode();
snake2.title = '';
if(snake.title != 'first') snake2.style.width = snake.style.height;
if(snake.direction == 'right')
snake2.style.left = snake.offsetWidth-getStyle(snake, 'height')+getStyle(snake, 'left')
;
snake.className = 'tail';
snake2.direction = 'down';
shortTail(snake, snake2);
snake = snake2;
document.body.appendChild(snake2);
}
}
function moveUp(e){
if(snake.direction == 'left' || snake.direction == 'right'){
snake2 = snake.cloneNode();
snake2.title = '';
snake2.style.width = snake.style.height;
if(snake.direction == 'right')
snake2.style.left = snake.offsetWidth-getStyle(snake, 'height')+getStyle(snake, 'left')
;
snake.className = 'tail';
snake2.direction = 'up';
shortTail(snake, snake2);
snake = snake2;
document.body.appendChild(snake2);
}
}
function moveRight(e){
if(snake.direction == 'up' || snake.direction == 'down'){
snake2 = snake.cloneNode();
snake2.title = '';
snake2.style.height = snake.style.width;
if(snake.direction == 'down')
snake2.style.top = snake.offsetHeight-getStyle(snake, 'width')+getStyle(snake, 'top')
;
snake.className = 'tail';
snake2.direction = 'right';
shortTail(snake, snake2);
snake = snake2;
document.body.appendChild(snake2);
}
}
function moveLeft(e){
if(snake.direction == 'up' || snake.direction == 'down'){
snake2 = snake.cloneNode();
snake2.title = '';
snake2.style.height = snake.style.width;
if(snake.direction == 'down')
snake2.style.top = snake.offsetHeight-getStyle(snake, 'width')+getStyle(snake, 'top')
;
snake.className = 'tail';
snake2.direction = 'left';
shortTail(snake, snake2);
snake = snake2;
document.body.appendChild(snake2);
}
}
function setDirection(d){
if(keyCodes[d])
keyCodes[d](snake)
;
}
function keyDown(){
setDirection(event.keyCode);
}
function lose(m){
if(setDirection() != 'lose')
alert(loseMsg[m]),
setDirection = function(){
return 'lose';
}
;
}
function start(f){
document.body.onkeydown = keyDown;
f.style.display = 'none';
setDirection(40);
return false
}
</script>
<body style="display:none;color:white;margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:black">
<form onsubmit="return start(this)">
Velocidad:
<select onchange="speed = this.value">
<option value=1>Rápida</option>
<option value=5>Media</option>
<option value=10>Lenta</option>
<option value=20>Muy lenta</option>
</select><br>
Largo:
<input type="button" onclick="snake.style.height = getStyle(snake, 'height')-5" value="Achicar"><input type="button" onclick="snake.style.height = getStyle(snake, 'height')+5" value="Agrandar"><br>
Ancho:<input type="button" onclick="snake.style.width = getStyle(snake, 'width')-1" value="Achicar"><input type="button" onclick="snake.style.width = getStyle(snake, 'width')+1" value="Agrandar"><br>
<br>
<input type="submit" value="Comenzar">
</form>
<div id="snakeDiv" style="background:white;position: absolute; width:20px; height: 200px; top:0px;left:500px;border-radius:20px"></div>
</body>Demo: Snake
Última edición:
