【游戏】前端游戏开发教程_贪吃蛇

java做游戏前端开发|前端游戏开发教程|应聘游戏开发前端面试

黑点代表小蛇,红点代表食物,按上下左右键即可以开始游戏。按enter暂停游戏。
代码片段 1

<!Doctype html>
<head>
<metacharset=”utf-8″ />
<title>目前前端开发用到的技术:游戏开发-贪吃蛇</title>
<metaname=”description” content=”测试” />
<metaname=”keywords” content=”测试” />
<linkrel=”stylesheet” type=”text/css” href=”http://pic.7881.com/7881/common/common.css” />
<style>
#maintd{
width:10px;
height:10px;
}
</style>
<script>
functionSnake(){
this.inits.apply(this,arguments);
}
Snake.prototype ={
inits:function(){
this.def={
body: [], //蛇身体
direction: null, //方向
timer: null, //时钟
speed: 150, //速度
paused: false,
rowCount: 30, //游戏区域表格行
colCount: 30 //游戏区域表格列
}
var_this=this;
varx=0;
vary=0;
this.body =this.def.body;
this.direction=this.def.direction;
this.timer=this.def.timer;
this.speed=this.def.speed;
this.rowCount=this.def.rowCount;
this.colCount=this.def.colCount;
this.paused=this.def.paused;
this.main=document.getElementById(“main”);
for (varrow=0;row<this.rowCount;row++) {//创建游戏区域,就是把表格画出来
vartr=this.main.insertRow(-1);
for (varcol=0;col<this.colCount;col++) {
vartd=tr.insertCell(-1);
}
}
this.generateDood();//创建第一个食物
while (true) {//创建蛇头
x=Math.floor(Math.random() *this.colCount);
y=Math.floor(Math.random() *this.rowCount);
if (!this.isCellFilled(x,y)) {
this.main.rows[y].cells[x].style.backgroundColor =”black”;
this.body.push({
x: x,
y: y
});
break;
}
}
document.onkeydown = function (e) {
if (!e) e= window.event;
switch (e.keyCode|e.which|e.charCode) {
case13:
{//enter键暂停
if (_this.timer) {
if (_this.paused) {
_this.move();
_this.paused=false;
}else{
_this.pause();
_this.paused=true;
}
}else{
break;
}
break;
}
case37:
{//像左
if (_this.direction==1||_this.direction==3||_this.paused==true) {
break;
}
_this.direction=3;
_this.move();
break;
}
case38:
{//向上
if (_this.direction==2||_this.direction==0||_this.paused==true) {
break;
}
_this.direction=0;
_this.move();
break;
}
case39:
{//向右
if (_this.direction==3||_this.direction==1||_this.paused==true) {
break;
}
_this.direction=1;
_this.move();
break;
}
case40:
{//向下
if (_this.direction==0||_this.direction==2||_this.paused==true) {
break;
}
_this.direction=2;
_this.move();
break;
}
}
}
},
isCellFilled:function(x,y){//检查格子有没有被占用
if (this.main.rows[y].cells[x].style.backgroundColor ==””) {
returnfalse;
}
returntrue;
},
generateDood:function(){//创建食物方法
while (true) {
varflag=true;
varx=Math.floor(Math.random() *this.colCount);
vary=Math.floor(Math.random() *this.rowCount);
for (varj=0;j<this.body.length;j++) {
if (this.body[j].x ==y&&this.body[j].y ==x) {
flag=false;
break;
}
}
if (flag) {
this.main.rows[x].cells[y].style.backgroundColor =”red”;
break;
}
}
},
move:function(){//循环移动
clearInterval(this.timer);
var_this=this;
this.timer=setInterval(function(){
_this.erase();
_this.moveOneStep();
_this.paint();
},this.speed);
},
moveOneStep:function(){//移动一格
if (this.checkNextStep() ==-1) {//-1代表游戏结束
clearInterval(this.timer);
if (confirm(“你挂了,是否重新开始!”)) {
this.restart();
return;
}else{
this.restart();
return;
}
}
if (this.checkNextStep() ==1) {//1代表碰到食物
var_point=this.getNextPos();
var_x=_point.x;
var_y=_point.y;
this.body.unshift({
x: _x,
y: _y
});
this.generateDood();//因为吃了一个食物,所以再产生一个食物
return;
}
varpoint=this.getNextPos();
this.body.pop();//从body数组中删除一个
this.body.unshift({
x: point.x,
y: point.y
});//把最新的一个坐标放入
},
erase:function(){//去掉后面一格的颜色
for (vari=0;i<this.body.length;i++) {
this.main.rows[this.body[i].y].cells[this.body[i].x].style.backgroundColor =””;
}
},
paint:function(){//给前面一格填充颜色,以让用户感觉蛇在移动
for (vari=0;i<this.body.length;i++) {
this.main.rows[this.body[i].y].cells[this.body[i].x].style.backgroundColor =”black”;
}
},
pause:function(){//暂停
clearInterval(this.timer);
this.paint();
},
restart:function(){//重新开始
if (this.timer) {
clearInterval(this.timer);
}
for (vari=0;i<this.rowCount;i++) {
this.main.deleteRow(0);
}
this.body = [];
this.inits();
},
getNextPos:function(){//获取下一格坐标
varx=this.body[0].x;
vary=this.body[0].y;
if (this.direction==0) {
y–;
}elseif (this.direction==1) {
x++;
}elseif (this.direction==2) {
y++;
}else{
x–;
}
return{
x: x,
y: y
};
},
checkNextStep:function(){//检测即将前进的一格是什么
varpoint=this.getNextPos();
varx=point.x;
vary=point.y;
if (x<0||x>=this.colCount||y<0||y>=this.rowCount) {//如果是边界,游戏结束
return-1;
}
for (vari=0;i<this.body.length;i++) {
if (this.body[i].x ==x&&this.body[i].y ==y&&this.body.length >4) {//如果是自己的身体,游戏结束
return-1;
}
}
if (this.isCellFilled(x,y)) {//如果有食物
return1;
}
return0;//是空地
}
}
window.onload = function () {
newSnake();
}
</script>
</head>
<body>
<tableid=”main” border=”1″ cellspacing=”0″ cellpadding=”0″></table>
</body>
</html>

web前端开发游戏网页|c 游戏前端开发工具|前端技术开发的贪吃蛇小游戏

» 本文来自:前端开发者 » 《【游戏】前端游戏开发教程_贪吃蛇》
» 本文链接地址:https://www.rokub.com/3791.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!