1. First of all, I thought about the snake
Using object-oriented ideas, attributes and methods see mind maps
2. HTML code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="content">
<div class="btn startBtn"><button ></button></div>
<div class="btn pause"><button></button></div>
<div id="snackWarp"> <! -- <div class="snackHead"></div>
<div class="snackbody"></div>
<div class="food"></div> -->
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Copy the codeThe CSS part
*{ padding: 0%; margin: 0%; } .content{ height: 600px; width: 600px; background-color: yellow; border: 20px solid skyblue; position: relative; margin: 0% auto; } .btn { width: 100%; height: 100%; Background: Rgba (0, 0, 0, 0.3); left: 0; top: 0; z-index: 3333; position: absolute; } .btn button{ background-size: 100% 100%; border: none; cursor: pointer; outline: none; left: 50%; top: 50%; position: absolute; } .startBtn button{ width: 238px; height: 45px; background-image: url(images/start.png); margin-left: -119px; margin-top: -22px; } .pause{ display: none; } .pause button{ height: 20px; width: 20px; background-image: url(images/pause.png); margin-left: -10px; border-radius: 50%; /* margin-top: -10px; * /}#snackWarp{
height: 600px;
height: 600px;
position: relative;
background-color: # 225675;} / * * / 101#snackWarp div{
width: 20px;
height: 20px;
border-radius: 50%;
}
.snackHead{
background-size: cover;
background-image: url(images/snackhead.png);
background-color: red;
}
.snackbody{
background-color: #9ddb11;
background-size: cover;
}
.food{
background-image: url(images/food-strawberry.png);
background-size: cover;
}
Copy the codeNative JS part
var he = 20, wi = 20; var i = 30, j = 30; var snack = null, food = null, game = null; // constructor propertiesfunction Squre(x, y, className) {
this.x = x * wi;
this.y = y * he;
this.class = className;
this.viewContent = document.createElement('div'); this.viewContent.className = this.class; // directly equal to classname. this.parent = document.getElementById("snackWarp"); } // Add the constructor to the DOM element. You can't use squre.prototype.create = without adding it to the prototypefunction() {
this.viewContent.style.position = "absolute";
this.viewContent.style.width = wi + 'px';
this.viewContent.style.height = he + 'px';
this.viewContent.style.left = this.x + 'px';
this.viewContent.style.top = this.y + 'px'; this.parent.appendChild(this.viewContent); }; // Delete the DOM element squre.prototype.delete =function() { this.parent.removeChild(this.viewContent); } // create a block end // create a snake start,function Snack() { this.head = null; // this. Tail = null; // this.pos = []; Left :{x:-1, y: 0, rotate: 180}, right:{x: +1, y: 0, rotate: 0}, top: {x: 0, y: -1, rotate: -90}, down: {x: 0, y: 1, rotate: 90}} // Initialize snack.prototype. init =functionVar snackHead = new Squre(2, 0, 0);'snackHead'); snackHead.create(); this.head = snackHead; / /! This.pos.push ([2,0]); Var snackBody1 = new Squre(1, 0,"snackbody"); snackBody1.create(); This. Pos. Push ([1, 0]); Var snackBody2 = new Squre(0, 0, 0)"snackbody"); snackBody2.create(); This. Pos. Push ([0, 0]); this.tail = snackBody2; Snackhead. last = null; snackHead.next = snackBody1; snackBody1.last = snackHead; snackBody1.next = snackBody2; snackBody2.last = snackBody1; snackBody2.next = null; This.derection = this.derectionNum. Right; } / / get the snake the next element corresponding to the location of the DE elements, and according to the different elements of Snack. Prototype. GetNextPos =functionVar nextPos = [this.head. X /wi +(this.derection. X), this.head. Y /he + this.derection. Value =nextPos;forEach is traversal var selfColl =false; // By default, this.pos.foreach (function(value){
if(value[0] == nextPos[0] && value[1] == nextPos[1]){
selfColl = true; }});if(selfColl){
console.log("Hit the ziji");
this.thing.die.call(this);
return; } // Hit the wall game overif(nextPos[0] <0 || nextPos[1]<0 ||nextPos[0]>29||nextPos[1]>29){
console.log("Hit the qiang");
this.thing.die.call(this);
return; } // The next point is food, eatif(food && food.pos[0]== nextPos[0] && food.pos[1] == nextPos[1]){
this.thing.eat.call(this);
return; }} this.thing. Move. Call (this.thing.false); }; Snack.prototype.thing = {// this->this.thing. If you want to change, you can call move:function(formot) {
var newBody = new Squre(this.head.x/wi, this.head.y/he, 'snackbody'); Newbody.next =this.head. Next; this.head.next.last = newBody; newBody.last = null; this.head.delete(); newBody.create(); Var newHead = new Squre(this.head. X /wi + this.derection. X, this.head.'snackHead'); newHead.create(); // Update the list relationship newhead.next = newBody; newHead.last = null; newBody.last = newHead; / / the snake rotation / / newHead. ViewContent. Style. The transform ='rotate('+this.derection.rotate+'deg)'; // this. Head = newHead; / each square information/update the snake body, the front insert newhead enclosing pos. The splice (0, 0, [this. Head. X/wi, enclosing the head. The y/he]); // Whether to remove the snake tailif(! formot) { this.tail.delete(); this.tail = this.tail.last; this.pos.pop(); } }, eat:function() {
this.thing.move.call(this, true);
createFood();
game.score++;
},
die: function() {
console.log('die'); game.over(); } } snack = new Snack(); // snack.init(); // snack.getNextPos(); // The snake is finished. // The food is startedfunction createFoodVar a = null, b= null; var include =true;
while(include) {
a=Math.round(Math.random()*(i-1));
b=Math.round(Math.random()*(j-1));
snack.pos.forEach(function(value){
if(a ! =value[0]&& b ! = value[1]) { include =false; }}); } // generate food food = new Squre(a, b,'food'); food.pos=[a,b]; Var foodDom = document.querySelector('.food');
if(foodDom){
foodDom.style.left = a*wi+'px';
foodDom.style.top = a*he+'px';
}else{ food.create(); }} // Create food end // create game logic startfunction Game() {
this.timer = null;
this.score = 0;
}
Game.prototype.init= function() {
snack.init();
// snack.getNextPos();
createFood();
document.onkeydown= function(e) {
if(e.which == 37&& snack.derection ! =snack.derectionNum.right) { snack.derection =snack.derectionNum.left; }else if(e.which == 38&& snack.derection ! =snack.derectionNum.down) { snack.derection =snack.derectionNum.top; }else if(e.which == 39&& snack.derection ! =snack.derectionNum.left) { snack.derection =snack.derectionNum.right; }else if(e.which == 40&& snack.derection ! =snack.derectionNum.top) { snack.derection =snack.derectionNum.down; } } this.start(); } Game.prototype.start =function() {
this.timer = setInterval(function(){ snack.getNextPos(); }, 200); } var snackWarp = document.getelementById ('snackWarp');
var pauseBtn = document.querySelector('.pause button');
snackWarp.onclick= function() {
game.Pause();
pauseBtn.parentNode.style.display = 'block';
}
pauseBtn.onclick = function(){
game.start();
pauseBtn.parentNode.style.display = 'none';
}
Game.prototype.over = function() {
clearInterval(this.timer);
alert('Your score is:'+this.score); Var snackWarp = document.getelementById ('snackWarp');
snackWarp.innerHTML = ' ';
snack = new Snack();
game = new Game;
var startButton = document.querySelector('.startBtn');
startButton.style.display = 'block';
}
Game.prototype.Pause = function() { clearInterval(this.timer); } // Start game = new game (); var startBtn = document.querySelector('.startBtn button');
startBtn.onclick = function(){
startBtn.parentNode.style.display = 'none'; game.init(); } // Create game logic endCopy the coderendering
