很久之前学jquery时写的一个小游戏,代码如下:
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').css({
"padding":"0px",
"margin":"0px"
});
function Map(){
$("<div/>").css({
"width":"800px",
"height":"400px",
"background-image":"url(back.jpg)"
}).appendTo($('body')[0]);
}
function Food(){
this.foodX=Math.floor(Math.random()*40);
this.foodY=Math.floor(Math.random()*20);
this.showFood = function(){
this.foodX=Math.floor(Math.random()*40);
this.foodY=Math.floor(Math.random()*20);
if($(".food").length==0){
$('body:first').append("<div class='food'></div>");
$(".food:first").css({
"height":"20px",
"width":"20px",
"background":"orange",
"position":"absolute"
});
}
$(".food:first").css({
"top":this.foodY*20+"px",
"left":this.foodX*20+"px"
})
}
}
function Snake(){
var len = 20;
var n=0;
var preKey = 39;
this.section = [[0,10,'green',null],[1,10,'green',null],[2,10,'green',null],[3,10,'green',null],[4,10,'red',null]];
this.showSnake = function(){
for(var i=0;i<this.section.length;i++){
if(this.section[i][3]==null){
this.section[i][3]=$("<div/>");
this.section[i][3].css({
"width":len+"px",
"height":len+"px",
"position":"absolute",
"background":this.section[i][2]
}).appendTo($('body')[0]);
}
this.section[i][3].css({
"top":this.section[i][1]*len+"px",
"left":this.section[i][0]*len+"px"
})
}
}
this.bodyMove = function(keyCode){
var sectionX = this.section[0][0];
var sectionY = this.section[0][1];
var foodX = food.foodX;
var foodY = food.foodY;
if((keyCode==37&&preKey==39)||(keyCode==39&&preKey==37)||(keyCode==38&&preKey==40)||(keyCode==40&&preKey==38)){
return;
}
for(var i=0;i<this.section.length-1;i++){
this.section[i][0]=this.section[i+1][0];
this.section[i][1]=this.section[i+1][1];
}
switch(keyCode){
case 37:this.section[this.section.length-1][0]--;break;
case 38:this.section[this.section.length-1][1]--;break;
case 39:this.section[this.section.length-1][0]++;break;
case 40:this.section[this.section.length-1][1]++;break;
}
preKey=keyCode;
if(foodX==this.section[this.section.length-1][0]&&foodY==this.section[this.section.length-1][1]){
this.section.unshift([sectionX,sectionY,'green',null]);
food.showFood();
}
for(var i=0;i<this.section.length-1;i++){//不能碰到自己的身体
if(equalsBody(this.section[this.section.length-1],this.section[i])==true){
alert("Game Over!");
$(document).unbind("keydown");
return;
break;
}
}
if(this.section[this.section.length-1][0]<0||this.section[this.section.length-1][0]>=40||this.section[this.section.length-1][1]<0||this.section[this.section.length-1][1]>=20){//不能超出地图的边界
alert("Game Over!");
$(document).unbind("keydown");
}else{
this.showSnake();
}
function equalsBody(body1,body2){
if(body1[1]==body2[1]&&body1[0]==body2[0]){
return true;
}else{
return false;
}
}
}
}
var map = new Map();
var food = new Food();
food.showFood();
var snake = new Snake();
snake.showSnake();
$(document).keydown(function(event){
var key = event.keyCode;
if(key==37||key==38||key==39||key==40){
snake.bodyMove(event.keyCode)
}
});
})
</script>
back.jgp
程序截图:
注:
1.需要链接上JQuery文件
2.将back.jpg 图片保存到文件所在路径
希望对大家的学习有所帮助