JavaScript-簡単なヘビ食いゲームを開発
54776 ワード
JavaScriptは簡単なヘビの小さなゲームを開発しました
多くのJavaScript初心者にとって、JSを使って自分の最初のページゲームを開発するのは達成感のあることですが、JSを使って簡単なゲームを開発するにはどうすればいいのでしょうか.初心者のJSの学生はこのコードを通じて構造関数と原型に対する理解を深めることができることを望んで、コードは以下の通りです:
このようにして、私たちは簡単な蛇の小さなゲームを作って、早く行ってあなたが何点を得ることができるかを試してみましょう.
多くのJavaScript初心者にとって、JSを使って自分の最初のページゲームを開発するのは達成感のあることですが、JSを使って簡単なゲームを開発するにはどうすればいいのでしょうか.初心者のJSの学生はこのコードを通じて構造関数と原型に対する理解を深めることができることを望んで、コードは以下の通りです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.map {
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #ccc;
position: relative;
}
.left {
width: 200px;
height: 600px;
background-color: orangered;
position: absolute;
left: -200px;
}
#start {
width: 90px;
height: 50px;
margin: 50px 55px;
background-color: #ccc;
border: 1px solid blue;
border-radius: 5px;
cursor: pointer;
}
.score {
width: 150px;
height: 100px;
margin: 50px 25px;
text-align: center;
line-height: 100px;
background-color: #fff;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="map">
<div class="left">
<button id="start"> </button>
<div class="score" id="score"> ：0</div>
</div>
</div>
<script>
// -
(function(window){
var elements = [];//
//
function Food (x,y,width,height,color){
//
this.x = x||0;
this.y = y||0;
//
this.width = width||20;
this.height = height||20;
//
this.color = color||"green";
}
// （ ： ）
Food.prototype.init = function (map) {
//
remove();
// div
var div = document.createElement("div");
//
map.appendChild(div);
//
div.style.width = this.width+"px";
div.style.height = this.height+"px";
div.style.backgroundColor = this.color;
div.style.position = "absolute";
//
this.x = parseInt(Math.random()*map.offsetWidth/this.width)*this.width;
this.y = parseInt(Math.random()*map.offsetHeight/this.height)*this.height;
div.style.left = this.x+"px";
div.style.top = this.y+"px";
// div elements
elements.push(div);
};
//
function remove (){
// elements
for(var i = 0; i < elements.length; i++){
var ele = elements[i];
//
ele.parentNode.removeChild(ele);
//
elements.splice(i,1);
}
}
// Food window
window.Food = Food;
}(window));
// -
(function(window){
var elements = [];//
//
function Snake (width,height,direction) {
//
this.width = width||20;
this.height = height||20;
//
this.body = [
{x:3,y:2,color:"red"}, //
{x:2,y:2,color:"orange"},//
{x:1,y:2,color:"orange"} //
];
//
this.direction = direction||"right";
}
// --
Snake.prototype.init = function ( map ) {
//
remove();
// div
for (var i = 0; i < this.body.length; i++) {
var div = document.createElement("div");
map.appendChild(div);
// div
div.style.position = "absolute";
div.style.width = this.width+"px";
div.style.height = this.height+"px";
div.style.left = this.body[i].x*this.width+"px";
div.style.top = this.body[i].y*this.height+"px ";
div.style.backgroundColor = this.body[i].color;
elements.push(div);
}
};
// --
Snake.prototype.move = function ( food,map ){
//
for (var i = this.body.length-1; i > 0; i--) {
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
// ----
switch (this.direction) {
case "right": this.body[0].x += 1;
break;
case "left": this.body[0].x -= 1;
break;
case "top": this.body[0].y -= 1;
break;
case "bottom": this.body[0].y += 1;
}
//
var headX = this.body[0].x*this.width;
var headY = this.body[0].y*this.height;
var scoreDiv = document.querySelector("#score");
if(headX === food.x && headY === food.y){
//
var last = this.body[this.body.length-1];
this.body.push({
x: last.x,
y: last.y,
color: last.color
});
food.init(map);
score += 1;
scoreDiv.innerHTML = " ："+score;
};
};
//
function remove () {
//
for (var i = elements.length-1; i >= 0; i--){
var ele = elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i,1);
}
}
window.Snake = Snake;
}(window));
// -
(function(window){
var that = null;
//
function Game(map){
this.food = new Food();
this.snake = new Snake();
this.map = map;
that = this;
}
Game.prototype.init = function () {
//
this.food.init(this.map);
this.snake.init(this.map);
this.runSnake(this.food,this.map);
this.bindKey();
};
// ---
Game.prototype.runSnake = function (food,map) {
//
var timeId = setInterval(function(){
this.snake.move(food,map);
//
this.snake.init(map);
var maxX = map.offsetWidth/this.snake.width;
var maxY = map.offsetHeight/this.snake.height;
//
var headX = this.snake.body[0].x;
var headY = this.snake.body[0].y;
for (var i = 1; i < this.snake.body.length; i++) {
//
if(headX === this.snake.body[i].x && headY === this.snake.body[i].y ){
clearInterval(timeId);
alert(" ");
}
}
//
if (headX<0||headX>=maxX) {
//
clearInterval(timeId);
alert(" ");
}
if (headY < 0 || headY >= maxY) {
clearInterval(timeId);
alert(" ");
}
}.bind(that),150);
};
// ---
Game.prototype.bindKey = function () {
// ，
document.addEventListener("keydown",function(e){
switch(e.keyCode){
case 37: this.snake.direction = "left";
break;
case 38: this.snake.direction = "top";
break;
case 39: this.snake.direction = "right";
break;
case 40: this.snake.direction = "bottom";
break;
};
}.bind(that),false);
};
window.Game = Game;
}(window));
//
var gameStart = document.querySelector("#start");
gameStart.onclick = function () {
var game = new Game(document.querySelector(".map"));
game.init();
};
//
var score = 0;
</script>
</body>
</html>
このようにして、私たちは簡単な蛇の小さなゲームを作って、早く行ってあなたが何点を得ることができるかを試してみましょう.