07.03.2014, 12:41
|
 |
Интересующийся
|
|
Регистрация: 15.02.2014
Сообщений: 19
|
|
|
Вопрос по игре змейка
Доброго времен суток!
Знатоки помогите переписать функцию таким образом что бы змейка не ударялась в стену а проходила и вылазила с противоположной стороны
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.field{
margin-left: 50px;
height: 22px;
z-index: 20;
}
.cell{
margin: 0;
display: inline-block;
background-color: #b0ffb3;
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 3px;
z-index: 20;
transition: background-color 0.3s;
}
.snake{
background: linear-gradient(to left, #15ab04, #003a00);
box-shadow: 0 0 10px #000000 inset;
z-index: 20;
transition: background 0.2s;
}
.food{
background-color: #f40300;
box-shadow: 0 0 10px #000000 inset;
z-index: 20;
transition: background-color 2s;
}
.border{
top: 10px;
left: 30px;
position: absolute;
width: 480px;
height: 535px;
background-color: #949692;
z-index: -10;
border: 2px solid black;
}
.buttons{
margin: 20px 10px 20px 50px;
}
#score{
margin-left: 70px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="border"></div>
<div class="buttons">
<button id="easy" onclick="startEasy()">Easy</button>
<button id="medium" onclick="startMedium()">Medium</button>
<button id="hard" onclick="startHard()">Hard</button>
<button onclick="reload()">Reload</button>
</div>
<script type="text/javascript">
var timer;
var direct = 0;
var fieldSizeX = 20;
var fieldSizeY = 20;
var KEY = {
'left' : 37,
'up' : 38,
'right' : 39,
'down' : 40
};
var direction = [
[0,1],
[1,0],
[0,-1],
[-1,0]];
var snake = {
length : 3,
body : [[1,1],[1,2],[1,3]],
initialisationSnake : function (){
for ( var i = 0; i < this.length; i++){
var currentBodyPart = this.body[i];
document.getElementById(currentBodyPart.join()).className = 'cell snake';
}
},
move : function (){
var body = this.body
var head = this.body[this.length-1];
var headCell = head.map(function(value, index){ return value + direction[direct][index] });
compareEatOrGameOver(headCell, body);
return headCell;
}
};
window.addEventListener('keydown', keyHandler, false);
prepareGamePane(fieldSizeX, fieldSizeY);
//------------------------------------------------------------------------
function prepareGamePane (fieldSizeX, fieldSizeY){
for ( var x = 0; x < fieldSizeX; x++){
var coordinateX = document.createElement('div');
document.body.appendChild(coordinateX);
coordinateX.className = 'field';
for (var y = 0; y < fieldSizeY; y++){
var coordinateY = document.createElement('div');
coordinateX.appendChild(coordinateY);
coordinateY.className = 'cell';
coordinateY.id = x+','+y;
}
}
snake.initialisationSnake();
makeFood(fieldSizeX, fieldSizeY);
}
//------------------------------------------------------------------------
function makeFood (fieldSizeX, fieldSizeY){
var x = Math.round(Math.random() * (fieldSizeX-1));
var y = Math.round(Math.random() * (fieldSizeY-1));
var food = document.getElementById(x+','+y);
if (food.className == 'cell'){
food.className = "cell food";
} else {
makeFood(fieldSizeX, fieldSizeY);
}
return food;
}
//------------------------------------------------------------------------
function keyHandler (event){
switch (event.keyCode) {
case KEY.left:
if (direct != 0){
direct = 2;
}
break;
case KEY.right:
if (direct != 2){
direct = 0;
}
break;
case KEY.up:
if (direct != 1){
direct = 3;
}
break;
case KEY.down:
if (direct != 3){
direct = 1;
}
break;
default :
return;
}
}
//------------------------------------------------------------------------
function compareEatOrGameOver (headCell, body) {
var tmp = document.getElementById(headCell.join());
if ( tmp != null && tmp.className == 'cell' ){
var removeTail = body.shift();
body.push(headCell);
document.getElementById(removeTail.join()).className = 'cell';
document.getElementById(headCell.join()).className = 'cell snake';
} else {
if ( tmp != null && tmp.className == 'cell food'){
snake.length++;
body.push(headCell);
document.getElementById(headCell.join()).className = 'cell snake';
makeFood(fieldSizeX, fieldSizeY);
var score = snake.length-3;
document.getElementById('score').innerHTML = 'Your score: '+score;
} else {
if ( tmp == null || tmp.className == 'cell snake'){
clearInterval(timer);
alert('Game Over! Your score: ' + (snake.length-3) + '. Press Reload for new game');
}
}
}
}
function startEasy () {
timer = setInterval(function(){
snake.move();
},400);
}
function startMedium () {
timer = setInterval(function(){
snake.move();
},200);
}
function startHard () {
timer = setInterval(function(){
snake.move();
},100);
}
function reload () {
window.location.reload();
}
</script>
<div id = "score">Your score: 0</div>
</body>
</html>
Последний раз редактировалось NuclleaR, 07.03.2014 в 15:38.
|
|
07.03.2014, 23:35
|
 |
Профессор
|
|
Регистрация: 21.04.2012
Сообщений: 951
|
|
Вот, здесь ещё небольшая коррекция смены направления (если в вашем примере на уровне easy двигаясь например вправо быстро нажать вниз и влево, то погибнешь) 
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.field{
margin-left: 50px;
height: 22px;
z-index: 20;
}
.cell{
margin: 0;
display: inline-block;
background-color: #b0ffb3;
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 3px;
z-index: 20;
transition: background-color 0.3s;
}
.snake{
background: linear-gradient(to left, #15ab04, #003a00);
box-shadow: 0 0 10px #000000 inset;
z-index: 20;
transition: background 0.2s;
}
.food{
background-color: #f40300;
box-shadow: 0 0 10px #000000 inset;
z-index: 20;
transition: background-color 2s;
}
.border{
top: 10px;
left: 30px;
position: absolute;
width: 480px;
height: 535px;
background-color: #949692;
z-index: -10;
border: 2px solid black;
}
.buttons{
margin: 20px 10px 20px 50px;
}
#score{
margin-left: 70px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="border"></div>
<div class="buttons">
<button id="easy" onclick="startEasy()">Easy</button>
<button id="medium" onclick="startMedium()">Medium</button>
<button id="hard" onclick="startHard()">Hard</button>
<button onclick="reload()">Reload</button>
</div>
<script type="text/javascript">
var timer;
var directx = direct = 0;
var fieldSizeX = 20;
var fieldSizeY = 20;
var KEY = {
'left' : 37,
'up' : 38,
'right' : 39,
'down' : 40
};
var direction = [
[0,1],
[1,0],
[0,-1],
[-1,0]];
var snake = {
length : 3,
body : [[1,1],[1,2],[1,3]],
initialisationSnake : function (){
for ( var i = 0; i < this.length; i++){
var currentBodyPart = this.body[i];
document.getElementById(currentBodyPart.join()).className = 'cell snake';
}
},
move : function (){
direct = directx;
var body = this.body
var head = this.body[this.length-1];
var headCell = head.map(function(value, index){ return value + direction[direct][index] });
compareEatOrGameOver(headCell, body);
return headCell;
}
};
window.addEventListener('keydown', keyHandler, false);
prepareGamePane(fieldSizeX, fieldSizeY);
//------------------------------------------------------------------------
function prepareGamePane (fieldSizeX, fieldSizeY){
for ( var x = 0; x < fieldSizeX; x++){
var coordinateX = document.createElement('div');
document.body.appendChild(coordinateX);
coordinateX.className = 'field';
for (var y = 0; y < fieldSizeY; y++){
var coordinateY = document.createElement('div');
coordinateX.appendChild(coordinateY);
coordinateY.className = 'cell';
coordinateY.id = x+','+y;
}
}
snake.initialisationSnake();
makeFood(fieldSizeX, fieldSizeY);
}
//------------------------------------------------------------------------
function makeFood (fieldSizeX, fieldSizeY){
var x = Math.round(Math.random() * (fieldSizeX-1));
var y = Math.round(Math.random() * (fieldSizeY-1));
var food = document.getElementById(x+','+y);
if (food.className == 'cell'){
food.className = "cell food";
} else {
makeFood(fieldSizeX, fieldSizeY);
}
return food;
}
//------------------------------------------------------------------------
function keyHandler (event){
switch (event.keyCode) {
case KEY.left:
if (direct != 0){
directx = 2;
}
break;
case KEY.right:
if (direct != 2){
directx = 0;
}
break;
case KEY.up:
if (direct != 1){
directx = 3;
}
break;
case KEY.down:
if (direct != 3){
directx = 1;
}
break;
default :
return;
}
}
//------------------------------------------------------------------------
function compareEatOrGameOver (headCell, body) {
var tmp = document.getElementById(headCell.join());
if (tmp == null ) {
if (headCell[0] == -1)
headCell[0] = fieldSizeX - 1;
if (headCell[0] == fieldSizeX)
headCell[0] = 0;
if (headCell[1] == -1)
headCell[1] = fieldSizeY - 1;
if (headCell[1] == fieldSizeY)
headCell[1] = 0;
tmp = document.getElementById(headCell.join());
}
if ( tmp != null && tmp.className == 'cell' ){
var removeTail = body.shift();
body.push(headCell);
document.getElementById(removeTail.join()).className = 'cell';
document.getElementById(headCell.join()).className = 'cell snake';
} else {
if ( tmp != null && tmp.className == 'cell food'){
snake.length++;
body.push(headCell);
document.getElementById(headCell.join()).className = 'cell snake';
makeFood(fieldSizeX, fieldSizeY);
var score = snake.length-3;
document.getElementById('score').innerHTML = 'Your score: '+score;
} else {
if (tmp.className == 'cell snake'){
clearInterval(timer);
alert('Game Over! Your score: ' + (snake.length-3) + '. Press Reload for new game');
}
}
}
}
function startEasy () {
timer = setInterval(function(){
snake.move();
},400);
}
function startMedium () {
timer = setInterval(function(){
snake.move();
},200);
}
function startHard () {
timer = setInterval(function(){
snake.move();
},100);
}
function reload () {
window.location.reload();
}
</script>
<div id = "score">Your score: 0</div>
</body>
</html>
|
|
08.03.2014, 01:40
|
|
Интересующийся
|
|
Регистрация: 15.02.2014
Сообщений: 19
|
|
|
Dim@, Спасибо огромное
|
|
|
|
