js 뱀 탐식 게임 실현(간이 판)
바로 시작 하 다
효과 그림:
프로젝트 구조:그림 자체 찾기
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<canvas id='view' width="400" height="400" style="border:1px solid red;"></canvas>
<button id='start'> </button>
<button id='parse'> </button>
<button id='restart'> </button>
<h4> : <span id='scoreMax' style='color:red;'>0</span></h4>
<h4> : <span id='score' style='color:skyblue;'>0</span></h4>
<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
<script src="js/score.js" type="text/javascript" charset="utf-8"></script>
<script src="js/area.js" type="text/javascript" charset="utf-8"></script>
<script src="js/food.js" type="text/javascript" charset="utf-8"></script>
<script src="js/snake.js" type="text/javascript" charset="utf-8"></script>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var start = document.getElementById('start');
var parse = document.getElementById('parse');
var restart = document.getElementById('restart');
start.onclick = function() {
parse = false;
}
parse.onclick = function() {
parse = true;
}
restart.onclick = function() {
snake && snake.restart();
parse = false;
}
</script>
</body>
</html>
2.area.js
function render(x, y, color, img) {
ctx.beginPath();
ctx.fillStyle = color || 'red';
if (img) {
ctx.drawImage(img, x * w, y * h, img.width, img.height);
} else {
ctx.fillRect(x * w, y * h, w, h);
}
ctx.closePath();
ctx.fill();
}
function clear(x, y) {
ctx.clearRect(x * w, y * h, w, h);
}
3.config.js
var exit = [];
var parse = true;
var view = document.getElementById('view');
var ctx = view.getContext('2d');
var width = 400,
height = 400;
var w = 20,
h = 20;
var maxX = (width / w) - 1,
maxY = (height / h) - 1;
var speed = 500;
var scoreMax = 0;
var imgsrcs = [
'./img/snakeheadup.png', //
'./img/snakeheaddown.png',
'./img/snakeheadleft.png',
'./img/snakeheadright.png'
];
var imgs = [];
var length = 4;
for (var i = 0, len = imgsrcs.length; i < len; i++) {
var img = new Image(20,20);
img.src = imgsrcs[i];
imgs[i] = img;
}
var food, snake, move, score;
4.food.js
function Food() {
this.init();
}
Food.prototype = {
init: function() {
this.update();
},
update: function() {
var food = this.makeCoordinate();
this.food = food;
var foodX = food[0];
var foodY = food[1];
this.render(foodX, foodY);
},
render: function(x, y) {
render(x, y, 'blue');
},
makeCoordinate: function() {
var x = this.random(0, maxX);
var y = this.random(0, maxY);
for (var i = 0; i < exit.length; i++) {
if (exit[i].toString() == [x, y].toString()) {
return this.makeCoordinate();
}
}
return [x, y];
},
random: function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
5.init.js
function init() {
food = new Food();
snake = new Snake();
move = new Move();
score = new Score();
var timer = setInterval(function() {
if (!parse) {
snake.move();
}
}, speed);
}
for (var j = 0; j < imgs.length; j++) {
imgs[j].onload = function() {
length--;
if (length == 0) {
init();
}
}
}
6.move.js
function Move() {
}
Move.prototype = {
up: function(s) {
snake.move('up');
},
down: function(s) {
snake.move('down');
},
left: function(s) {
snake.move('left');
},
right: function(s) {
snake.move('right');
}
}
document.onkeydown = function(e) {
var key = e.keyCode;
if(!parse){
switch (key) {
case 37:
case 65:
move.left(snake);
break;
case 38:
case 87:
move.up(snake);
break;
case 39:
case 68:
move.right(snake);
break;
case 40:
case 83:
move.down(snake);
break;
default:
break;
}
}
};
7.score.js
var scoreDom = document.getElementById('score');
var scoreMaxDom = document.getElementById('scoreMax');
function Score() {
this.score = 0;
}
Score.prototype = {
scoreAdd: function() {
this.score += 1;
scoreDom.innerHTML = this.score;
},
scoreClear: function() {
this.score = 0;
scoreDom.innerHTML = 0;
},
highScore: function() {
scoreMax = scoreMax > this.score ? scoreMax : this.score;
scoreMaxDom.innerHTML = scoreMax;
}
}
8.snake.js
function Snake() {
this.head = [0, 5, imgs[1]]; // x,y ,
this.body = []; // ,
this.snake = []; //
this.init(6);
this.direction = 'down'; //
}
Snake.prototype = {
init: function(len) {
len = len ? len > 10 ? 10 : len : 5;
var head = this.head = [0, len, imgs[1]];
var body = this.body;
for (var i = 0; i < len; i++) {
body.push([0, i]);
}
this.getSnake();
},
restart: function() {
ctx.clearRect(0, 0, width, height);
this.head = [0, 5, imgs[1]]; // x,y ,
this.body = []; // ,
this.snake = []; //
exit = [];
this.direction = 'down'; //
this.init(6);
food.update();
score.scoreClear();
},
eat: function() {
var head = [this.head[0], this.head[1]];
var body = this.body;
if (food.food.toString() == head.toString()) {
food.update();
score.scoreAdd();
return true;
}
return false;
},
update: function(direction) {
var oldDirection = this.direction;
this.direction = direction || this.direction;
if ((this.direction == 'down' && oldDirection == 'up') ||
(this.direction == 'up' && oldDirection == 'down') ||
(this.direction == 'left' && oldDirection == 'right') ||
(this.direction == 'right' && oldDirection == 'left')) {
this.direction = oldDirection;
}
if (this.direction == 'left' && oldDirection != 'right') {
this.head[0] -= 1;
this.head[2] = imgs[2];
} else if (this.direction == 'right' && oldDirection != 'left') {
this.head[0] += 1;
this.head[2] = imgs[3];
} else if (this.direction == 'up' && oldDirection != 'down') {
this.head[1] -= 1;
this.head[2] = imgs[0];
} else if (this.direction == 'down' && oldDirection != 'up') {
this.head[1] += 1;
this.head[2] = imgs[1];
}
this.die();
},
gameOver: function() {
alert('game over!')
console.log('game over!');
parse = true;
score.highScore();
},
die: function() {
var head = this.head;
var x = head[0],
y = head[1];
if (x < 0 || x > maxX || y < 0 || y > maxY) {
this.gameOver();
}
var body = this.body;
for (var i = 0; i < body.length; i++) {
if (body[i].toString() == [x, y].toString()) {
this.gameOver();
}
}
},
render: function() {
var snake = this.snake;
for (var i = 0, len = snake.length; i < len; i++) {
var item = snake[i];
render(item[0], item[1], 'green', item[2]);
}
},
move: function(direction) {
var head = this.head;
var headCopy = head.slice(); //
var body = this.body;
body.push([headCopy[0], headCopy[1]]);
this.update(direction);
var eat = this.eat();
if (!eat) {
var del = body.shift();
clear(del[0], del[1]);
}
this.getSnake();
},
getSnake: function() {
var head = this.head;
var body = this.body;
var snake = this.snake = [];
for (var i = 0, l = body.length; i < l; i++) {
snake.push(body[i]);
}
snake.push(head);
exit = [];
for (var i = 0; i < snake.length; i++) {
exit.push(snake[i]);
}
this.render();
}
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.