event:event对象表示有关事件的信息。
keyCode:是event的一个属性。对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码
。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的
布局相关。
<script language="javascript" type="text/javascript">
function changeDirect(evt){
alert(evt.keyCode);//这个句式event.keyCode;这个就是显示你的键盘上你按的键的
unicode字符码,获得unicode字符码值
}
//onkeydown某个键盘按键被按下。就会触发这个事件
</script>
</head>
<body οnkeydοwn="changeDirect(event)"><!--实际参数传到里面-->
</body>
这个是按键盘上向下的箭头键的Unicode字符码值
这个是按字母A键的unicode字符码值。这些值在做游戏时,可以把键盘上的键设置向上向下向左向右。
做贪吃蛇让,思路:
1、首先要做一个图层(map),让蛇跟食物在图层里运动
2、做食物,食物是一个图层,利用javascript DOM对象,创建食物图层
3、做蛇,蛇是一个图层,有三节,先设置蛇的默认位置,利用javascript DOM对象,创建蛇图层。
4、蛇的移动(默认向右移动),先移动蛇身,后边的蛇身永远覆盖前面的蛇身,移动蛇头,蛇的移动方向,向上移动y轴减1,向下移动y轴加1,向左移动x轴减1,向右移动x轴加1.移动新的地方,要把旧的蛇删除,按照新的位置重新显示蛇。
5、结合键盘,通过event.keyCode;显示你的键盘上你按的键的unicode字符码,获得unicode字符码值。做出向上跑的键,向下跑的键。
(这个贪吃蛇只做到这里,还会进一步完善做完)只是实现了蛇的走动,向上向下左右走动,还没实现碰到图层边就死和吃食物
1、tanchishe.html
<style type="text/css">
/*如果是.map下面就要用class=map*/
#container{
width:800px;
margin:auto;
margin_top:60px;
}
#map{
width:800px;
height:400px;
background-color:#ccc;
overflow:hidden;
position:absolute;
}
</style>
<script language="javascript" type="text/javascript">
//设置食物,食物是一个div
function Food(){
this.w=20;
this.h=20;
this.color='red';
//显示食物
this.display=function(){//display是一个函数名,后面是函数体
//我们显示一个食物,首先要知道,大小,位置,属性
var new_div=document.createElement('div');//创建div节点
new_div.style.width=this.w+'px';//设置div的宽
new_div.style.height=this.h+'px';
//位置我们采用0,1,2....
//还要求出有多少个空格
//整个大的图层长800,宽400,而食物长,宽20,长一共能放下40个,宽能放下20个,大图层句这样被分成几个小格格
//蛇和食物都是20px,整个图层就是被分成多少个格格,格格的宽和高是20px,x就是横着几个格格,y是竖着几个格格
//当前的坐标x:0-1乘以39个它小于40个,x就是有几个格格。y:就是小于20个,让食物在这个范围内活动
this.x=Math.round(Math.random()*39);//Math.random()产生0-1之间的数,
Math.round四舍五入
this.y=Math.round(Math.random()*19);
//食物div距左边的距离:食物的宽*x几个格格,因为格格是按照食物分的
new_div.style.left=(this.w*this.x)+'px';
new_div.style.top=(this.h*this.y)+'px';
new_div.style.backgroundColor = this.color;//食物的颜色
new_div.style.position = 'absolute';//食物的定位是绝对定位,绝对定位就是在大屏幕上随便定位,它可以随意动,相对定位,它就相对于参照物而定位,它不能动,相对于它定位就定这了
document.getElementById('map').appendChild(new_div);//把这个食物div添加到
mapdiv中
}
}
//设置蛇
function Snake(){
this.w = 20;
this.h = 20;
this.direct = 'right';//蛇的默认方向
//通过数组来保存蛇身,一个元素代表一个蛇节,
this.body = [//默认把蛇定位到这
{x:5,
y:3,
color:"blue"
},
{x:4,
y:3,
color:"red"
},
{x:3,
y:3,
color:'red'
}
]
//显示蛇
this.display = function(){
for(var i = 0;i<this.body.length;i++){
var snake_div = document.createElement('div');//创建div节点
snake_div.style.width =this.w+'px';//div的宽,蛇的宽
snake_div.style.height =this.h+'px';
//蛇和食物都是20px,整个图层就是被分成多少个格格,格格的宽和高是20px,x就是横着几个格格,y是竖着几个格格
//蛇具左边的距离:蛇的宽*x格格数,
snake_div.style.left = (this.w*this.body[i].x)+'px';//this.body[i].x就是为了获得x的值
snake_div.style.top = (this.h*this.body[i].y)+'px';
snake_div.style.position = 'absolute';
snake_div.style.backgroundColor = this.body[i].color;//蛇的颜色,蛇身和蛇头不一样色
document.getElementById('map').appendChild(snake_div);//把蛇这个div添加到map这个div中
//将显示的div记录下来
this.body[i].div = snake_div;
}
}
//蛇移动
this.move=function(){
//先移动蛇身,后面的覆盖前面的i=this.body.length-1,因为蛇一共有三节,this.body.length=3,而数组的下标是0,1,2,蛇身就是2,1,i>0是因为蛇头是0,this.body[0],不能把蛇头给覆盖
for(var i=this.body.length-1;i>0;i--){
this.body[i].x=this.body[i-1].x;//x向前移动一个,行走时,不论x,y后面的永远覆盖前面的
this.body[i].y=this.body[i-1].y;
}
//移动蛇头
switch(this.direct){//因为是蛇头,它时这个json对象中的第一个元素,所以是body[0]。判断当前的蛇的方向
case 'up'://如果蛇的方向是向上的话,就y-1
this.body[0].y-=1;//this.body[0].y=this.body[0].y-1假如y=3,向上走一个,y=2
break;//break跳出整个循环
case 'down':
this.body[0].y+=1;
break;
case 'left':
this.body[0].x-=1;
break;
case 'right':
this.body[0].x+=1;//x,y改变了,json对象中的x,y也会改变,this.body中的x,y也会改变
break;
}
//把旧的蛇节删除
this.removeSnake();
//按照新的位置属性重新显示一下
this.display();//重新调用display函数,重新显示蛇,而蛇的位置已经发生改变,在switch循环中,x或y发生改变(蛇的位置发生改变),x,y的值改变this.body对象中的xy也发生改变,此时显示的就是蛇的新的位置,此时注意不要把json对象设置到display函数中,如果设置到其中,你重新设置蛇的位置它还是事先定义好的(默认蛇的位置),因为如果你设置到display函数中,它就是局部变量了,作用域只在display函数内,外面就改变不了了,而全局的就能更改它的值,相当于给变量重新赋值
//判断方向,这个是键盘的判断
//keycode对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
this.setDirect=function(keycode){//传进来键的unicode字符码
switch(keycode){
case 37://因为向上的键unicode的值是37,确定是哪个键表示向上
if(this.direct!='right'){
this.direct='left';
}
break;
case 38:
if(this.direct!='down'){
this.direct='up';
}
break;
case 39:
if(this.direct!='left'){
this.direct='right';
}
break;
case 40:
if(this.direct!='up'){
this.direct='down';
}
break;
}
}
}
this.removeSnake=function(){
var map=document.getElementById('map');//得到map图层中的所有内容
for(var i=0;i<this.body.length;i++){
map.removeChild(this.body[i].div);// 删除子节点。你同过appendChild把蛇的div添加到map的div中,你在删除map的div中的子节点,也就是蛇,通过for循环,一节一节删除
}
}
}
function init(){
food = new Food();//实例化一个对象
food.display();//通过它的对象调用它的方法
snake = new Snake();//实例化一个对象
snake.display();//snake相当于全局变量
}
function start(){
//snake.move();//当调用move时,就会移动,刷新一次,就移动一下
snake_id=setInterval("snake.move()",300);
}
function changeDirect(evt){
// alert(evt.keyCode);//这个就是显示你的键盘上你按的键的unicode字符码,获得unicode字符码值
snake.setDirect(evt.keyCode);//这个是调用snake中的setDirect函数,因为snake是全局变量
}
</script>
</head>
<!--onkeydown某个键盘按键被按下。就会触发这个事件-->
<body οnlοad="init()" οnkeydοwn="changeDirect(event)">
<div id="container">
<input type="button" οnclick="start()" value="开始">
<div id="map"></div>
</div>
</body>