使用Javascript做贪吃蛇小游戏,
1.自定义地图宽高,蛇的初始速度
2.食物随机出现
3.蛇的样式属性
4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0; margin: 0; } </style> </head> <body> <input type="text" id="fen" value="0" disabled> <script type="text/javascript"> var kuang = parseInt(prompt("请输入地图宽度")); var gao = parseInt(prompt("请输入地图高度")); var sudu = parseInt(prompt("请输入蛇的速度(越大越慢)")); //创建地图 function Map(){ //属性 this.width = kuang; this.height = gao; this.backgroundColor = 'gray'; this.ditu = null; //方法 if (!Map.prototype.show) { Map.prototype.show = function(){ //创建div var div = document.createElement('div'); //设置样式 div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.backgroundColor = this.backgroundColor; //显示在页面 document.body.appendChild(div); //将地图div 保存到地图对象的属性上 this.ditu = div; } } } var map = new Map(); map.show(); //创建食物 function Food(map){ //属性 this.width = 20; this.height = 20; this.backgroundColor = 'yellow'; this.x = 0; this.y = 0; this.position = 'absolute'; this.borderRadius = '50%'; this.shiwu = null; //方法 if(!Food.prototype.show){ Food.prototype.show = function(){ //判断，显示，刷新 if(!this.shiwu){ //创建div var div = document.createElement('div'); div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.backgroundColor = this.backgroundColor; div.style.borderRadius = this.borderRadius; div.style.position = this.position; //显示到界面 map.ditu.appendChild(div); this.shiwu = div; } //位置 //横/纵坐标 = 0~30随机数 * 地图宽/食物宽（食物宽20） this.x = Math.floor(Math.random() * (map.width / this.width)); this.y = Math.floor(Math.random() * (map.height / this.height)); //根据坐标，显示食物位置 this.shiwu.style.left = this.x * this.width + 'px'; this.shiwu.style.top = this.y * this.height + 'px'; } } } //输出 var food = new Food(map); food.show(); //创建蛇 function Snake(){ //属性 this.width = 20; this.height = 20; this.position = 'absolute'; this.direction = 'right'; this.borderRadius = '50%'; //是否可以改变方向 this.canChange = false; //身体 //[[x, y, 颜色, div]] this.body = [[5, 5, 'red', null], [4, 5, 'blue', null], [3, 5, 'blue', null]]; //方法 //判断，显示，移动 if(!Snake.prototype.show){ Snake.prototype.show = function(){ //创建每节身体div for (var i = 0; i < this.body.length; i++) { //每节身体,判断是否创建过 if (!this.body[i][3]) { //公共样式 var div =document.createElement('div'); div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.position = this.position; //显示 map.ditu.appendChild(div); this.body[i][3] = div; } //不同样式 this.body[i][3].style.backgroundColor = this.body[i][2]; this.body[i][3].style.left = this.body[i][0] * this.width + 'px'; this.body[i][3].style.top = this.body[i][1] * this.height+ 'px'; this.body[i][3].style.borderRadius = '5px'; this.body[0][3].style.borderRadius = this.borderRadius; } //显示完成，可以修改方向 this.canChange = true; } //移动 //最后一节坐标变成前一节坐标 Snake.prototype.move = function(){ //循环,修改每节坐标 for (var i = this.body.length - 1; i > 0; i--) { //x = x-1 y = y-1 this.body[i][0] = this.body[i-1][0]; this.body[i][1] = this.body[i-1][1]; } //蛇头控制方向 if (this.direction == 'right') { //x + 1 this.body[0][0] += 1; }else if(this.direction == 'left') { //x - 1 this.body[0][0] -= 1; }else if(this.direction == 'up') { //y - 1 this.body[0][1] -= 1; }else if(this.direction == 'down') { //y + 1 this.body[0][1] += 1; } //判断边界 if (this.body[0][0] < 0 || this.body[0][0] > (map.width / this.width) - 1 || this.body[0][1] < 0 || this.body[0][1] > (map.height / this.height) - 1) { //游戏结束 clearInterval(timer); alert('游戏结束'); return; } //判断 蛇头和其他身体坐标重合 for (var i = 1; i < this.body.length; i++) { if (this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]) { //重合，停止 clearInterval(timer); alert('游戏结束'); return; } } //重新显示 this.show(); //判断 是否吃到食物 蛇头坐标和食物坐标一样 if (this.body[0][0] == food.x && this.body[0][1] == food.y) { //分数 var score = document.getElementById('fen'); var sc = parseInt(score.value)+1; score.value = sc; //吃到 this.body加长一节 this.body[this.body.length] = [0, 0, 'blue', null]; //食物刷新 food.show(); //吃到食物，加速 if(t>150){ t -= 10; setTimer(); } } } } } //输出蛇 var snake = new Snake; snake.show(); //绑定键盘 window.onkeyup = function(e){ var evt = e || window.event; if (!snake.canChange) { return; } //左 37 上 38 右 39 下 40 if (e.keyCode == 37 && snake.direction != 'right') { snake.direction = 'left' }else if(e.keyCode == 38 && snake.direction != 'down') { snake.direction = 'up' }else if(e.keyCode == 39 && snake.direction != 'left') { snake.direction = 'right' }else if(e.keyCode == 40 && snake.direction != 'up') { snake.direction = 'down' } snake.canChange =false; }; //定时器 自动移动 var t = sudu; var timer; function setTimer(){ //先停止 clearInterval(timer); //重新设置 timer = setInterval(function(){ snake.move(); }, t); } setTimer(); </script> </body> </html>