Jsは貪食蛇と書いています
5819 ワード
Javascriptを使って蛇を食べるゲームを作って、
1.カスタムマップの幅の高さ、蛇の初期速度
2.食べ物がランダムに出現する
3.蛇のスタイル属性
4.蛇遊びを貪欲に食べる(食べ物を食べて、境界にぶつかり、食べ物を食べたら加速し、点数を計算する)
1.カスタムマップの幅の高さ、蛇の初期速度
2.食べ物がランダムに出現する
3.蛇のスタイル属性
4.蛇遊びを貪欲に食べる(食べ物を食べて、境界にぶつかり、食べ物を食べたら加速し、点数を計算する)
Document
var kuang = parseInt(prompt(" "));
var gao = parseInt(prompt(" "));
var sudu = parseInt(prompt(" ( )"));
//
function Map(){
//
this.width = kuang;
this.height = gao;
this.backgroundColor = 'gray';
this.ditu = null;
//
if (!Map.prototype.show) {
Map.prototype.show = function(){
// div
var div = document.createElement('div');
//
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.backgroundColor;
//
document.body.appendChild(div);
// div
this.ditu = div;
}
}
}
var map = new Map();
map.show();
//
function Food(map){
//
this.width = 20;
this.height = 20;
this.backgroundColor = 'yellow';
this.x = 0;
this.y = 0;
this.position = 'absolute';
this.borderRadius = '50%';
this.shiwu = null;
//
if(!Food.prototype.show){
Food.prototype.show = function(){
// , ,
if(!this.shiwu){
// div
var div = document.createElement('div');
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.backgroundColor;
div.style.borderRadius = this.borderRadius;
div.style.position = this.position;
//
map.ditu.appendChild(div);
this.shiwu = div;
}
//
// / = 0~30 * / ( 20)
this.x = Math.floor(Math.random() * (map.width / this.width));
this.y = Math.floor(Math.random() * (map.height / this.height));
// ,
this.shiwu.style.left = this.x * this.width + 'px';
this.shiwu.style.top = this.y * this.height + 'px';
}
}
}
//
var food = new Food(map);
food.show();
//
function Snake(){
//
this.width = 20;
this.height = 20;
this.position = 'absolute';
this.direction = 'right';
this.borderRadius = '50%';
//
this.canChange = false;
//
//[[x, y, , div]]
this.body = [[5, 5, 'red', null], [4, 5, 'blue', null], [3, 5, 'blue', null]];
//
// , ,
if(!Snake.prototype.show){
Snake.prototype.show = function(){
// div
for (var i = 0; i < this.body.length; i++) {
// ,
if (!this.body[i][3]) {
//
var div =document.createElement('div');
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.position = this.position;
//
map.ditu.appendChild(div);
this.body[i][3] = div;
}
//
this.body[i][3].style.backgroundColor = this.body[i][2];
this.body[i][3].style.left = this.body[i][0] * this.width + 'px';
this.body[i][3].style.top = this.body[i][1] * this.height+ 'px';
this.body[i][3].style.borderRadius = '5px';
this.body[0][3].style.borderRadius = this.borderRadius;
}
// ,
this.canChange = true;
}
//
//
Snake.prototype.move = function(){
// ,
for (var i = this.body.length - 1; i > 0; i--) {
//x = x-1 y = y-1
this.body[i][0] = this.body[i-1][0];
this.body[i][1] = this.body[i-1][1];
}
//
if (this.direction == 'right') {
//x + 1
this.body[0][0] += 1;
}else if(this.direction == 'left') {
//x - 1
this.body[0][0] -= 1;
}else if(this.direction == 'up') {
//y - 1
this.body[0][1] -= 1;
}else if(this.direction == 'down') {
//y + 1
this.body[0][1] += 1;
}
//
if (this.body[0][0] < 0 || this.body[0][0] > (map.width / this.width) - 1 || this.body[0][1] < 0 || this.body[0][1] > (map.height / this.height) - 1) {
//
clearInterval(timer);
alert(' ');
return;
}
//
for (var i = 1; i < this.body.length; i++) {
if (this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]) {
// ,
clearInterval(timer);
alert(' ');
return;
}
}
//
this.show();
//
if (this.body[0][0] == food.x && this.body[0][1] == food.y) {
//
var score = document.getElementById('fen');
var sc = parseInt(score.value)+1;
score.value = sc;
// this.body
this.body[this.body.length] = [0, 0, 'blue', null];
//
food.show();
// ,
if(t>150){
t -= 10;
setTimer();
}
}
}
}
}
//
var snake = new Snake;
snake.show();
//
window.onkeyup = function(e){
var evt = e || window.event;
if (!snake.canChange) {
return;
}
// 37 38 39 40
if (e.keyCode == 37 && snake.direction != 'right') {
snake.direction = 'left'
}else if(e.keyCode == 38 && snake.direction != 'down') {
snake.direction = 'up'
}else if(e.keyCode == 39 && snake.direction != 'left') {
snake.direction = 'right'
}else if(e.keyCode == 40 && snake.direction != 'up') {
snake.direction = 'down'
}
snake.canChange =false;
};
//
var t = sudu;
var timer;
function setTimer(){
//
clearInterval(timer);
//
timer = setInterval(function(){
snake.move();
}, t);
}
setTimer();