<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Object-oriented snake </title>
<style>
HTML, Body {
margin:0;
padding:0;
Background:rgb (162, 186, 103);
}
#wall {
margin:100px Auto 0;
Background:linear-gradient (to Top, #eae65d, #abea95, #896360);
box-shadow:0 0 2px 2px rgba (0, 0, 0, 0.53);
position:relative;
}
. createbody {
width:20px;
height:20px;
Background: #fffdf5;
Position:absolute;
box-shadow:0 0 1px 1px #000000 inset;
}
#yel {
Background: #a2ba67;
}
. createfood {
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
width:20px;
height:20px;
Position:absolute;
box-shadow:0 0 1px 1px #000000 inset;
Background: #fffdf5;
}
. bord {
-webkit-border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
-webkit-box-shadow:0 1px 2px 1px grey;
-moz-box-shadow:0 1px 2px 1px grey;
box-shadow:0 1px 2px 1px grey;
width:150px;
font-size:40px;
Color: #a31d42;
Text-align:center;
Border-style:solid;
border-width:0 1px 1px;
Border-color: #c5c6b9 #808080;
}
. bord:first-child {
Position:absolute;
top:0;
left:110%;
}
. Bord:nth-child (2) {
Position:absolute;
bottom:0;
left:110%;
}
#score, #level {
height:80px;
line-height:80px;
}
. Word {
-webkit-border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
Background: #eae65d;
height:30px;
line-height:30px;
font-size:18px;
}
. int {
margin-left:10px;
Color: #000;
width:300px;
height:400px;
font-size:30px;
Float:left;
}
. int span {
width:200px;
Display:inline-block;
}
@keyframes Add {
0% {
font-size:80px;
}
100% {
font-size:40px;
}
}
. foot{
Text-align:center;
font-size:16px;
}
</style>
<body>
<div class= "int" >
<p><span>to top</span>↑</p>
<p><span>to Bottom </span>↓</p>
<p><span>to left </span>←</p>
<p><span>to right</span>→</p>
<p><span>stop</span>space</p>
</div>
<div id= "Wall" >
<div class= "Bord" >
<div class= "word" >score</div>
<div id= "Score" >0</div>
</div>
<div class= "Bord" >
<div class= "word" >level</div>
<div id= "Level" >1</div>
</div>
</div>
<div class= "Foot" >
Code Source: youngHeart9506 CSDN Blog
</div>
</body>
<script>
var owall = document.getElementById (' wall ');
var Oinsert = document.getElementById (' Insert ');
var wallwidth = 700;
var wallheight = 400;
OWall.style.width = wallwidth + ' px ';
OWall.style.height = wallheight + ' px ';
var snake = {
Asnake: [],
SIZE:20,
TOP:200,
left:400,
SPEED:250,
Level:1,
len:3,//length default of 3 units
Direction: ' Left ',//direction by default
Create:function () {//Create initial snake
for (var i = 0; i < Snake.len; i++) {
var left = snake.left + snake.size * i;
var top = Snake.top;
var odiv = document.createelement (' div ');
ODiv.style.left = left + ' px ';
ODiv.style.top = top + ' px ';
Odiv.classname = ' createbody ';
Owall.appendchild (ODIV);
Snake.aSnake.push (ODIV);
}
snake.asnake[0].id = ' Yel '
},
Move:function () {
Move the body of the snake to traverse the div setting position equal to the previous position
for (var b = snake.asnake.length-1; b > 0; b--) {
var s = snake.asnake[b];
var s2 = snake.asnake[b-1];
S.style.left = S2.style.left;
S.style.top = S2.style.top;
}
var fsts = snake.asnake[1];
var AddS = snake.asnake[0];
if (snake.direction = = ' Left ')
AddS.style.left = parseint (fstS.style.left)-snake.size + ' px ';
else if (snake.direction = = ' right ')
AddS.style.left = parseint (fstS.style.left) + snake.size + ' px ';
else if (snake.direction = = ' top ')
AddS.style.top = parseint (fstS.style.top)-snake.size + ' px ';
else if (snake.direction = = ' Bottom ')
AddS.style.top = parseint (fstS.style.top) + snake.size + ' px ';
Snake.check ();
Snake.eat ();
},
Check:function () {
Check the position of the snake's head (dead food)
var fsts = snake.asnake[0];
var sleft = parseint (fstS.style.left);
var sTop = parseint (fstS.style.top);
if (sleft <=-snake.size | | sleft >= wallwidth | | stop <=-snake.size | | Stop >= wallheight) {
Clearinterval (Snake.move);
var M = confirm (' Hit the wall, game over! Do you want to start again? ‘);
if (M) {
Document.location.reload ();
} else {
Game.stop ();
}
return;//, did the test hit the wall?
}
for (var c = 1; c < snake.aSnake.length; C + +) {
var sb = Snake.asnake[c];
if (Sleft = = parseint (sb.style.left) && STop = = parseint (sb.style.top)) {
Clearinterval (Snake.move);
var N = confirm (' Bump yourself up, game over! Do you want to start again? ‘);
if (N) {
Document.location.reload ();
} else {
Game.stop ();
}
Return
}
}
},
Grow:function () {
var level = document.getElementById (' level ');
var score = document.getElementById (' score ');
var abody = snake.aSnake.length;
var inner = score.innerhtml;
if (abody! = Snake.len) {
score.innerhtml = (abody-snake.len) * Snake.level * 10;
}
Level.classname = ";
if (Abody > 15) {
Snake.level = 2;
} else if (Abody > 40) {
Snake.level = 3;
}
if (snake.level! = level.innerhtml) {
level.innerhtml = Snake.level;
}
var fsts = snake.asnake[snake.asnake.length-2];
var AddS = snake.asnake[snake.asnake.length-1];
AddS.style.left = parseint (fstS.style.left) + ' px ';
AddS.style.top = parseint (fstS.style.top) + ' px ';
return snake.level;
},
Eat:function () {
var food = document.getelementsbyclassname (' createfood ') [0];
var fsts = snake.asnake[0];
var fleft = parseint (food.style.left);
var ftop = parseint (food.style.top);
var sleft = parseint (fstS.style.left);
var sTop = parseint (fstS.style.top);
if (Fleft = = Sleft && STop = = ftop) {
Snake.aSnake.push (food);
Food.classname = ' createbody ';
Snake.grow ();
var ofood = new food ();
Ofood.create ();
return snake.asnake;
}
}
};
function food () {
}
Food.prototype.default = function () {
var left = 300;
var top = 200;
var odiv = document.createelement (' div ');
ODiv.style.left = left + ' px ';
ODiv.style.top = top + ' px ';
Odiv.classname = ' Createfood ';
Owall.appendchild (ODIV);
};
Food.prototype.create = function () {
var left = Math.floor (Math.random () * (wallwidth/snake.size)) * snake.size;
var top = Math.floor (Math.random () * (wallheight/snake.size)) * snake.size;
for (var i = 0; i < snake.aSnake.length; i++) {
var s = snake.asnake[i];
if (left = = parseint (s.style.left) && top = = parseint (s.style.top)) {
var food = new food ();
Food.create ();
Return
}
var odiv = document.createelement (' div ');
ODiv.style.left = left + ' px ';
ODiv.style.top = top + ' px ';
Odiv.classname = ' Createfood ';
}
Owall.appendchild (ODIV);
};
var game = {
Inter: ' Inter ',
Init:function () {//game initialization
var food = new food ();
Food.default ();//Generate Location Food
Snake.create ();//Generate snakes
Document.onkeyup = function (event) {
var code = Event.keycode;
if (code = = PNs && snake.direction! = "Right") {
Snake.move ();
Game.stop ();
Snake.direction = "Left";
Game.start ();
}
if (code = = && Snake.direction! = "Bottom") {
Snake.move ();
Game.stop ();
Snake.direction = "Top";
Game.start ();
}
if (code = = && Snake.direction! = "Left") {
Snake.move ();
Game.stop ();
Snake.direction = "right";
Game.start ();
}
if (code = = && Snake.direction! = "Top") {
Snake.move ();
Game.stop ();
Snake.direction = "Bottom";
Game.start ();
}
if (code = = 32) {
Game.stop ();
}
};
},
Start:function () {
Game.inter = SetInterval (Snake.move, snake.speed/snake.level);
},
Stop:function () {
Clearinterval (Game.inter)
}
};
Window.onload = function () {
Game.init ();
};
</script>
Snake Full text
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
