介绍 & lt; !DOCTYPE html公众“-//W3C XHTML 1.0 Strict////DTD EN"“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"比;
& lt; html>
& lt; head>
& lt; title>新建网页& lt;/title>
& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=utf-8"/比;
& lt;元名称=癲escription"内容=啊?比;
& lt;元名称=発eywords"内容=啊?比;
& lt;脚本类型=拔谋?javascript"比;//①绘制地图
函数映射(){//私有成员(不会随便发生变化)
var w=800;
var h=400;//成员方法,绘制地图
这一点。showmap=function () {//创建p,设置css样式,追加给身体
var你=document.createElement (& # 39; p # 39;);
tu.style。宽度=w +“px";
tu.style。身高=h +“px";
tu.style。backgroundImage=皍rl (/12. jpg)“;
document.body.appendChild (tu);
}
}//②绘制食物
功能食品(){
var len=20;//把食物(权值)坐标声明为公开的,以便在外部访问
这一点。xFood=0;
这一点。yFood=0;
这一点。块=零;//页面上唯一的食物对象//绘制
这一点。showfood=function () {//创建p,设置css样式,追加给身体
如果这一点。块===null) {
这一点。块=document.createElement (& # 39; p # 39;);
this.piece.style。宽度=this.piece.style。身高=len +“px";
this.piece.style。写成backgroundColor=癵reen";
this.piece.style。位置=癮bsolute";
document.body.appendChild (this.piece);
}//食物设置绝对定位(位置/左/上)//食物位置“随机”摆放//移动步进值:20 px//食物”权值“坐标:X轴(0-39)Y轴(0-19)//食物真实坐标:权值坐标*步进值
这一点。xFood=Math.floor (math . random () * 40);//0-39的随机数
这一点。yFood=Math.floor (math . random () * 20);//0-19的随机数
this.piece.style。离开了=Food * len +“px";
this.piece.style。=这。yFood * len +“px";
}
}//③小蛇
函数蛇(){
var len=20;
这一点。重定向=皉ight";//默认向右边移动//后期snakebody要变化,因此声明为公开的(每个蛇节:[x坐标,y坐标,颜色,蛇节对象])
这一点。snakebody=[[0 1 & # 39;绿色# 39;,null],[1 1 & # 39;绿色# 39;,null),(2, 1, & # 39;绿色# 39;,null],[3 1 & # 39;红色# 39;,null]];//a。绘制小蛇
这一点。showsnake=function () {//遍历小蛇的各个蛇节,并依次创建即可
(var=0;我& lt;this.snakebody.length;我+ +){//this.snakebody[我]//代表每个蛇节//创建蛇节p
如果这一点。snakebody[我][3]===null){//判断没有创建对应的蛇节
这一点。snakebody[我][3]=document.createElement (& # 39; p # 39;);//设置css样式(宽度,高度,颜色)
this.snakebody[我][3].style。宽度=this.snakebody[我][3].style。身高=len +“px";
this.snakebody[我][3].style。写成backgroundColor=this.snakebody[我][2];//绝对定位及位置
this.snakebody[我][3].style。位置=癮bsolute";//把蛇节追加给身体
document.body.appendChild (this.snakebody[我][3]);
}
this.snakebody[我][3].style。离开了=nakebody[我][0]* len +“px";
this.snakebody[我][3].style。=这。snakebody[我][1]* len +“px";
}
}//b。移动小蛇
这一点。movesnake=function () {//非蛇头蛇节(当前蛇节的新坐标是“下个蛇节“的旧坐标)
(var=0;我& lt;this.snakebody。长度- 1;我+ +){
这一点。snakebody[我][0]=nakebody [i + 1] [0];
这一点。snakebody[我][1]=nakebody [i + 1] [1];
}
如果这一点。重定向==皉ight") {//蛇头x坐标递增
this.snakebody [this.snakebody。长度- 1][0]+=1;
}
如果这一点。重定向==發eft") {//蛇头x坐标递减
this.snakebody [this.snakebody。长度- 1][0]=1;
}
如果这一点。重定向==皍p") {//蛇头y坐标递减
this.snakebody [this.snakebody。长度- 1][1]=1;
}
如果这一点。重定向==癲own") {//蛇头y坐标递增
this.snakebody [this.snakebody。长度- 1][1]+=1;
}//判断蛇头碰到食物//蛇头坐标
var xSnake=this.snakebody [this.snakebody。长度- 1][0];
var ySnake=this.snakebody [this.snakebody。长度- 1][1];//食物坐标food.xFood/food.yFood;
如果(xSnake==食物。xFood,,ySnake==food.yFood) {//吃食物增加蛇节
var newjie=[这。snakebody[0][0],这。snakebody[0][1], & # 39;绿色# 39;,null];
this.snakebody.unshift (newjie);//把newjie放到数组的第一个位置去//原食物消失,重新生成一个食物
food.showfood ();
}//控制小蛇在地图范围内移动
如果(xSnake & lt;0 | | xSnake祝辞39 | | ySnake & lt;0 | | ySnake祝辞19){
警报(& # 39;游戏在# 39;);
clearInterval (mytime);
返回错误;
}//吃到自己判断(蛇头坐标与其他蛇节坐标一致)
(var k=0;k & lt;this.snakebody。长度- 1;k + +) {
如果这一点。snakebody [k] [0]==xSnake,,这一点。snakebody [k] [1]==ySnake) {
警报(& # 39;游戏结束杀死你自己# 39;);
clearInterval (mytime);
返回错误;
}
}//根据新坐标绘制小蛇
this.showsnake ();
}
}
窗口。onload=function () {
var=新地图地图();
map.showmap ();
食物=new();//声明为全局的以便在该加载事件函数外部访问
food.showfood ();
蛇蛇=new();//声明为全局的蛇对象
snake.showsnake ();//移动小蛇//setInterval(全局变量,时间)
mytime=setInterval (“snake.movesnake ()“, 200);//设置键盘事件,控制器小蛇移动方向
文档。onkeydown=function (evt) {
var num=evt.keyCode;//通过事件对象获得数值码,进而知道被触发键子
如果(num==38) {
蛇。重定向=皍p";
}
如果(num==40) {
蛇。重定向=癲own";
}
如果(num==37) {
蛇。重定向=發eft";
}
如果(num==39) {
蛇。重定向=皉ight";
}
}
}
& lt;/script>
& lt;风格类型=拔谋?css"比;
身体{
保证金:0;
}
& lt;/style>
& lt;/head>
& lt; body> & lt;/body>
& lt;/html>
这篇文章主要介绍了JS制作简易版贪吃蛇小游戏的案例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
