这个 很简单 没有添加 边界判断和首尾相连判断
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<script type="text/javascript">
<!--
function ab2(){
var x=new Array();
x[0]=34;
x.push(45); //尾端添加
x.unshift(99); //头部添加
//x.pop(); //尾部删除
// x.shift(); //头部删除
x.sort();
alert(x);
}
//定义对象
function ab3(){
var ob={x:3,y:6};
alert(ob.x);
}
var sks=new Array();
//var sk1={x:60,y:90};
//var sk2={x:80,y:90};
var sk3={x:100,y:90};
//sks[2]=sk1;
//sks[1]=sk2;
sks[0]=sk3;
var d=3;//右
var newHead;//新蛇头
var ax;var ay;
function ab(){
clear();
paint();
changeHead();
eat();
}
//画蛇
function paint(){
for(var i=0;i<sks.length;i++){
var sk=document.createElement("<div id='k"+i+"'style='background-color:red;width:20px;height:20px;position:absolute;top:"+sks[i].y+"px;left:"+sks[i].x+"px'></div>");
document.body.appendChild(sk);
}
}
//删除蛇
function clear(){
for(var i=0;i<sks.length;i++){
var k=document.getElementById("k"+i);
if(k){
document.body.removeChild(k);
}
}
}
//创建苹果
function createApple(){
ax=Math.floor(Math.random()*500);
ay=Math.floor(Math.random()*500);
var sk=document.createElement("<div id='ap' style='background-color:#339900;width:20px;height:10px;position:absolute;top:"+ay+"px;left:"+ax+"px'></div>");
document.body.appendChild(sk);
}
//吃掉
function eat(){
if(newHead.x<ax&&newHead.x>ax-20&&newHead.y<ay&&newHead.y>ay-20){
var ap=document.getElementById("ap");
document.body.removeChild(ap);
sks.unshift(newHead);
createApple();
} else{
sks.unshift(newHead);
sks.pop();
}
}
//按键
function change(){
var key=event.keyCode;
switch(key){
case 37:
d=1;
break;
case 38:
d=2;
break;
case 39:
d=3;
break;
case 40:
d=4;
break;
}
}
//新蛇头
function changeHead(){
var head=sks[0];
var hx=head.x;
var hy=head.y;
switch(d){
case 1 :
hx=hx-5;
break;
case 2 :
hy=hy-5;
break;
case 3 :
hx=hx+5;
break;
case 4 :
hy=hy+5;
break;
}
newHead={x:hx,y:hy};
}
function start(){
window.setInterval("ab()",50);
createApple();
}
document.onkeydown=change;
//-->
</script>
</head>
<body onload="start()">
</body>
</html>
分享到:
相关推荐
javascript实现贪吃蛇小游戏思路 javascript小游戏贪吃蛇实现思路讲解(完整代码实现),供大家参考,具体内容如下 效果流程 1、首先我们要操作的canvas <!doctype ...
JavaScript实现贪吃蛇.zip
原生JavaScript实现贪吃蛇小游戏.zip
用 Javascript 编程和其他语言的一个大的区别就是键盘的控制代码不同。js是通过 Key=event.keyCode 语句获取键盘码,再在多分支 switch 结构里分别处理。看完这些代码就会对浏览器里的键盘控制有所了解了。 当然...
JS实现贪吃蛇游戏在浏览器玩起来!!!
javascript 实现的贪吃蛇 .
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 1.结构 创建一个盒子box作为蛇的身体,当前盒子中只有一个子元素,代表此时蛇的长度为1. 在创建一个盒子food作为贪吃蛇的食物。...
html5+javascript 实现贪吃蛇小游戏 实现功能升级 闯关升级
JavaScript是一种高级编程语言,用于在网页上实现交互和动态性。它是一种面向对象的语言,具有类似于C语言的语法和功能。 JavaScript最初是为了在网页上添加简单的交互功能而创建的,但随着时间的推移,它已经发展...
纯JS实现的贪吃蛇小游戏,很好很强大,欢迎下载
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 1.HTML部分,东西很少 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=...
本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html <!DOCTYPE html> <html lang=en> <...
主要为大家详细介绍了用JavaScript实现贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现贪吃蛇的具体代码,供大家参考,具体内容如下 首先我们要确定贪吃蛇应有的功能 1.通过键盘的上下左右控制蛇的移动方向 2.边界判定,即蛇头超出边界则游戏结束 3.碰撞判定,...
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 index.html代码如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=...
这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div class=btn> <!-- 开始按钮 -->...
主要为大家详细介绍了javascript实现贪吃蛇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下