javascript 뱀 탐식 게임 실현
우선:대상 을 대상 으로 프로 그래 밍 을 하려 면 프로젝트 의 구체 적 인 대상 을 찾 아야 합 니 다.여 기 는(음식),뱀(snake)이 고 게임 자체(game)도 게임 자 체 를 대상 으로 하지 않 고 논리 적 으로 표현 하면 됩 니 다.
이어서 각 대상 의 구체 적 인 속성 과 방법 을 분석한다.
1)food 대상:속성:위치,크기,색상;방법 은 페이지 에 렌 더 링 하여 무 작위 로 서로 다른 위치 에서 생 성 합 니 다.
2)snake 대상:속성 은 위치,크기,총 절 수(점수 계산 이 편리 함),색상 이 있 습 니 다.방법 은 페이지 에 렌 더 링 하고 이동(이동 과정 에서 다른 것 을 판단)합 니 다.
3)game 대상:게임 논리의 작성;
ok.두 드 리 기:
1)간단 한 정적 페이지 작성(지도)
(1)html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css" >
<script src="js/food.js"></script>
<script src="js/snake.js"></script>
<script src="js/game.js"></script>
<script src="js/main.js"></script>
<title> </title>
</head>
<body>
<div class="map"></div>
</body>
</html>
(2)css(테두리 로 제 한 된 경계 로 한다 면 box-sizing 속성 은 없어 서 는 안 됩 니 다(음식 과 뱀 머리 좌표 사이 에 오차 가 발생 하지 않도록)
* {
margin: 0;
padding: 0;
}
.map {
position: relative;
height: 600px;
width: 800px;
border: 1px solid #333;
margin: 0 auto;
/* */
box-sizing: border-box;
}
2)food 대상 작성(자세 한 설명 포함)
//cwen
window.addEventListener('load', function() {
//cwen , ,
(function() {
//cwen
//
var elements = [];
//cwen
function Food(options) {
options = options || {};
this.x = options.x || 0;
this.y = options.y || 0;
this.width = options.width || 20;
this.height = options.height || 20;
this.color = options.color || 'yellow';
}
//cwen
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//cwen
Food.prototype.render = function(map) {
//
remove();
//todo div
var div = document.createElement('div');
map.appendChild(div);
// div
elements.push(div);
//todo x,y ( )----- map
// ! = Math.floor(Math.random() * + )
this.x = getRandom(0, map.offsetWidth / this.width - 1) * this.width;
this.y = getRandom(0, map.offsetHeight / this.height - 1) * this.height;
div.style.position = 'absolute';
div.style.left = this.x + 'px';
div.style.top = this.y + 'px';
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.color;
}
function remove() {
// ,
for (var i = elements.length - 1; i >= 0; i--) {
// div
elements[i].parentNode.removeChild(elements[i]);
// 1) ,2)
elements.splice(i, 1);
}
}
// Food
window.Food = Food;
})()
//cwen
// var map = document.querySelector('.map');
// var options = { x: 20, y: 20, width: 30, height: 30, color: 'green' };
// //todo food
// var food = new Food();
// food.render(map);
})
3)snake 대상 작성()
window.addEventListener('load', function() {
(function() {
//
var elements = [];
//cwen , ,
function Snake(options) {
options = options || {};
// ( )
this.width = options.width || 20;
this.height = options.height || 20;
//cwen ( )
this.mark = options.mark || 0;
//
this.direction = options.direction || 'right';
// ( )
this.kont = [{ x: 3, y: 2, color: 'red' }, { x: 2, y: 2, color: 'black' }, { x: 1, y: 2, color: 'black' }];
}
//cwen
Snake.prototype.render = function(map) {
//
remove();
// ( )
for (var i = 0, len = this.kont.length; i < len; i++) {
var obj = this.kont[i];
var div = document.createElement('div');
map.appendChild(div);
//
elements.push(div);
//
div.style.position = 'absolute';
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = obj.x * this.width + 'px';
div.style.top = obj.y * this.height + 'px';
div.style.backgroundColor = obj.color;
}
}
//cwen
//todo food,map game move
Snake.prototype.move = function(food, map) {
// ( )
for (var i = this.kont.length - 1; i > 0; i--) {
this.kont[i].x = this.kont[i - 1].x;
this.kont[i].y = this.kont[i - 1].y;
}
// ,
var head = this.kont[0];
switch (this.direction) {
case 'right':
head.x += 1;
break;
case 'left':
head.x -= 1;
break;
case 'top':
head.y -= 1;
break;
case 'bottom':
head.y += 1;
break;
}
//
// cwen
var headX = head.x * this.width;
var headY = head.y * this.height;
if (headX == food.x && headY == food.y) {
//1, ( , )
var last = this.kont[this.kont.length - 1];
this.kont.push({ x: last.x, y: last.y, color: last.color });
//cwen ( )
var mark = this.mark++;
//2,
food.render(map);
}
}
//
function remove() {
for (var i = elements.length - 1; i >= 0; i--) {
elements[i].parentNode.removeChild(elements[i]);
elements.splice(i, 1);
}
}
// Snake
window.Snake = Snake;
})()
//
// var map = document.querySelector('.map');
// var snake = new Snake();
// snake.render(map);
})
4)game 대상 작성,그 중 하 나 는 무적 버 전(자세 한 설명 포함)
window.addEventListener('load', function() {
(function() {
// this
var that;
function Game(map) {
// var options = { x: 20, y: 20, width: 30, height: 30, color: 'green' };
this.food = new Food();
this.snake = new Snake();
this.map = map;
that = this;
}
//cwen
Game.prototype.start = function() {
// 1.
this.food.render(this.map);
this.snake.render(this.map);
// 2.
//
//
// runSnake();
//todo ( , )
goInput();
//
//! keydown();
//
// snake.js
}
function goInput() {
var it = prompt('try:
1
( )
')
if (it == 1) {
runSnake();
keydown();
} else if (it == ' ') {
runSnake1();
keydown1();
} else {
alert('you input could not be found!!!');
goInput();
}
}
//
function runSnake() {
var timeId = setInterval(function() {
// var a = mark;
that.snake.move(that.food, that.map);
that.snake.render(that.map);
//
var maxX = (that.map.offsetWidth) / that.snake.width;
var maxY = (that.map.offsetHeight) / that.snake.height;
var headX = that.snake.kont[0].x;
var headY = that.snake.kont[0].y;
if (headX < 0 || headX >= maxX) {
alert('Game Over ' + ' ' + that.snake.mark);
clearInterval(timeId);
} else if (headY < 0 || headY >= maxY) {
alert('Game Over ' + ' ' + that.snake.mark);
clearInterval(timeId);
}
}, 150)
}
//
function runSnake1() {
var timeId1 = setInterval(function() {
that.snake.move(that.food, that.map);
that.snake.render(that.map);
//
var maxX = (that.map.offsetWidth - that.snake.width) / that.snake.width;
var maxY = (that.map.offsetHeight - that.snake.height) / that.snake.height;
var headX = that.snake.kont[0].x;
var headY = that.snake.kont[0].y;
if (headX < 0) {
that.snake.kont[0].x = (that.map.offsetWidth - that.snake.width) / that.snake.width;
} else if (headX > maxX) {
that.snake.kont[0].x = 0;
} else if (headY < 0) {
that.snake.kont[0].y = (that.map.offsetHeight - that.snake.height) / that.snake.height;
} else if (headY > maxY) {
that.snake.kont[0].y = 0;
}
}, 50)
}
//
function keydown() {
document.addEventListener('keydown', function(e) {
// 37left,38top,39right,40bottom
// console.log(e.keyCode);
//
if (e.keyCode == 37 && that.snake.direction != 'right') {
that.snake.direction = 'left';
} else if (e.keyCode == 38 && that.snake.direction != 'bottom') {
that.snake.direction = 'top';
} else if (e.keyCode == 39 && that.snake.direction != 'left') {
that.snake.direction = 'right';
} else if (e.keyCode == 40 && that.snake.direction != 'top') {
that.snake.direction = 'bottom';
}
});
}
function keydown1() {
document.addEventListener('keydown', function(e) {
// 37left,38top,39right,40bottom
// console.log(e.keyCode);
//
if (e.keyCode == 37) {
that.snake.direction = 'left';
} else if (e.keyCode == 38) {
that.snake.direction = 'top';
} else if (e.keyCode == 39) {
that.snake.direction = 'right';
} else if (e.keyCode == 40) {
that.snake.direction = 'bottom';
}
});
}
// Game
window.Game = Game;
})()
})
5)게임 메 인 오픈
window.addEventListener('load', function() {
(function(window, undefind) {
//
var map = document.querySelector('.map');
var game = new Game(map);
game.start();
})(window, undefined)
})
last but not least*모든 js 파일 을 같은 js 파일 에 쓰 면 로드 속 도 를 크게 높 일 수 있 습 니 다.모든 함수 가 즉시 실행 되 기 전에';'를 추가 하 는 것 을 주의 하 세 요.실수 하지 않도록.
편집장 은 또 모 두 를 위해 멋 진 주 제 를 준비 했다.javascript 고전 게임 모음
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.