//制作游戏界面<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,height=device-height"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type='text/javascript' src='1531983576.js'></script><style></style></head><body><script>//创建一个游戏应用var app = new PIXI.Application(600,900);//将游戏应用添加到舞台上document.body.appendChild(app.view);//添加游戏背景var bg = new PIXI.Sprite.fromImage("res/snake/di.jpg");app.stage.addChild(bg);//在游戏背景上添加18*18的游戏格子for(var i=0;i<18;i++){//行for(var j=0;j<18;j++){var kuai = new PIXI.Sprite.fromImage("res/snake/kuai.png");app.stage.addChild(kuai);kuai.x = 30+i*30;kuai.y = 30+j*30;}}//添加左右上下游戏按钮var zuo = new PIXI.Sprite.fromImage("res/snake/button0001.png");app.stage.addChild(zuo);zuo.x = 190;zuo.y = 750;var you = new PIXI.Sprite.fromImage("res/snake/button0002.png");app.stage.addChild(you);you.x = 310;you.y = 750;var shang = new PIXI.Sprite.fromImage("res/snake/button0003.png");app.stage.addChild(shang);shang.x = 250;shang.y = 690;var xia = new PIXI.Sprite.fromImage("res/snake/button0004.png");app.stage.addChild(xia);xia.x = 250;xia.y = 750;//游戏开始界面，添加贪吃蛇文字、开始游戏图片var wen = new PIXI.Text("贪吃蛇");app.stage.addChild(wen);wen.style.fill = "#ff00ff";wen.x = 205;wen.y = 140;wen.style.fontWeight = "bold";//加粗wen.style.fontSize = 51;//设置字体大小wen.style.fontFamily = "隶书";//设置字体var kai = new PIXI.Sprite.fromImage("res/map/Playgame.png");app.stage.addChild(kai);kai.x = 190;kai.y = 310;//结束界面var gameover = new PIXI.Sprite.fromImage("res/map/gameover.png");app.stage.addChild(gameover);gameover.x = 190;gameover.y = 310;gameover.visible = false;//给gameover图片添加点击事件，单击后刷新游戏页面gameover.interactive = true;gameover.on('click', function() {window.location.reload();});//游戏失败后的文字var gameoverWen = new PIXI.Text("菜的一批");app.stage.addChild(gameoverWen);gameoverWen.style.fill = "#ff00ff";gameoverWen.x = 190;gameoverWen.y = 140;gameoverWen.style.fontWeight = "bold";//加粗gameoverWen.style.fontSize = 51;//设置字体大小gameoverWen.style.fontFamily = "隶书";//设置字体gameoverWen.visible = false;</script></body></html>
//存储贪吃蛇蛇头的逐帧动画var arrshe = [];//存储贪吃贪吃蛇var arrtan = [];//开始游戏总开关var kaishi = false;//宝石var arrbao = [];//创建贪吃蛇头类function Shetou(){//蛇头逐帧动画for(var i=1;i<16;i++){if(i<10){arrshe.push("res/snake/tou000"+i+".png");}if(i>9){arrshe.push("res/snake/tou00"+i+".png");}}//蛇头this.view = new PIXI.extras.AnimatedSprite.fromImages(arrshe);app.stage.addChild(this.view);this.view.play();this.view.animationSpeed = 0.5;this.view.y = 135;this.view.x = 255;this.view.anchor.set(0.5,0.5);//定义蛇头的速度this.movex = 0;this.movey = 30;//控制蛇头移动，其余身子、以及尾巴不进行帧频函数//for循环倒叙，让蛇头带动着身子走，数组最后一个图片的坐标等于前一个图片的坐标this.move = function(){//i=0时进行蛇头的移动，i!=0时除蛇头外数组的后一个图片的坐标等于前一个图片的坐标for(let i=arrtan.length-1;i>=0;i--){if(i===0){this.view.x += this.movex;this.view.y += this.movey;}else{arrtan[i].view.x = arrtan[i-1].view.x;arrtan[i].view.y = arrtan[i-1].view.y;}}}//触碰边界：实例化对象后调用方法传进来参数来进行贪吃蛇与边界的碰撞this.frontier = function(x,y){if(this.view.x+this.movex > x-30 || this.view.x+this.movex < 30){//游戏结束，开关关闭kaishi = false;//结束游戏界面显示gameoverWen.visible = true;gameover.visible = true;}if(this.view.y+this.movey > y-30 || this.view.y+this.movey < 30){//游戏结束，开关关闭kaishi = false;//结束游戏界面显示gameoverWen.visible = true;gameover.visible = true;}}//判断蛇头走向this.direction = 3;this.fangxiang = function(){if(this.movex>0&&this.movey===0){//蛇头向右this.direction = 1;}else if(this.movex<0&&this.movey===0){//蛇头向左this.direction = 2;}else if(this.movex===0&&this.movey>0){//蛇头向下this.direction = 3;}else if(this.movex===0&&this.movey<0){//蛇头向上this.direction = 4;}}//实例化宝石，添加到舞台上this.bao = function(){var baoshi = new Baoshi();arrbao.push(baoshi);}}
//创建贪吃蛇身类：实例化对象时传入参数调节蛇身的坐标
function Sheshen(x,y){
//蛇身
this.view = new PIXI.Sprite.fromImage("res/snake/kuai0004.png");
app.stage.addChild(this.view);
this.view.y = y;
this.view.x = x;
this.view.anchor.set(0.5,0.5);
}
//创建贪吃蛇尾类：实例化对象时传入参数调节蛇尾的坐标
function Shewei(x,y){
//蛇尾
this.view = new PIXI.Sprite.fromImage("res/snake/kuai0005.png");
app.stage.addChild(this.view);
this.view.y = y;
this.view.x = x;
this.view.anchor.set(0.5,0.5);
}
//宝石类
function Baoshi(){
//宝石
this.view = new PIXI.Sprite.fromImage("res/snake/kuai0002.png");
app.stage.addChild(this.view);
this.view.anchor.set(0.5,0.5);
//随机坐标参数
this.suijix = Math.round(Math.random()*17+1);
this.suijiy = Math.round(Math.random()*17+1);
//宝石坐标等于随即坐标参数
this.view.x = this.suijix*30+15;
this.view.y = this.suijiy*30+15;
this.remove = function(){
//刷新宝石位置，吃掉宝石后宝石的坐标重新赋值
this.suijix = Math.round(Math.random()*17+1);
this.suijiy = Math.round(Math.random()*17+1);
this.view.x = this.suijix*30+15;
this.view.y = this.suijiy*30+15;
//1you 2zuo 3xia 4shang
//长身体，蛇身添加在尾巴前，插入到数组中尾巴的前面的词一个下标
var sheshen = new Sheshen(arrtan[arrtan.length-1].view.x,arrtan[arrtan.length-1].view.y);
arrtan.splice(arrtan.length-2,0,sheshen);
//判断蛇头的方向，从而确定蛇尾坐标移动的数值，加一个身子尾巴往后移动一下
if(arrtan[0].direction===1){
//蛇头向右
arrtan[arrtan.length-1].view.x -= 30;
}
if(arrtan[0].direction===2){
//蛇头向左
arrtan[arrtan.length-1].view.x += 30;
}
if(arrtan[0].direction===3){
//蛇头向下
arrtan[arrtan.length-1].view.y -= 30;
}
if(arrtan[0].direction===4){
//蛇头向上
arrtan[arrtan.length-1].view.x += 30;
}
}
}
//创建贪吃蛇
function tanchishe(){
//创建蛇头
var shetou = new Shetou();
//重新赋值一下接受蛇头方向的参数
shetou.fangxiang();
//1you 2zuo 3xia 4shang
if(shetou.direction===3){
//创建蛇身蛇尾
var sheshen1 = new Sheshen(shetou.view.x,shetou.view.y-30);
var sheshen2 = new Sheshen(shetou.view.x,shetou.view.y-60);
var shewei = new Shewei(shetou.view.x,shetou.view.y-90);
}
//添加进数组
arrtan.push(shetou);
arrtan.push(sheshen1);
arrtan.push(sheshen2);
arrtan.push(shewei);
//实例化宝石对象
arrtan[0].bao();
}
//1you 2zuo 3xia 4shang
//左
zuo.interactive = true;
zuo.on("click",azuo);
function azuo(){
//向右走的时候不能向左
//重新赋值一下接受蛇头方向的参数
arrtan[0].fangxiang();
if(arrtan[0].direction!==1 && arrtan[0].direction!==2 && kaishi===true){
arrtan[0].movex = -30;
arrtan[0].movey = 0;
//当蛇头往下走时
if(arrtan[0].direction===3){
//蛇头蛇尾转向
arrtan[0].view.rotation += Math.PI/2;
arrtan[arrtan.length-1].view.rotation += Math.PI/2;
}
//当蛇头往上走时
else if(arrtan[0].direction===4){
//蛇头蛇尾转向
arrtan[0].view.rotation -= Math.PI/2;
arrtan[arrtan.length-1].view.rotation -= Math.PI/2;
}
}
}
//右
you.interactive = true;
you.on("click",ayou);
function ayou(){
//向左走的时候不能向右
//重新赋值一下接受蛇头方向的参数
arrtan[0].fangxiang();
if(arrtan[0].direction!==2 && arrtan[0].direction!==1 && kaishi === true){
arrtan[0].movex = 30;
arrtan[0].movey = 0;
//当蛇头往下走时
if(arrtan[0].direction===3){
//蛇头蛇尾转向
arrtan[0].view.rotation -= Math.PI/2;
arrtan[arrtan.length-1].view.rotation -= Math.PI/2;
}
//当蛇头往上走时
else if(arrtan[0].direction===4){
//蛇头蛇尾转向
arrtan[0].view.rotation += Math.PI/2;
arrtan[arrtan.length-1].view.rotation += Math.PI/2;
}
}
}
//3上
shang.interactive = true;
shang.on("click",ashang);
function ashang(){
//向下走的时候不能向上
//重新赋值一下接受蛇头方向的参数
arrtan[0].fangxiang();
if(arrtan[0].direction!==4 && arrtan[0].direction !== 3 && kaishi === true){
arrtan[0].movex = 0;
arrtan[0].movey = -30;
//当蛇头往右走时
if(arrtan[0].direction===1){
//蛇头蛇尾转向
arrtan[0].view.rotation -= Math.PI/2;
arrtan[arrtan.length-1].view.rotation -= Math.PI/2;
}
//当蛇头往左走时
else if(arrtan[0].direction===2){
//蛇头蛇尾转向
arrtan[0].view.rotation += Math.PI/2;
arrtan[arrtan.length-1].view.rotation += Math.PI/2;
}
}
}
//4下
xia.interactive = true;
xia.on("click",axia);
function axia(){
//向上走的时候不能向下
//重新赋值一下接受蛇头方向的参数
arrtan[0].fangxiang();
if(arrtan[0].direction !== 4 && arrtan[0].direction !== 3 && kaishi === true){
arrtan[0].movex = 0;
arrtan[0].movey = 30;
//当蛇头往右走时
if(arrtan[0].direction===1){
//蛇头蛇尾转向
arrtan[0].view.rotation += Math.PI/2;
arrtan[arrtan.length-1].view.rotation += Math.PI/2;
}
//当蛇头往左走时
else if(arrtan[0].direction===2){
//蛇头蛇尾转向
arrtan[0].view.rotation -= Math.PI/2;
arrtan[arrtan.length-1].view.rotation -= Math.PI/2;
}
}
}
//游戏开始
kai.interactive = true;
kai.on("click",function(){
//游戏开始界面隐藏
wen.visible = false;
kai.visible = false;
//游戏总开关开启
kaishi = true;
//调用tanchishe()函数创建贪吃蛇与宝石
tanchishe();
})
//帧频函数
var time = 0;
app.ticker.add(function(){
//当点击开始游戏时开始按钮true后执行帧频函数，每20帧执行一次
if(kaishi === true){
time++;
if(time===20){
//调用蛇头的frontier方法，判断蛇头是否撞上边界
arrtan[0].frontier(600,20*30);
//调用move方法，控制贪吃蛇移动
arrtan[0].move();
//判断蛇头坐标是否与宝石坐标一致，一致时宝石坐标刷新，长一节身子
if(arrtan[0].view.x === arrbao[0].view.x && arrtan[0].view.y === arrbao[0].view.y){
arrbao[0].remove();
}
time = 0;
}
}
})
//监听键盘事件37← 39→ 40↓ 38↑
document.onkeydown = function(e) {
switch(e.keyCode) {
case 37:
azuo();
break;
case 38:
ashang();
break;
case 39:
ayou();
break;
case 40:
axia();
break;
}
}
若有收获，就点个赞吧
0 人点赞
