贪吃蛇 javaScript 谷歌浏览器浏览
1.代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){
//alert("hello world!");
Snakee();
}
Snakee = function (){
var stopTag = true;
var i = 0;var headNode = null;
var snake = new Array(400);
var size = 2;
var nextIndex = 0 ;
snake[0]=21;
snake[1]=22;
var tagArr = new Array(400);
var headIndex = 0 ;
var tailIndex = 0 ;
var direction = 0 ;//右
var food = 35;
var speed = 1000;
var score = 0 ;
var oTime = null;
var gameover = false;
function getHeadIndex(){
headIndex = snake[size-1];
}
function getTailIndex(){
tailIndex = snake[0];
}
function isFood(){
if(next()==food)return true;
else return false;
}
function generateFood(){
for(i=0;i<400;i++)tagArr[i]=0;
for(i=0;i<size;i++)tagArr[snake[i]]=1;
var t = Math.round(Math.random()*(400-size-76)-0.5);
var count = 0 ;
for(i=0;i<400;i++){
if(tagArr[i]==0&&Math.floor(i/20)!=0&&Math.floor(i/20)!=19&&Math.floor(i%20)!=0&&Math.floor(i%20)!=19){
if(t==count){
food=i;
//return i;
}
count++;
}
}
}
function next(){
switch(direction){
case 0:
nextIndex = snake[size-1]+1;
break;
case 1:
nextIndex = snake[size-1]+20;
break;
case 2:
nextIndex = snake[size-1]-1;
break;
case 3:
nextIndex = snake[size-1]-20;
break;
}
}
function eat(){
next();
snake[size]=nextIndex;
size++;
drawScore(++score);
generateFood();
}
function forword(){
//eat();
next();
if(nextIndex==food){
eat();
//alert("");
}
else{
for(i=0;i<size;i++)
{
snake[i]=snake[i+1];
}
snake[size-1]=nextIndex;
}
}
function leftMove(){
if(direction!=2&&direction!=0)direction = 2 ;
}
function rightMove(){
if(direction!=2&&direction!=0)direction = 0 ;
}
function upMove(){
if(direction!=3&&direction!=1)direction = 3 ;
}
function downMove(){
if(direction!=3&&direction!=1)direction = 1 ;
}
function isExit(){
next();
var i = 0 ;
getHeadIndex();
var tag = false;
for(;i<size-1;i++){
if(headIndex==snake[i])tag=true;
}
if(Math.floor(nextIndex/20)<=0||Math.floor(nextIndex/20)>=19||Math.floor(nextIndex%20)<=0||Math.floor(nextIndex%20)>=19||tag)
{
//alert("GAVE OVER!!!");
gameover=true;
stopTag = true;
document.getElementById("stopBtn").disabled=true;
Test();
snake[0]=21;
snake[1]=22;
size = 2 ;
}
}
function stopGame(){
stopTag = true;
}
function startGame(){
stopTag = false;
}
function drawPanel(){
var contentHtml = "";
var i = 0 ;var j = 0 ;
var colorStr="";
contentHtml+="<div id='mainPanel' style='top: 10px;position:absolute ; left: 30%;width:200px;height:200px;'>";
contentHtml+="<div id='tooldiv'><input id='stopBtn' type='button' value='开始' style='float:left'></input><input id='restartBtn' type='button' value='重置' style='float:left'></input><select id='speedBtn'><OPTION VALUE='1000'>初级1</OPTION><OPTION VALUE='800'>初级2</OPTION><OPTION VALUE='600'>初级3</OPTION><OPTION VALUE='400'>中级1</OPTION><OPTION VALUE='200'>中级2</OPTION><OPTION VALUE='100'>中级3</OPTION><OPTION VALUE='80'>高级1</OPTION><OPTION VALUE='50'>高级2</OPTION><OPTION VALUE='20'>高级3</OPTION></select><input id='scoreInput' readOnly='true' type='text' style='border:0px;width:50px' value='得分:0'></input></div>";
contentHtml+="<div id='showPanel'>";
for(;i<20;i++){
j = 0;
if(i==0||i==19||j==0||j==19)colorStr="black";
else colorStr="#00ffff";
contentHtml+= "<div id='"+(20*i+j)+"' style='position: relative ;clear:left ;float:left;width:8px;height:8px;background-color:"+colorStr+";margin:1px 1px 1px 1px;'></div>";
for(j = 1;j<20;j++){
if(i==0||i==19||j==0||j==19)colorStr="black";
else colorStr="#00ffff";
contentHtml += "<div id='"+(20*i+j)+"' style='position: relative ;float:left;width:8px;height:8px;background-color:"+colorStr+";margin:1px 1px 1px 1px'></div>";
}
}
contentHtml += "</div></div>";
document.write(contentHtml);
var stopBtn = document.getElementById("stopBtn");
stopBtn.onclick=function(){
if(stopBtn.value=='开始'){
startGame();
stopBtn.value = '暂停';
}else{
stopGame();
stopBtn.value = '开始';
}
};
var restartBtn = document.getElementById("restartBtn");
restartBtn.onclick=function(){
window.location.reload();
};
var speedBtn = document.getElementById("speedBtn");
speedBtn.onchange=function(){
speed=speedBtn.value;
speedBtn.blur();
window.focus();
replay();
}
window.onkeypress=_onkeypress;
window.onkeydown=_onkeydown;
}http://www.huiyi8.com/tishiyin/
function drawScore(score){
document.getElementById("scoreInput").value=('得分:'+score);
}提示音
function drawDefaultSnake(){
for(i=0;i<size-1;i++){
headNode = document.getElementById(""+snake[i]);
headNode.style.backgroundColor = "blue";
}
headNode = document.getElementById(""+snake[size-1]);
headNode.style.backgroundColor = "red";
}
function clearSnake(){
for(i=0;i<size;i++){
headNode = document.getElementById(""+snake[i]);
headNode.style.backgroundColor = "#00ffff";
}
}
function drawFood(){
headNode = document.getElementById(""+food);
headNode.style.backgroundColor = "yellow";
}
function flashFood(){
//alert(r+";"+g+";"+b);
var foodTimer = null;
if(foodTimer!=null)clearInterval(foodTimer);
foodTimer = setInterval(function(){
if(gameover)clearInterval(foodTimer);
else{
if(!stopTag){
headNode = document.getElementById(""+food);
headNode.style.backgroundColor = "#00ffff";
generateFood();
}
}
},8000);
var fTimer = null;
if(fTimer!=null)clearInterval(fTimer);
fTimer = setInterval(function(){
if(gameover)clearInterval(fTimer);
else{
if(!stopTag){
headNode = document.getElementById(""+food);
r=Math.round(Math.random()*255);
g=Math.round(Math.random()*255);
b=Math.round(Math.random()*255);
headNode.style.backgroundColor = "rgb("+r+", "+g+", "+b+")";
}
}
},400);
}
function tailDraw(){
getTailIndex();
headNode = document.getElementById(""+tailIndex);
headNode.style.backgroundColor = "#00ffff";
}
function headDraw(){
headNode = document.getElementById(""+snake[size-2]);
headNode.style.backgroundColor = "blue";
getHeadIndex();
headNode = document.getElementById(""+headIndex);
headNode.style.backgroundColor = "red";
}
function reDraw(){
isExit();
tailDraw();
forword();
headDraw();
}
function replay(){
if(oTime!=null)clearInterval(oTime);
oTime=setInterval(function(){
if(!stopTag){
isExit();
if(!gameover){
reDraw();
//flashFood();
//drawFood();
}
}
},speed);
}
function play(){
drawPanel();
drawDefaultSnake();
flashFood();
replay();
}
function _onkeypress(){
if(gameover)return;
switch(event.keyCode){
case 39:
case 68:
rightMove();
break;
case 38:
case 87:
upMove();
break;
case 37:
case 65:
leftMove();
break;
case 40:
case 83:
downMove();
break;
case 32:
stopTag = !stopTag;
break;
}
}
function _onkeydown(){
if(gameover||stopTag)return;
switch(event.keyCode){
case 39:
case 68:
rightMove();
break;
case 38:
case 87:
upMove();
break;
case 37:
case 65:
leftMove();
break;
case 40:
case 83:
downMove();
break;
}
reDraw();
}
play();
}
function Test(){
var otTime = null;
var headdiv = document.getElementById("head");
if(otTime)
{
clearInterval(otTime);
}
var i = 0; var j = 0;
var headNode = null;
otTime=setInterval(function(){
if(i*20+j!=0){
//headNode.style.backgroundColor = "#00ffff";
}
headNode = document.getElementById(""+(i*20+j));
headNode.style.backgroundColor = "blue";
if(i%2==0)j++;
else j--;
if(j>=20){
j=19;
i++;
}
if(j<0){
j=0;
i++;
}
if(i*20+j>=400)clearInterval(otTime);
},10);
}
</script>
</head>
<body>
</body>
</html>
贪吃蛇 javaScript 谷歌浏览器浏览的更多相关文章
- 原生JavaScript贪吃蛇
在实例开发过程中还是能认识到很多不足的,并且加强了一些基础. 简单写一下制作过程: 1.创建画布 2.创建蛇和老鼠 坐标不能重叠 3.让蛇移动起来 4.添加死亡方法 5.添加转点坐标和方向 6.添加吃 ...
- javascript 编写的贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
- javascript实现贪吃蛇
<html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; wid ...
- JavaScript实现的--贪吃蛇
总的实现思路: 一.效果部分: 1.编写html代码,加上样式. 二.JavaScript部分: 1.利用dom方法创建一块草坪,即活动区域: 2.创建一条蛇,并设置其初始位置: ...
- JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
- 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- 使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...
- JavaScript原生实现《贪吃蛇》
概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细 代码下载:http://www.demodashi.com/demo/10728.h ...
随机推荐
- XV6操作系统接口
操作系统接口 操作系统的工作是(1)将计算机的资源在多个程序间共享,并且给程序提供一系列比硬件本身更有用的服务.(2)管理并抽象底层硬件,举例来说,一个文字处理软件(比如 word)不用去关心自己使用 ...
- UVA624 CD,01背包+打印路径，好题！
624 - CD 题意:一段n分钟的路程,磁带里有m首歌,每首歌有一个时间,求最多能听多少分钟的歌,并求出是拿几首歌. 思路:如果是求时常,直接用01背包即可,但设计到打印路径这里就用一个二维数组标记 ...
- [luoguP2447] [SDOI2010]外星千足虫（高斯消元 + bitset）
传送门 用bitset优化,要不然n^3肯定超时 消元过程中有几点需要注意,找到最大元后break,保证题目中所说的K最小 如果有自由元说明解很多,直接返回 #include <bitset&g ...
- [luoguP1666] 前缀单词（DP）
传送门 先把所有字符串按照字典序排序一下 会发现有字符串x和y(x再y前面,即字典序小),如果x不是y的前缀,那么在x前面不是x前缀的字符串也不是y的前缀 这样就可以DP了 f[i][j]表示前i个字 ...
- POJ2479【DP 枚举】
题意:给出一串数字,求出其中不重不交的两个子串的和的最大值 思路:最近最大子串和做多了,感觉这题有点水.枚举分割点,将序列分成左右两串,然后看左右串的最大子串和的最大值. //poj2479 #inc ...
- SHELL脚本运行的几种方法以及区别
#1 给脚本加上执行权限chmod u+x a.sh, 而后就可以直接用全路径来执行脚本了,比如当前文件夹下用./a.sh,如果如果脚本所在目录在PATH环境变量之中, 则直接用a.sh即可(这和运行 ...
- 使用DataOutputStream输出流的read方法出现读取字节不一致解决办法,本地和测试环境不一致
之前: DataInputStream in = new DataInputStream(connection.getInputStream()); byte[] b = new byte[in ...
- 第18章：MYSQL分区
第18章:分区 目录 18.1. MySQL中的分区概述 18.2. 分区类型 18.2.1. RANGE分区 18.2.2. LIST分区 18.2.3. HASH分区 18.2.4. KEY分区 ...
- django学习之- 动态验证码学习
实例:通过前台和后台,实现用户登录页面动态图片验证码校验,图片验证码部分使用Pillow模块实现,作为单独学习部分记录. 前端: <!DOCTYPE html> <html lang ...
- Maven新建webapp项目报错Could not resolve artifact org.apache.maven.archetypes:maven-archetype-webapp:pom:RELEASE
Windows-Preferences 在搜索框输入maven,点击下面的Archetypes--->Add Remote Catalog... 对应输入 http://repo1.maven. ...