1.背景牆 確定行列
2.創建蛇頭
3.蛇頭移動
4.蛇頭變向
5.創建食物
6.碰撞檢測
7.增加身體
8.食物消失 隨機創建新的食物
9身體蛇頭一起移動
——-完成——-
1.喫自己（自身碰撞檢測）
2.不反向移動document.onkeyup中判斷
3.蛇頭撞牆moveBody(array)； moveHead(col,row,head)
4.加分項check(obj1,obj2)
5.彩色隨機蛇createNode(type,parent,preObj)
snake.html頁面代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>貪喫蛇</title>
<style>
.out{
float: left;
width: 500px;
height: 500px;
background: #ccc;
/*border: 1px solid blue;*/
position: relative;
}
</style>
</head>
<body>
<div class="out">
</div>
<h1>貪<br/>喫<br/>蛇<br/>遊<br/>戲</h1>
<!-- 記錄分數 -->
<p style="font-size:20px;color:red"> score:<span id="score" style="color:black">0</span> </p>
<script src="./snake.js"></script>
<script>
var col=10;
var row=10;
var w=50;
var h=50;
var out=$('.out')[0]
var bodys=[];
//背景
createBg(out,col,row)
// 蛇頭
var head=createNode(1,out)
// 食物
var food=createNode(2,out)//createFood(out,w,h,col,row,1)
//計時器
var timer=setInterval(function(){
//身體移動
moveBody(bodys,head)
//頭部移動
moveHead(col,row,head);
// check(head,food)?alert('裝上了'):console.log('沒裝上')
//是否撞到自己
checkzs(head,bodys)
var checkstate=check(head,food);
if(checkstate){
//刪除food
out.removeChild(food);
//創建food(food不能創建在身體上)
food=createNode(2,out)
//創建身體
if (bodys.length>0) {
// var body=createBody(out,w,h,bodys[bodys.length-1])
var body=createNode(3,out,bodys[bodys.length-1])
// console.log(body)
}else{
// var body=createBody(out,w,h,head)
var body=createNode(3,out,head)
// console.log(body)
}
bodys.push(body)
}
},500)
//
createKeyEvent(head);
</script>
</body>
</html>
<!--
1.背景牆 確定行列
2.創建蛇頭
3.蛇頭移動
4.蛇頭變相
5.創建實物
6.碰撞檢測
7.增加身體
8.食物消失 隨機創建新的
9身體蛇頭一起移動
-------完成-------
1.喫自己checkzs(obj1,obj3)
2.不反向移動document.onkeyup中判斷
3.蛇頭撞牆moveBody(array)； moveHead(col,row,head)
4.加分項check(obj1,obj2)
5.彩色隨機蛇createNode(type,parent,preObj)
-->snake.js頁面代碼快
//獲取元素方法
function $(string){
var tag=string.charAt(0);
var ele=null;
switch(tag){
case ".":
ele=document.getElementsByClassName(string.slice(1))
break;
case "#":
ele=document.getElementById(string.slice(1))
break;
default:
ele=document.getElementsByTagName(string);
break;
}
return ele;
}
var fenshu=0;
var score=$('#score');
var speeding=0;
//創建背景方法
function createBg(parent,col,row){
//創建表格
parent.style.width=row*50+"px";
parent.style.height=col*50+"px";
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
var div =document.createElement('div')
div.style.width="48px"
div.style.height="48px"
div.style.border="1px solid #000000"
div.style.float='left'
parent.appendChild(div);
}
}
}
//事件監聽
function createKeyEvent(head){
document.onkeyup=function(event){
// console.log(event)
var event=event||window.event
var key=event.keyCode;
if (head.className=="left"&&event.keyCode==39) {
return;
}
if (head.className=="right"&&event.keyCode==37) {
return;
}
if (head.className=="top"&&event.keyCode==40) {
return;
}
if (head.className=="down"&&event.keyCode==38) {
return;
}
switch(key){
case 40:
head.className='down'
break;
case 37:
head.className="left"
break;
case 38:
head.className="top"
break;
case 39:
head.className="right"
break;
}
}
}
//碰撞檢測
function check(obj1,obj2){
if (obj1.offsetLeft==obj2.offsetLeft&&obj1.offsetTop==obj2.offsetTop) {
if (food.style.backgroundColor=='yellow') {
fenshu++;
score.innerHTML=(fenshu);
}
if (food.style.backgroundColor=='pink') {
fenshu+=2;
score.innerHTML=(fenshu);
}
if (food.style.backgroundColor=='skyblue') {
fenshu+=3;
score.innerHTML=(fenshu);
}
return true;
}
return false;
}
function checkzs(obj1,obj3){
if (obj3.length>3) {
for (var i = obj3.length - 1; i >= 3; i--) {
x=obj3[i].offsetLeft;
y=obj3[i].offsetTop;
// console.log(x)
// console.log(y)
// console.log(obj1.offsetLeft)
// console.log(obj1.offsetTop)
if (x==obj1.offsetLeft&&y==obj1.offsetTop) {
alert("失誤")
}
}
}
}
//頭部移動
function moveHead(col,row,head){
var left=0;
var top=0;
if (head.offsetLeft<0||head.offsetLeft>(col-1)*50||head.offsetTop<0||head.offsetTop>(row-1)*50) {
clearInterval(timer);
alert("遊戲結束")
window.location.reload();
}
switch(head.className){
case 'left':
left=head.offsetLeft-50;
top=head.offsetTop
break;
case 'right':
left=head.offsetLeft+50;
top=head.offsetTop
break;
case 'top':
left=head.offsetLeft;
top=head.offsetTop-50
break;
case 'down':
left=head.offsetLeft;
top=head.offsetTop+50
break;
}
head.style.left=left+'px'
head.style.top=top+'px'
}
//移動body
function moveBody(array){
if (array.length>0) {
if (head.offsetLeft<0||head.offsetLeft>(col-1)*50||head.offsetTop<0||head.offsetTop>(row-1)*50) {
window.location.reload();
clearInterval(timer);
}
for (var i = array.length - 1; i >= 0; i--) {
switch(array[i].className){
case 'left':
x=array[i].offsetLeft-50;
y=array[i].offsetTop
break;
case 'right':
x=array[i].offsetLeft+50;
y=array[i].offsetTop
break;
case 'top':
x=array[i].offsetLeft;
y=array[i].offsetTop-50
break;
case 'down':
x=array[i].offsetLeft;
y=array[i].offsetTop+50
break;
}
var aa=parseInt(Math.random()*225);
var bb=parseInt(Math.random()*225);
var cc=parseInt(Math.random()*225);
bodys[i].style.bgColor="rgb(" + aa + "," + bb + "," + cc + ")";
bodys[i].style.left=x+"px";
bodys[i].style.top=y+'px';
if (i==0) {
array[i].className=head.className
}else{
array[i].className=array[i-1].className
}
}
}
}
/*
檢測座標是否重合
*/
function checkfood(x,y,array){
// console.log(head)
if (x==head.offsetLeft&&y==head.offsetTop) {
return false
}
for (var i = 0; i < array.length; i++) {
// 檢測到重複
if (array[i].offsetLeft==x&&array[i].offsetTop==y) {
return false;
}
if (i==array.length-1) {
return true;
}
}
return true;
}
/*
創建節點對象
type 1 蛇頭 2 food 3 身體
*/
function createNode(type,parent,preObj){
var x=0;
var y=0;
var w=50;
var h=50;
var bgColor;
var className="";
var preObj=preObj?preObj:null
switch(type){
case 1:
bgColor="#00FF00"
className="right"
break;
case 2:
var foodtype=parseInt(Math.random()*10)%3
var foods=[['yellow',1],['skyblue',2],['pink',3]]
bgColor=foods[foodtype][0]
// x=parseInt(Math.random()*row)*50;
// y=parseInt(Math.random()*col)*50;
var array=bodys;
// console.log(array)
test();
function test(){
var a=parseInt(Math.random()*row)*50;
var b=parseInt(Math.random()*col)*50;
var state=checkfood(a,b,array)
// alert(state)
if (state) {
x=a;
y=b;
}else{
test();
}
}
break;
case 3:
switch(preObj.className){
case 'left':
x=preObj.offsetLeft+50;
y=preObj.offsetTop
break;
case 'right':
x=preObj.offsetLeft-50;
y=preObj.offsetTop
break;
case 'top':
x=preObj.offsetLeft;
y=preObj.offsetTop+50
break;
case 'down':
x=preObj.offsetLeft;
y=preObj.offsetTop-50
break;
}
className=preObj.className;
var aa=parseInt(Math.random()*225);
var bb=parseInt(Math.random()*225);
var cc=parseInt(Math.random()*225);
bgColor="rgb(" + aa + "," + bb + "," + cc + ")";
break ;
default:
break
}
var node=document.createElement('div');
node.style.background=bgColor;
node.style.position="absolute";
node.style.left=x+"px";
node.style.top=y+"px";
node.style.width=w+"px";
node.style.height=h+"px";
node.style.zIndex=999;
node.className=className;
parent.appendChild(node)
return node;
}