贪吃蛇
2017-10-14 本文已影响0人
yamei_wu
贪吃蛇应该是接触手机玩的第二款游戏，那时候肯定没有想过有一天我也会码它的代码哈哈哈
思路
一. 找对象
对象 属性 方法
1. 游戏引擎 场景 （方格）、 食物 、蛇 游戏开始、游戏结束
2. 食物 大小、颜色 出现、改变位置
3. 蛇 长度、颜色、位置、头、移动方向 吃、移动、长大
二.实现对象
1.HTML文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>贪吃蛇-selfdo</title>
<style>
table{
border-collapse:collapse;/*消除表格间隙*/
border:1px solid black;
}
td{
width: 10px;
height: 10px;
/*background: red;*/
}
.food{
background: red;
}
</style>
</head>
<body>
<script src="food.js"></script>
<script src="gameScene.js"></script>
<script>
gameScene.start();//调用方法才会显示表格
// gameScene.allArr[3][2].className="food";//给某一个点设置样式
// gameScene.allArr[this.y][this.x].className="food";//对象外面不能用this 没有指向
</script>
</body>
</html>
2.游戏引擎
var gameScene={
//属性
rows:30,//行数
cols:30,//列数
allArr:[],
food:null,
//方法1.开始游戏
start:function(){
//游戏初始化
gameScene.unit();
this.food=new Food();
},
//方法1.初始化
unit:function(){
//创建表格(注意：在样式给table设样式)
var oTable=document.createElement("table");
for(var i=0;i<this.rows;i++){
var arr=[];
//创建行
var oTr=document.createElement("tr");
for(var j=0;j<this.cols;j++){
//每行创建元素
var oTd=document.createElement("td");
//添加
oTr.appendChild(oTd);
arr.push(oTd);
}
oTable.appendChild(oTr);
gameScene.allArr.push(arr);
}
//添加到body中
document.body.appendChild(oTable);
}
}
3.食物
/* 属性 方法
* food 大小、颜色 出现、改变位置
*/
//构造函数Food
function Food(){
this.x=0;
this.y=0;
this.change();
}
//方法1.出现
Food.prototype.display=function(){
gameScene.allArr[this.y][this.x].className="food";
}
//方法2.改变位置
Food.prototype.change=function(){
this.x=parseInt(Math.random()*gameScene.cols);
this.y=parseInt(Math.random()*gameScene.rows);
//更新位置
this.display();
}
4.蛇
未完待续···
总结
1.在码程序的过程，我存在一个很大的弊病，经常写完一个js文件，却忘了调用，说到底还是学的不够扎实，在合文件也会出现诸如此类的问题。还是练得少了呀。
2.比如在HTML文件里，
gameScene.allArr[this.y][this.x].className="food";这一句，本意的this是指环境中出现的食物，而在页面上用的this指向的是window，window对象上是找不到那两个属性的，找不到自然就是undefined啦，所以会报下图的错误：
pict1.png
3.平时学似乎觉得也不难，但只有你真正做一个东西的时候才是考验，是不是能把学到的轻松相结合、运用，让它变成你脑袋里的东西。
4.未来的录还长···
