js程式設計--貪吃蛇遊戲03
阿新 • • 發佈：2018-12-06
js程式設計–貪吃蛇遊戲03
在js程式設計–貪吃蛇遊戲02的基礎上修改功能如下：
1、運用了面向物件的程式設計思想，將蛇和食物分別用物件的方式實現。
2、蛇遇到食物，食物被吃之後，隨機生成新的食物
注意：引用jquery-3.3.1.min.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的貪吃蛇03</title>
<script type="text/javascript" index.css
body {
margin snack.js
$(document).ready(function(){
var map_div=$("#map");
var s_count=1;//記錄蛇身體長度
var snack=new Snack();
snack.shownack()
var food=new Food();
food.showfood();
var s_h=50;
var s_w=50;
var direction="right";//初始運動方向
// alert("ss");
$(document).keydown(function(e){
var code=e.keyCode;
if(food.x==(snack.x+1)&&food.y==snack.y){
//alert("吃到食物了！！！！！");
//吃到食物了，就開加長蛇身
food.eated();
return;
}
snack.movesnack(code);
});
function Food(){
this.x=1;
this.y=1;
var div=$("<div></div>");
this.showfood=function(){
this.x=parseInt(Math.random()*16);
this.y=parseInt(Math.random()*10);
div.css(
{
"width": "50px",
"height": "50px",
"background-color":"yellow",
"position": "absolute",
"margin-left":this.x*50,
"margin-top":this.y*50
});
div.appendTo(map_div);
};
this.eated=function(){
this.showfood();
}
}
function Snack(){
this.x=0;
this.y=0;
this.direction="right";
var div=$("<div></div>");
this.shownack=function(){
this.x=0;
this.y=0;
div.css(
{
"width": "50px",
"height": "50px",
"background-color":"red",
"position": "absolute",
"margin-left":this.x*50,
"margin-top":this.y*50
});
div.appendTo(map_div);
};
this.movesnack=function(code){
switch(code){
case 37://左
// 不允許返回，向上的時候不能向下
if(this.direction!="right"){
this.direction="left";
if(this.x<1){
alert("撞牆了！！！！！");
snack.shownack();
}else{
this.x -=1;
div.css({"margin-left":this.x*50});
}
}
break;
case 39://右
// 不允許返回，向上的時候不能向下
if(this.direction!="left"){
this.direction="right";
if(this.x>15){
alert("撞牆了！！！！！");
div.css({"margin-left":0,"margin-top":0});
}else{
this.x +=1;
div.css({"margin-left":this.x*50});
}
}
break;
case 38://上
// 不允許返回，向上的時候不能向下
if(this.direction!="down"){
this.direction="up";
if(this.y<1){
alert("撞牆了！！！！！");
div.css({"margin-left":0,"margin-top":0});
}else{
this.y -=1;
div.css({"margin-top":this.y*50});
}
}
break;
case 40://下
// 不允許返回，向上的時候不能向下
if(this.direction!="up"){
this.direction="down";
if(this.y>9){
alert("撞牆了！！！！！");
div.css({"margin-left":0,"margin-top":0});
}else{
this.y +=1;
div.css({"margin-top":this.y*50});
}
}
break;
}
};
}
});