java 贪吃蛇地狱模式_升级版贪吃蛇（可变地图与难度，有炸弹）

最新推荐文章于 2023-08-22 20:51:42 发布

原创最新推荐文章于 2023-08-22 20:51:42 发布 · 219 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java 贪吃蛇地狱模式

本文介绍了一款基于HTML和CSS的蛇形游戏前端实现细节，包括游戏界面布局、元素定位及交互逻辑等关键技术。

snake

margin: 0;

padding: 0;

background-color: #9fc;

}

body{

width: 80%;

}

.div{

position: absolute;

width: 50px;

height: 50px;

border-radius: 24px;

}

frame{

position: relative;

width: 105%;

height: 650px;

top: -10px;

left: 200px;

}

#iframeone{

width: 100%;

height: 680px;

margin-top: -120px;

}

td{

width: 48px;

height: 48px;

border: 1px solid #aaa;

background-color: rgba(153,255,153,0.8);

border-radius: 24px;

}

span{

position: relative;

width: 100px;

height: 30px;

top: 100px;

left: 50px;

}

#btn{

float: left;

width: 100px;

height: 100px;

margin-top: 20px;

}

display: block;

text-align: center;

text-decoration: none;

line-height: 30px;

width: 150px;

height: 30px;

margin-top: 5px;

margin-left: -20px;

margin-right: 20px;

background-color: #ddd;

font-size: 30px;

border-radius: 20px;

}

a:hover{

font-size: 40px;

background-color: #666;

color: #ddd;

}

select{

width: 100px;

height: 20px;

}

10X10

margin: 0;

padding: 0;

background-color: #9fc;

}

body{

width: 300px;

}

.div{

position: absolute;

width: 50px;

height: 50px;

border-radius: 24px;

}

box{

position: absolute;

width: 500px;

height: 500px;

border: 3px solid #98f;

top: 120px;

left: 100px;

z-index: 1;

}

td{

width: 48px;

height: 48px;

border: 1px solid #aaa;

background-color: rgba(153,255,153,0.8);

border-radius: 24px;

}

span{

position: relative;

width: 100px;

height: 30px;

top: 100px;

left: 700px;

}

#btn{

position: absolute;

width: 250px;

height: 100px;

left: 600px;

top: 150px;

}

button{

float: right;

width: 120px;

height: 30px;

margin-top: 5px;

margin-left: -20px;

margin-right: 20px;

background-color: #ddd;

font-size: 20px;

margin-left: 700px;

}

button:hover{

font-size: 22px;

}

select{

display: block;

margin-left: 700px;

margin-top: 360px;

width: 100px;

height: 20px;

}

SCORE:0

脑残

简单

一般

达人

超人

地狱

必死

0块

1块

5块

10块

20块

var box = document.getElementById("box");

var img = document.createElement("img");

document.write("

var table = document.getElementById("table")

for (var i = 0; i < 10; i++) {

document.write("

");

for (var j = 0; j < 10; j++) {

document.write("

");

}

document.write("

");

}

document.write("

");

box.appendChild(table);

function CreateNode(type){//创建所有块的类

var div = document.createElement("div");

div.className = "div";

div.style.left = parseInt(Math.random()*10)*50 + "px";

div.style.top = parseInt(Math.random()*10)*50 + "px";

box.appendChild(div);

switch(type){

case 1:

div.style.background = "#f60";

break;

case 2:

div.style.background = "#369";

break;

case 3:

div.style.background = "green";

break;

case 4:

div.style.background = "#000";

break;

}

return div;

}

var score = 0;

var span = document.getElementById("ss");

var allNode = new Array();

var headNode = CreateNode(1);

var foodNode = CreateNode(2);

var bombNode = CreateNode(4);

var bomb = document.getElementsByTagName("option");

/*function changebomb(num){

for (var b = 0 ; b < parseInt(num); b++) {

bombNode = CreateNode(4);

}

}*/

var everyNode = [];

everyNode.push(headNode);

headNode.value = 37;

headNode.appendChild(img);

function update(){

if (parseInt(headNode.style.left)>=500parseInt(headNode.style.left)<0parseInt(headNode.style.top)>=500parseInt(headNode.style.top)<0) {

alert("你挂了！");

}

if (allNode.length>0) {

for (var i = allNode.length-1; i >= 0; i--) {

if (headNode.style.left == allNode[i].style.left && headNode.style.top == allNode[i].style.top) {

alert("你挂了！");

}

switch(allNode[i].value){

case 37:

allNode[i].style.left = parseInt(allNode[i].style.left) - 50 +"px";

break;

case 38:

allNode[i].style.top = parseInt(allNode[i].style.top) - 50 +"px";

break;

case 39:

allNode[i].style.left = parseInt(allNode[i].style.left) + 50 +"px";

break;

case 40:

allNode[i].style.top = parseInt(allNode[i].style.top) + 50 +"px";

break;

}

if (i == 0) {

allNode[i].value = headNode.value;

}else{

allNode[i].value = allNode[i-1].value;

}

switch(headNode.value){

case 37:

headNode.style.left = parseInt(headNode.style.left) - 50 +"px";

break;

case 38:

headNode.style.top = parseInt(headNode.style.top) - 50 +"px";

break;

case 39:

headNode.style.left = parseInt(headNode.style.left) + 50 +"px";

break;

case 40:

headNode.style.top = parseInt(headNode.style.top) + 50 +"px";

break;

}

if (foodNode.style.left == headNode.style.left && foodNode.style.top == headNode.style.top) {

score += 10;

span.innerHTML = "

SCORE:" + score + "

var newBody = CreateNode(3);

var lastBody = null;

if (allNode.length ==0) {

lastBody = headNode;

}else{

lastBody = allNode[allNode.length-1];

}

newBody.value = lastBody.value;

switch(newBody.value){

case 37:

newBody.style.left = parseInt(lastBody.style.left) + 50 +"px";

newBody.style.top = lastBody.style.top;

break;

case 38:

newBody.style.top = parseInt(lastBody.style.top) + 50 +"px";

newBody.style.left = lastBody.style.left;

break;

case 39:

newBody.style.left = parseInt(lastBody.style.left) - 50 +"px";

newBody.style.top = lastBody.style.top;

break;

case 40:

newBody .style.top = parseInt(lastBody.style.top) - 50 +"px";

newBody.style.left = lastBody.style.left;

break;

}

allNode.push(newBody);

everyNode.push(newBody);

var px = 0;

var py = 0;

var fbool = true;

var num = 0;

while(fbool){

px = parseInt(Math.random()*10)*50 + "px";

py = parseInt(Math.random()*10)*50 + "px";

for (var m = 0; m < everyNode.length; m++) {

if (everyNode[m].style.left == px && everyNode[m].style.top == py) {

num++;

}

if (num == 0) {

break;

}else{

num = 0;

}

foodNode.style.left = px;

foodNode.style.top = py;

bombNode.style.left = parseInt(Math.random()*10)*50 + "px";

bombNode.style.top = parseInt(Math.random()*10)*50 + "px";

}

if (bombNode.style.left == headNode.style.left && bombNode.style.top == headNode.style.top) {

score -= 10;

span.innerHTML = "

SCORE:" + score + "

var bx = 0;

var by = 0;

var bbool = true;

var bnum = 0;

var bf = true;

var bfnum = 0;

while(bbool){

bx = parseInt(Math.random()*10)*50 + "px";

by = parseInt(Math.random()*10)*50 + "px";

for (var v = 0; v < everyNode.length; v++) {

if (everyNode[v].style.left == bx && everyNode[v].style.top == by) {

bnum++;

}

if (bnum == 0) {

break;

}else{

bnum = 0;

}

while(bf){

if (px == bx && py == by) {

bfnum++;

}

if (bfnum == 0) {

break;

}else{

bfnum = 0;

}

bombNode.style.left = bx;

bombNode.style.top = by;

}

function changeTime(speed){

setInterval(update, speed);

}

/*var t = setInterval(update, 300);*/

document.onkeydown = function(){

/*clearInterval(t);*/

switch(event.keyCode){

case 37:

if (headNode.value != 39allNode.length == 0) {

headNode.value = 37;

}

img.src = "s1.png";

break;

case 38:

if (headNode.value != 40allNode.length == 0) {

headNode.value = 38;

}

img.src = "s2.png";

break;

case 39:

if (headNode.value != 37allNode.length == 0) {

headNode.value = 39;

}

img.src = "s3.png";

break;

case 40:

if (headNode.value != 38allNode.length == 0) {

headNode.value = 40;

}

img.src = "s4.png";

break;

}

其他的内嵌网页都类似，只要改一下参数即可

java 贪吃蛇 地狱模式_升级版贪吃蛇（可变地图与难度，有炸弹）

SCORE:0

SCORE:" + score + "

SCORE:" + score + "

java 贪吃蛇地狱模式_升级版贪吃蛇（可变地图与难度，有炸弹）