用JS实现贪吃蛇小游戏
疫情期间呆在家里无聊，于是深入学习了一下JS。自己也模仿写一个贪吃蛇的小游戏，本人刚接触JS不久如有错误，望评论区指出。
因为一般贪吃蛇游戏中的CSS样式较为简单，所以这里主要讲一下JS的写法。
食物生成
贪吃蛇中的食物是随机生成的且可以删除，这就需要我们利用js生成div。方便生成与删除，首先将食物存放进数组中方便删除，在利用随机数函数生成在地图的其他位置
var ele =[];//将食物存放进数组中
//构建食物结构体
function Food(x,y,width,height,color){
this.x=x;//横坐标
this.y=y;//纵坐标
this.width=width||20;//宽度
this.height=height||20;//高度
this.color=color||"white";//颜色
//还可以在加入其他style
}
//食物原型
Food.prototype.init= function(map){
//先删除小球
remove();
var div=document.createElement('div');//创建div
map.appendChild(div);//设为地图的子元素
div.style.width=this.width+'px';//宽度
div.style.height=this.height+'px';//高度
div.style.backgroundColor=this.color;//颜色
this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;//根据地图和食物大小计算生成范围
this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
div.style.position="absolute";//脱离文档流，使用绝对定位
div.style.left=this.x+'px';
div.style.top=this.y+'px';
//先将小球存入数组中，方便删除时调用
ele.push(div);
}
//编写删除小球的函数
function remove(){
for(var i=0;i<ele.length;i++){
var eles=ele[i];
eles.parentNode.removeChild(eles);//移除元素
ele.splice(i,1);
}
}
蛇
蛇的原理和食物差不多，只不过这里将蛇分成一个个body，方便生成和调用
var ele=[];
function snake(width,height,direction){
//设置蛇的样式
this.width=width||20;//每一个body的宽度
this.height=height||20;//高度
this.body=[
{x:3,y:2,color:"white"},//蛇头
{x:2,y:2,color:"red"},//蛇身
{x:1,y:2,color:"red"},
]
this.direction=direction||"right";//默认初始方向
}
snake.prototype.init=function(map){
//和食物原理一样，先移除再生成
remove();
for(var i=0;i<this.body.length;i++){
var obj=this.body[i];
var div=document.createElement("div");
map.appendChild(div);
div.style.width=this.width+'px';//宽度
div.style.height=this.height+'px';//高度
div.style.position="absolute";//脱离文档流，绝对定位
div.style.left=obj.x*this.width+'px';//横坐标
div.style.top=obj.y*this.height+'px';//纵坐标
div.style.backgroundColor=obj.color;//颜色
ele.push(div);//存入数组
}
};
snake.prototype.move=function(food,map,event){
var i=this.body.length-1;
for(;i>0;i--)//逆循环{
this.body[i].x=this.body[i-1].x;//将i-1的body的位置穿给i
this.body[i].y=this.body[i-1].y;
}
switch(this.direction)//选择器{
case "right":this.body[0].x+=1;break;//更改蛇头方向
case "left":this.body[0].x-=1;break;
case "top":this.body[0].y+=1;break;
case "bottom":this.body[0].y-=1;break;
}
//判断蛇是否吃掉食物
var snakex=this.body[0].x*this.width;//获取蛇的坐标
var snakey=this.body[0].y*this.height;
var foodx=food.x;//获取食物横坐标
var foody=food.y;//获取食物纵坐标
console.log(foodx);
console.log(snakex);
if(snakex==foodx&&snakey==foody//判断是否先等){
var last=this.body[this.body.length-1];//获取最后一个body
//增加body
this.body.push({
x:last.x,
y:last.y,
color:last.color
})
food.init(map);
}
};
//移除小蛇，原理和食物一样
function remove(){
for(var i=0;i<ele.length;i++){
var eles=ele[i];
eles.parentNode.removeChild(eles);
ele.splice(i,1);
}
};
添加游戏自调用函数
//编写游戏的自调用方便使用
function game(map) {
this.food= new Food();
this.snake=new snake();
this.map=map;
that=this;
}
game.prototype.init=function () {
//调用食物和蛇
this.food.init(this.map);
this.snake.init(this.map);
this.run(this.food,this.map);
//键盘监听
this.key();
}
game.prototype.run=function(food,map){
//设置定时器，使小蛇动起来
var time=setInterval(function(){
this.snake.move(food,map);
this.snake.init(map);
var snakex=this.snake.body[0].x;//获取蛇头位置
var snakey=this.snake.body[0].y;
//判断蛇头位置是否出界
if(snakex<0||snakex>=40){
clearInterval(time);
window.alert("失败");
}
if(snakey<0||snakey>=30){
clearInterval(time);
window.alert("失败");
}
}.bind(that),100)
}
//键盘监听函数
game.prototype.key=function(){
document.addEventListener("keydown",function (e) {
switch (e.keyCode) {
case 37:this.snake.direction="left";break;
case 38:this.snake.direction="bottom";break;
case 39:this.snake.direction="right";break;
case 40:this.snake.direction="top";break;
}
}.bind(that),false)
}
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇</title>
<style>
.map{
width: 800px;
height: 600px;
background-color: black;
position: relative;
}
</style>
</head>
<body>
<div class="map">
</div>
<script>
(function (){
var ele =[];
function Food(x,y,width,height,color){
this.x=x;
this.y=y;
this.width=width||20;
this.height=height||20;
this.color=color||"white";
}
Food.prototype.init= function(map){
remove();
var div=document.createElement('div');
map.appendChild(div);
div.style.width=this.width+'px';
div.style.height=this.height+'px';
div.style.backgroundColor=this.color;
this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
div.style.position="absolute";
div.style.left=this.x+'px';
div.style.top=this.y+'px';
ele.push(div);
}
function remove(){
for(var i=0;i<ele.length;i++){
var eles=ele[i];
eles.parentNode.removeChild(eles);
ele.splice(i,1);
}
}
window.Food=Food;
})();
(function(){
var ele=[];
function snake(width,height,direction){
this.width=width||20;
this.height=height||20;
this.body=[
{x:3,y:2,color:"white"},
{x:2,y:2,color:"red"},
{x:1,y:2,color:"red"},
]
this.direction=direction||"right";
}
snake.prototype.init=function(map){
remove();
for(var i=0;i<this.body.length;i++){
var obj=this.body[i];
var div=document.createElement("div");
map.appendChild(div);
div.style.width=this.width+'px';
div.style.height=this.height+'px';
div.style.position="absolute";
div.style.left=obj.x*this.width+'px';
div.style.top=obj.y*this.height+'px';
div.style.backgroundColor=obj.color;
ele.push(div);
}
};
snake.prototype.move=function(food,map,event){
var i=this.body.length-1;
for(;i>0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
switch(this.direction){
case "right":this.body[0].x+=1;break;
case "left":this.body[0].x-=1;break;
case "top":this.body[0].y+=1;break;
case "bottom":this.body[0].y-=1;break;
}
var snakex=this.body[0].x*this.width;
var snakey=this.body[0].y*this.height;
var foodx=food.x;
var foody=food.y;
console.log(foodx);
console.log(snakex);
if(snakex==foodx&&snakey==foody){
var last=this.body[this.body.length-1];
this.body.push({
x:last.x,
y:last.y,
color:last.color
})
food.init(map);
}
};
function remove(){
for(var i=0;i<ele.length;i++){
var eles=ele[i];
eles.parentNode.removeChild(eles);
ele.splice(i,1);
}
};
window.snake=snake;
})();
(function(){
function game(map) {
this.food= new Food();
this.snake=new snake();
this.map=map;
that=this;
}
game.prototype.init=function () {
this.food.init(this.map);
this.snake.init(this.map);
this.run(this.food,this.map);
this.key();
}
game.prototype.run=function(food,map){
var time=setInterval(function(){
this.snake.move(food,map);
this.snake.init(map);
var snakex=this.snake.body[0].x;
var snakey=this.snake.body[0].y;
if(snakex<0||snakex>=40){
clearInterval(time);
window.alert("失败");
}
if(snakey<0||snakey>=30){
clearInterval(time);
window.alert("失败");
}
}.bind(that),100)
}
game.prototype.key=function(){
document.addEventListener("keydown",function (e) {
switch (e.keyCode) {
case 37:this.snake.direction="left";break;
case 38:this.snake.direction="bottom";break;
case 39:this.snake.direction="right";break;
case 40:this.snake.direction="top";break;
}
}.bind(that),false)
}
window.game=game;
}());
var game=new game(document.querySelector(".map"));
game.init();
</script>
</body>
</html>
结语
这个方法是跟着黑马程序员学习的，里面有许多原型用法，下次准备详细介绍JS中原型的写法，如有错误请在评论区指出，有疑惑的可以私聊我，谢谢。