- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>Snake web edition</title>
- <script type="text/javascript">
- var map = null; //面板对象
- var food = null; //食物对象
- var snake = null; //蛇 对象(null是空指针,可用于声明空对象)
- var mytime = null; //定时器对象
- //1.制作 操作 面板
- function Map(){
- this.width = 800;//面板 宽
- this.height = 400;//面板 高
- this.color = "lightblue";// 面板 背景 颜色
- this.bord = 0;
- //通过方发绘制 操作面板
- this.showmap = function(){
- //创建div, 通过div展示面板
- var ban = document.createElement('div');
- ban.style.width = this.width+"px";//面板宽
- ban.style.height = this.height+"px";//高
- ban.style.backgroundColor = this.color;
- //对div面板 进行定位
- ban.style.position = "absolute";//绝对定位
- ban.style.left = 0;
- ban.style.top = 0;
- //把div面板追加到body里面
- document.body.appendChild(ban);
- }
- }
- //2.绘制食物
- function Food(){//构造 函数
- this.height = 20;//食物高
- this.width = 20;//食物宽
- this.color = "red";
- this.pice = null;
- //food 位置随机
- this.showfood = function(){
- //创建 一个食物div
- if( this.pice == undefined){
- this.pice = document.createElement('div');
- this.pice.style.width = this.width+"px";//食物 宽
- this.pice.style.height = this.height + "px";//食物 高
- this.pice.style.backgroundColor = this.color;// 食物 颜色
- //定位
- this.pice.style.position = "absolute";
- }
-
-
- //让食物的位置发生变化
- //食物水平位置0--780px --->获得随机数 范围0--39
- //Math.random()产生的随机数 位小数 在0--1之间
- //Math.floor() 向下取整
- this.weizhiX = Math.floor(Math.random() * 40 );//取0--39之间随机数
- this.weizhiY = Math.floor(Math.random() * 20);//取0--19之间随机数
- this.pice.style.left = this.width* this.weizhiX+"px";
- this.pice.style.top = this.width * this.weizhiY + "px";
- //body追加shiwu
- document.body.appendChild(this.pice);
-
- }
- }
- //3.绘制 蛇
- function Snake(){
- this.range = 20; //每个蛇节的 宽度 和 高度
- // 段 duans的 每个元素就是 一个蛇节的信息
- this.duans = [[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]];
- this.redirect = "right";//蛇 默认向右走
- //绘制小蛇
- this.showduans = function(){
- //遍历duans的 数组,获得具体蛇的信息
- for(var i in this.duans){
- //创建 每个蛇段的 div
- //判断每个蛇段,之前是否有创建出来,避免创建重复的蛇段
- if(this.duans[i][3] == undefined){
- this.duans[i][3] = document.createElement('div');
- this.duans[i][3].style.backgroundColor = this.duans[i][2];
- this.duans[i][3].style.width = this.range+"px";
- this.duans[i][3].style.height = this.range+"px";
- this.duans[i][3].style.position = "absolute";
- }
-
-
-
- this.duans[i][3].style.left = this.duans[i][0] * this.range+ "px";
- this.duans[i][3].style.top = this.duans[i][1] * this.range+ "px";
- //展示 每个蛇段
- document.body.appendChild(this.duans[i][3]);
- }
- }
-
- //移动 小蛇
- this.moveduans = function (){
- for(var i=0;i< this.duans.length-1;i++){
- //当前元素的下标 === 下个元素的下标
- this.duans[i][0] = this.duans[i+1][0];//移动x轴坐标
- this.duans[i][1] = this.duans[i+1][1];//移动y轴坐标
- }
-
- //移动蛇头--向右
- if(this.redirect == "right"){
- this.duans[this.duans.length-1][0] += 1;
- }
- //移动蛇头--向 下
- if(this.redirect == "down"){
- this.duans[this.duans.length-1][1] += 1;
- }
- //移动蛇头--向 左
- if(this.redirect == "left"){
- this.duans[this.duans.length-1][0] -= 1;
- }
- //移动蛇头--向 上
- if(this.redirect == "up"){
- this.duans[this.duans.length-1][1] -= 1;
- }
-
- //判断蛇头 是否越界 --x坐标是否超过39
- // y坐标是否超过19
- // x坐标是否 小于0
- // y坐标是否 小于0
- if(this.duans[this.duans.length-1][0] > 39 ||
- this.duans[this.duans.length-1][0] < 0 ||
- this.duans[this.duans.length-1][1] > 19 ||
- this.duans[this.duans.length-1][1] < 0
- ){
- //game over---停止定时器
- alert("Game over!!");
- clearInterval(mytime);
- return false; //停止程序执行
- }
- //判断 蛇 是否吃到自己--即 蛇头部坐标与 某个蛇段坐标是否相等
- var shetouX = this.duans[this.duans.length-1][0];//蛇头X坐标
- var shetouY = this.duans[this.duans.length-1][1]; //蛇头Y坐标
- //遍历蛇段
- for(var i = 0; i< this.duans.length-1; i++){
- if(this.duans[i][0] == shetouX && this.duans[i][1]==shetouY){
- alert("吃到自己了,Game over!!!");
- clearInterval(mytime);
- return false; //停止程序执行
- }
- }
- //判断蛇头是否碰到食物
- var snakeX = this.duans[this.duans.length-1][0] ;
- var snakeY = this.duans[this.duans.length-1][1];
- var fX = food.weizhiX;
- var fY = food.weizhiY;
- if(snakeX == fX && snakeY == fY){//蛇头 坐标 和 食物 坐标 相等,则吃上食物
- // 吃掉 食物--把一个新段创建出来,新段的坐标 就是最后一个蛇段 的坐标
- var newduan = [this.duans[0][0],this.duans[0][1],'green',null];
- this.duans.unshift(newduan);
- // 重新 生成食物
- food.showfood();
- }
-
-
- //蛇段的位置发生变化,重新绘制小蛇
- this.showduans();
-
- }
- }
-
-
- window.onload = function(){//加载事件
- //1.绘制面板
- map = new Map();
- map.showmap();
-
- //2.绘制 食物
- food = new Food();
- food.showfood();
-
- //3.绘制 小蛇
- snake = new Snake();
- snake.showduans();
-
- //4.移动 蛇
- mytime = setInterval("snake.moveduans()",100);//定时器 单位ms
- //snake.moveduans();
-
- //5.给body添加 键盘事件
- document.body.onkeydown = function(evt){
- //console.log(evt.keyCode);//获得键码表 上下左右-- 38 40 37 39
- if(evt.keyCode == 38 && snake.redirect!= "down"){
- snake.redirect = "up";
- }
- if(evt.keyCode == 40 && snake.redirect!= "up"){
- snake.redirect = "down";
- }
- if(evt.keyCode == 37 && snake.redirect!= "right"){
- snake.redirect = "left";
- }
- if(evt.keyCode == 39 && snake.redirect!= "left"){
- snake.redirect = "right";
- }
- }
-
- }
- </script>
- </head>
- <body>
- hehe
- </body>
- </html>
复制代码
|
|